SvgIconGenerator by Matt Schneeberger

NuGet / site data
Details
Original Readme
How to use
Useful

NuGet / site data

Details

Info

info

Name: SvgIconGenerator

SVG icon source generator

Author: Matt Schneeberger

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

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

Source: https://github.com/helluvamatt/SvgIconGenerator

Author

note

Matt Schneeberger Alt text

Original Readme

note

SVG Icon Generator

A C# source generator that automatically creates strongly-typed icon properties from SVG files.

Installation

Install the NuGet package in your project:

dotnet add package SvgIconGenerator

Usage

######### 1. Organize Your SVG Files

Place your SVG icon files in a folder within your project (e.g., Icons/):

YourProject/
├── Icons/
│   ├── user-circle.svg
│   ├── home.svg
│   └── settings.svg
└── Program.cs

######### 2. Add SVG Files as AdditionalFiles

In your .csproj file, add the SVG files as AdditionalFiles:

<ItemGroup>
  <AdditionalFiles Include="Icons/*.svg" />
</ItemGroup>

Important: Adding files as AdditionalFiles ensures that changes to SVG files trigger regeneration during incremental compilation.

######### 3. Create an Icon Class

Create a static partial class and decorate it with the [GenerateIcons] attribute:

[GenerateIcons]
internal static partial class MyIcons;

You can optionally specify a glob pattern to filter which SVG files to include:

// Include all SVG files from AdditionalFiles
[GenerateIcons]
internal static partial class AllIcons;

// Filter by glob pattern
[GenerateIcons("Icons/*.svg")]
internal static partial class MyIcons;

######### 4. Access Generated Icons

The source generator will create properties for each SVG file. Property names are automatically converted from kebab-case to PascalCase:

// user-circle.svg becomes UserCircle
IconDto icon = MyIcons.UserCircle;

Console.WriteLine($"Icon name: {icon.Name}");
Console.WriteLine($"ViewBox: {icon.DefaultAttributes["viewBox"]}");
Console.WriteLine($"SVG content: {icon.InnerContent}");

######### 5. Render Icons

The IconDto contains everything needed to render the icon:

public static string RenderIcon(IconDto icon, Dictionary<string, string>? customAttributes = null)
{
    // Merge default attributes with custom overrides
    var attributes = new Dictionary<string, string>(icon.DefaultAttributes);
    if (customAttributes != null)
    {
        foreach (var kvp in customAttributes)
        {
            attributes[kvp.Key] = kvp.Value;
        }
    }

    // Build attribute string
    var attrString = string.Join(" ", attributes.Select(kvp => $"{kvp.Key}=\"{kvp.Value}\""));

    // Return complete SVG
    return $"<svg {attrString}>{icon.InnerContent}</svg>";
}

// Use it
string svg = RenderIcon(MyIcons.UserCircle, new Dictionary<string, string>
{
    ["class"] = "icon",
    ["width"] = "24",
    ["height"] = "24"
});

Using with Popular Icon Libraries

You can use this generator with popular icon libraries installed via NPM, such as Bootstrap Icons, Lucide, Heroicons, or Feather Icons.

######### Example: Lucide Icons

Install Lucide icons via NPM:

npm install lucide-static

Add the icons as AdditionalFiles in your .csproj:

<ItemGroup>
  <AdditionalFiles Include="node_modules/lucide-static/icons/*.svg" />
</ItemGroup>

Create the icon class with optional glob pattern filter:

[GenerateIcons("node_modules/lucide-static/icons/*.svg")]
internal static partial class LucideIcons;

Access any Lucide icon:

IconDto icon = LucideIcons.UserCircle;
IconDto icon2 = LucideIcons.ShoppingCart;
IconDto icon3 = LucideIcons.AlertTriangle;

######### Example: Bootstrap Icons

npm install bootstrap-icons

<ItemGroup>
  <AdditionalFiles Include="node_modules/bootstrap-icons/icons/*.svg" />
