BlazorOcticons by Evgeniy K.

NuGet / site data
Details
Installation
Usage
Contribute
How to use
Useful

NuGet / site data

Details

Info

info

Name: BlazorOcticons

Package Description

Author: Evgeniy K.

NuGet: https://www.nuget.org/packages/BlazorOcticons/

You can find more details at https://github.com/BlazorOcticons/BlazorOcticons

Source: https://github.com/BlazorOcticons/BlazorOcticons

Author

note

Evgeniy K. Alt text

Original Readme

note

BlazorOcticons

BlazorOcticons is an easy-to-use GitHub Octicons built as customizable .razor components.

NuGet Package	Description
BlazorOcticons	Main package which contains only `.razor` components
BlazorOcticonsGenerator	Helper package which contains Source Generators for Octicons

Installation

Install the BlazorOcticons NuGet package:

dotnet add package BlazorOcticons

In the _Imports.razor file add @using BlazorOcticons.Octicons:

@using System.Net.Http
@using System.Net.Http.Json
...
@using Microsoft.AspNetCore.Components
@using Microsoft.JSInterop
@using BlazorOcticons.Octicons

That's it! Now you can use the components in your project.

Usage

Inside your code, use any of GitHub Octicons as .razor components:

<div class="p-3">
  ...
  <MarkGithub16 Color="#702AF7" Size="48"/>
  ...
</div>

Contribute

All contributions are welcome! Feel free to raise any issues (bugs or feature requests), submit pull requests, etc.

About

note

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

Easily integrate GitHub Octicons into your Blazor applications.

How to use

Example (source csproj, source files)

CSharp Project
Program.cs
andrei-16.svg
Andrei16.razor

This is the CSharp Project that references BlazorOcticons

<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>
	

This is the use of BlazorOcticons in Program.cs

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();

This is the use of BlazorOcticons in andrei-16.svg

<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>

This is the use of BlazorOcticons in Andrei16.razor

<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;
}