RSCG – BlazorOcticons

RSCG – BlazorOcticons
 
 

Generates Blazor components for GitHub Octicons SVG icons or from svg.

Easily integrate GitHub Octicons into your Blazor applications.

This is how you can use BlazorOcticons .

The code that you start with is

<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">

  <PropertyGroup>
    <TargetFramework>net10.0</TargetFramework>
    <Nullable>enable</Nullable>
    <ImplicitUsings>enable</ImplicitUsings>
    <OverrideHtmlAssetPlaceholders>true</OverrideHtmlAssetPlaceholders>
  </PropertyGroup>

  <ItemGroup>
    <AdditionalFiles Include="andrei-16.svg" />
  </ItemGroup>
	


	<ItemGroup>
    <PackageReference Include="BlazorOcticons" Version="1.3.0" />
    <PackageReference Include="BlazorOcticonsGenerator" Version="1.3.0">
    </PackageReference>
    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="10.0.1" />
    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="10.0.1" PrivateAssets="all" />
  </ItemGroup>
	<!-- Use only local test icons -->
	<ItemGroup>
		<AdditionalFiles Remove="$(BlazorOcticonsIconsPath)**\*.svg" />
	</ItemGroup>
	<ItemGroup>
	  <Folder Include="Octicons\" />
	</ItemGroup>


	<PropertyGroup>
		<EmitCompilerGeneratedFiles>true</EmitCompilerGeneratedFiles>
		<CompilerGeneratedFilesOutputPath>$(BaseIntermediateOutputPath)\GX</CompilerGeneratedFilesOutputPath>
	</PropertyGroup>
</Project>
	

The code that you will use is

using BlazorDemo;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

await builder.Build().RunAsync();

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M9.923 5.302c.063.063.122.129.178.198H14A.75.75 0 0 1 14 7h-3.3l.578 5.163.362 2.997a.75.75 0 0 1-1.49.18L9.868 13H6.132l-.282 2.34a.75.75 0 0 1-1.49-.18l.362-2.997L5.3 7H2a.75.75 0 0 1 0-1.5h3.9a2.54 2.54 0 0 1 .176-.198 3 3 0 1 1 3.847 0ZM9.2 7.073h-.001a1.206 1.206 0 0 0-2.398 0L6.305 11.5h3.39ZM9.5 3a1.5 1.5 0 1 0-3.001.001A1.5 1.5 0 0 0 9.5 3Z"/></svg>

<svg xmlns="http://www.w3.org/2000/svg" width="@Size" height="@Size" viewBox="0 0 16 16"><path fill="@Color" d="M9.923 5.302c.063.063.122.129.178.198H14A.75.75 0 0 1 14 7h-3.3l.578 5.163.362 2.997a.75.75 0 0 1-1.49.18L9.868 13H6.132l-.282 2.34a.75.75 0 0 1-1.49-.18l.362-2.997L5.3 7H2a.75.75 0 0 1 0-1.5h3.9a2.54 2.54 0 0 1 .176-.198 3 3 0 1 1 3.847 0ZM9.2 7.073h-.001a1.206 1.206 0 0 0-2.398 0L6.305 11.5h3.39ZM9.5 3a1.5 1.5 0 1 0-3.001.001A1.5 1.5 0 0 0 9.5 3Z"/></svg>

@code
{
  [Parameter]
  public string Color { get; set; } = "#000";

  [Parameter]
  public int Size { get; set; } = 16;
}

The code that is generated is

Code and pdf at

https://ignatandrei.github.io/RSCG_Examples/v2/docs/BlazorOcticons