</ItemGroup>

[GenerateIcons("node_modules/bootstrap-icons/icons/*.svg")]
internal static partial class BootstrapIcons;

######### Example: Heroicons

npm install heroicons

<ItemGroup>
  <AdditionalFiles Include="node_modules/heroicons/24/outline/*.svg" />
  <AdditionalFiles Include="node_modules/heroicons/24/solid/*.svg" />
</ItemGroup>

// Outline style icons
[GenerateIcons("node_modules/heroicons/24/outline/*.svg")]
internal static partial class HeroiconsOutline;

// Solid style icons
[GenerateIcons("node_modules/heroicons/24/solid/*.svg")]
internal static partial class HeroiconsSolid;

######### Multiple Icon Sets

You can create multiple icon classes in the same project to organize different icon sets:

<ItemGroup>
  <AdditionalFiles Include="node_modules/lucide-static/icons/*.svg" />
  <AdditionalFiles Include="Icons/custom/*.svg" />
  <AdditionalFiles Include="Icons/logos/*.svg" />
</ItemGroup>

[GenerateIcons("node_modules/lucide-static/icons/*.svg")]
internal static partial class LucideIcons;

[GenerateIcons("Icons/custom/*.svg")]
internal static partial class CustomIcons;

[GenerateIcons("Icons/logos/*.svg")]
internal static partial class LogoIcons;

How It Works

The source generator reads SVG files from AdditionalFiles in your project
Files are optionally filtered by glob pattern (if specified in the attribute)
For each SVG file, it:
- Extracts the root element's attributes (excluding xmlns and class)
- Captures the inner SVG content
- Converts the filename to PascalCase for the property name
Generates a partial class with IconDto properties for each icon
Incremental compilation: Changes to SVG files automatically trigger regeneration

IconDto Structure

The generated IconDto record contains:

Name (string): The original kebab-case filename without extension
DefaultAttributes (IReadOnlyDictionary<string, string>): SVG root attributes like viewBox, fill, stroke, etc.
InnerContent (string): The inner HTML content (paths, circles, etc.)

Example SVG Input

Given an SVG file Icons/user-circle.svg:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
  <circle cx="12" cy="12" r="10"/>
  <circle cx="12" cy="10" r="3"/>
  <path d="M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662"/>
</svg>

The generator creates:

/// <summary>
/// Icon: user-circle
/// </summary>
public static readonly IconDto UserCircle = new IconDto(
    "user-circle",
    new global::System.Collections.Generic.Dictionary<string, string> {
        \{ "width", "24" },
        \{ "height", "24" },
        \{ "viewBox", "0 0 24 24" },
        \{ "fill", "none" },
        \{ "stroke", "currentColor" },
        \{ "stroke-width", "2" },
    },
    "<circle cx=\"12\" cy=\"12\" r=\"10\"/><circle cx=\"12\" cy=\"10\" r=\"3\"/><path d=\"M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662\"/>");

Requirements

.NET Standard 2.0 or higher
C# 9.0 or higher (for record types)

License

See the repository for license information.

About

note

Generating classes from SVG icons to be used in C# projects.

How to use

Example (source csproj, source files)

CSharp Project
Program.cs
Icons.cs

This is the CSharp Project that references SvgIconGenerator

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

  <PropertyGroup>
    <OutputType>Exe</OutputType>
    <TargetFramework>net10.0</TargetFramework>
    <ImplicitUsings>enable</ImplicitUsings>
    <Nullable>enable</Nullable>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="SvgIconGenerator" Version="0.0.4">
    </PackageReference>
  </ItemGroup>
	<ItemGroup>
		<AdditionalFiles Include="Icons/*.svg" />
	</ItemGroup>

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

This is the use of SvgIconGenerator in Program.cs

using DemoSvg;

Console.WriteLine(MyIcons.Circle.Name);

Console.WriteLine(MyIcons.Rect.InnerContent);

