BlazorOcticons

Product Introduction

1. Definition: BlazorOcticons is a native Blazor component library that transforms GitHub's Octicons SVG set into reusable Razor components. It falls under the technical category of UI asset optimization tools for .NET developers.
2. Core Value Proposition: It eliminates manual SVG asset management by providing programmatic access to 700+ GitHub Octicons, enabling developers to embed, resize, and recolor icons directly in Blazor markup while ensuring visual consistency.

Main Features

1. Native Razor Component Integration:
   Each icon (e.g., MarkGithub16, Alert24) is a standalone .razor component. BlazorOcticons uses SVG-in-JSX syntax under the hood, compiling GitHub’s SVG paths into parameterized C# components. Developers reference icons via declarative syntax like <Alert24 Size="32" Color="#ff0000"/>.
2. Dynamic Customization Engine:
   Icons accept Size (pixel-based) and Color (hex/RGB) parameters via Blazor’s component parameter binding. The library internally converts these inputs into inline SVG attributes, dynamically rendering optimized vector graphics without CSS conflicts.
3. Version-Synced Icon Repository:
   Automatically mirrors GitHub’s official Octicons release pipeline. All icons (12px to 96px variants) are pre-built into components, ensuring parity with GitHub’s design system. Includes tree-shaking to exclude unused icons during compilation.

Problems Solved

1. Pain Point: Manual SVG asset handling causes version drift, bloated bundles, and styling inconsistencies in Blazor SPAs. BlazorOcticons solves this with centralized icon version control and on-demand rendering.
2. Target Audience:
   • Blazor UI Developers building enterprise dashboards or GitHub-integrated tools.
   • Full-Stack .NET Engineers requiring design-system-compliant icons.
   • SaaS Teams prioritizing maintainability in large codebases.
3. Use Cases:
   • Embedding GitHub-style icons in Blazor documentation tools.
   • Creating themeable admin panels with color-adaptive icons.
   • Rapid prototyping with production-ready iconography.

Unique Advantages

1. Differentiation vs. Alternatives: Unlike icon fonts (e.g., Font Awesome) requiring CSS classes, BlazorOcticons uses type-safe Razor components with IntelliSense support. Contrasted with manual SVG imports, it reduces boilerplate by 90% and ensures SVG markup consistency.
2. Key Innovation: Compile-time SVG-to-component conversion – GitHub’s SVG JSON database is transpiled to C# during build, enabling native Blazor debugging and eliminating runtime HTTP requests for icons.

Frequently Asked Questions (FAQ)

1. How to install BlazorOcticons in ASP.NET Core?
   Execute dotnet add package BlazorOcticons, then add @using BlazorOcticons.Octicons to _Imports.razor. No JavaScript dependencies or static file configuration required.
2. Can I use Octicons in both Blazor WebAssembly and Server?
   Yes, BlazorOcticons supports Blazor WebAssembly (client-side), Blazor Server, and hybrid MAUI apps via .NET Standard 2.1 compatibility.
3. How to customize icon color dynamically?
   Bind the Color parameter to a variable: <HeartFill16 Color="@currentColor" />. Accepts CSS variables (e.g., var(--primary)), hex codes, or RGB values.
4. Are all GitHub Octicons available as components?
   All 700+ icons from the official set are included, with naming following {IconName}{Size} conventions (e.g., CodeReview24). Missing icons trigger compile-time errors.
5. Does this impact Blazor performance?
   Icons render as inline SVGs with no external HTTP calls. Library size is optimized via IL trimming, adding <50KB gzipped in typical use cases.