A tiny cross-platform CLI tool (C# / .NET 8+) that downloads selected SVG icons from the Iconify API and produces a fully self-contained JavaScript bundle.
Works offline, compatible with Iconify v3, no Node.js required.
| Description | |
|---|---|
| ⚡ Single call per collection | Requests many icons at once → fewer round-trips |
| 📦 Output formats: ESM or IIFE | Modern import support or legacy global Iconify |
| 🗂 Includes aliases & chars | Keeps original Iconify set structure intact |
| 📝 Simple JSON config | List the icons you need, choose the output type—done |
| 🔄 Sample config bootstrap | A ready-to-edit icons-config.json is created if missing |
| 🐧 Runs everywhere | Windows / macOS / Linux, container-friendly |
git clone https://github.com/your-org/iconify-bundle-generator.git
cd iconify-bundle-generator
dotnet build -c ReleaseTip: run the tool once without a config and the sample file will be generated automatically.
dotnet run --project IconifyBundleGenerator \
-- icons-config.json wwwroot/iconify-bundle.jsYou will now have wwwroot/iconify-bundle.js ready to ship.
<!-- HTML / Razor / Blazor -->
<script type="importmap">
{
"imports": {
"@iconify/iconify": "https://cdn.jsdelivr.net/npm/@iconify/iconify/dist/iconify.es.mjs"
}
}
</script>
<script type="module" src="/iconify-bundle.js"></script><script src="https://cdn.jsdelivr.net/npm/@iconify/iconify@3/dist/iconify.min.js"></script>
<script src="/iconify-bundle.js"></script><span class="iconify" data-icon="mdi:home" data-width="24"></span>Add the generated bundle to wwwroot and reference it in your layout/view.
// Program.cs (or Startup.cs)
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddRazorPages();
var app = builder.Build();
app.UseStaticFiles(); // make sure static files are enabled
app.MapRazorPages();
app.Run();@* _Layout.cshtml *@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>@ViewData["Title"] - MySite</title>
</head>
<body>
@RenderBody()
<!-- ESM variant -->
<script type="importmap">
{
"imports": {
"@iconify/iconify": "/lib/iconify/iconify.es.mjs" // or CDN url
}
}
</script>
<script type="module" src="~/iconify-bundle.js"></script>
<!-- IIFE variant (if you generated `"module": "iife"`) -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@iconify/iconify@3/dist/iconify.min.js"></script>
<script src="~/iconify-bundle.js"></script>
-->
</body>
</html>Now you can drop icons anywhere in Razor:
<span class="iconify" data-icon="lucide:mail" data-width="20"></span>No additional Tag Helpers or components are necessary—Iconify replaces the element at runtime.
| Field | Type | Default | Description |
|---|---|---|---|
outputFileName |
string | iconify-bundle.js |
Target JS file name |
module |
"esm" | "iife" |
esm |
Bundle type |
icons |
string[] | — | List of icons (prefix:name) |
Use "*" to pull an entire collection, e.g. "mdi:*" (can be huge).
| Question | Answer |
|---|---|
ReferenceError: addCollection is not defined |
Generated in IIFE mode but Iconify script is missing. Add the CDN script before the bundle. |
Failed to resolve module specifier "@iconify/iconify" |
Browser needs an Import Map or switch to IIFE mode. |
| How do I update the bundle when the icon list changes? | Edit icons-config.json and run the generator again. |
| Is it safe for production? | Yes—once generated the bundle is an ordinary JS file served by your app/CDN. |
- Fork 💫
- Create a feature branch (
git checkout -b feat/my-awesome-thing) - Commit (
git commit -am 'feat: add my awesome thing') - Push (
git push origin feat/my-awesome-thing) - Open a pull request 📬
We welcome PRs and issues of any size—typos included!
MIT © 2025 Paul Dikaloff
{ // the resulting JS file "outputFileName": "iconify-bundle.js", // "esm" ‑ modern browsers | "iife" ‑ legacy browsers "module": "esm", // icons in "prefix:name" format "icons": [ "mdi:home", "mdi:account", "lucide:mail", "heroicons:bell-20-solid" ] }