This is the use of SvgIconGenerator in Icons.cs

using System;
using System.Collections.Generic;
using System.Text;
using SvgIconGenerator;
namespace DemoSvg;

[GenerateIcons()]
internal static partial class MyIcons;

Generated Files

Those are taken from $(BaseIntermediateOutputPath)\GX

GenerateIconsAttribute.g.cs
IconDto.g.cs
MyIcons.g.cs

namespace SvgIconGenerator
{
    /// <summary>
    /// Marks a static partial class for icon generation.
    /// The source generator will scan AdditionalFiles for SVG files matching the specified glob pattern
    /// and generate static readonly IconDto properties for each icon found.
    /// </summary>
    /// <remarks>
    /// SVG files must be added to the project as AdditionalFiles in the .csproj file:
    /// <code>
    /// &lt;ItemGroup&gt;
    ///   &lt;AdditionalFiles Include="icons/**/*.svg" /&gt;
    /// &lt;/ItemGroup&gt;
    /// </code>
    /// </remarks>
    [global::System.AttributeUsage(global::System.AttributeTargets.Class, Inherited = false, AllowMultiple = false)]
    internal sealed class GenerateIconsAttribute : global::System.Attribute
    {
        /// <summary>
        /// Initializes a new instance of the <see cref="GenerateIconsAttribute"/> class.
        /// </summary>
        public GenerateIconsAttribute()
        {
        }

        /// <summary>
        /// Initializes a new instance of the <see cref="GenerateIconsAttribute"/> class.
        /// </summary>
        /// <param name="globPattern">
        /// Optional glob pattern to filter SVG files from AdditionalFiles.
        /// If not specified, all SVG files in AdditionalFiles will be included.
        /// Supports * (wildcard) and ** (recursive) patterns.
        /// Example: <code>"node_modules/lucide-static/icons/*.svg"</code>
        /// </param>
        public GenerateIconsAttribute(string globPattern)
        {
        }
    }
}

namespace SvgIconGenerator
{
    /// <summary>
    /// Represents an icon with its SVG metadata and content.
    /// This type is generated by the IconGenerator source generator.
    /// </summary>
    /// <param name="Name">The kebab-case name of the icon (e.g., "circle-user-round").</param>
    /// <param name="DefaultAttributes">The default attributes from the SVG root element (excluding xmlns). Common attributes include: width, height, viewBox, fill, stroke, stroke-width, stroke-linecap, stroke-linejoin.</param>
    /// <param name="InnerContent">The inner HTML content of the SVG element (paths, circles, lines, etc.).</param>
    public sealed record IconDto(string Name, global::System.Collections.Generic.IReadOnlyDictionary<string, string> DefaultAttributes, string InnerContent);
}

//------------------------------------------------------------------------------
// <auto-generated>
//     This code was generated by a tool.
//
//     Changes to this file may cause incorrect behavior and will be lost if
//     the code is regenerated.
// </auto-generated>
//------------------------------------------------------------------------------

namespace DemoSvg
{
    partial class MyIcons
    {
        /// <summary>
        /// Icon: Circle
        /// </summary>
        public static readonly global::SvgIconGenerator.IconDto Circle = new global::SvgIconGenerator.IconDto(
            "Circle",
            new global::System.Collections.Generic.Dictionary<string, string> {
                \{ "height", "100" },
                \{ "width", "100" },
            },
            "<circle r=\"45\" cx=\"50\" cy=\"50\" fill=\"red\" />");

        /// <summary>
        /// Icon: Rect
        /// </summary>
        public static readonly global::SvgIconGenerator.IconDto Rect = new global::SvgIconGenerator.IconDto(
            "Rect",
            new global::System.Collections.Generic.Dictionary<string, string> {
                \{ "width", "300" },
                \{ "height", "130" },
            },
            "<rect width=\"200\" height=\"100\" x=\"10\" y=\"10\" rx=\"20\" ry=\"20\" fill=\"blue\" />");

    }
}