vite-iconify-svgmap

vite-iconify-svgmap

Generates SVG sprite maps from Iconify icon packs. Icon usage is tracked in memory; the only files written are the final sprites.

Setup

1. Install the plugin and at least one @iconify-json/* pack:

pnpm add -D @stephansama/vite-iconify-svgmap @iconify-json/mdi

1. Astro: add the integration to astro.config.mjs:

import iconifySvgmap from "@stephansama/vite-iconify-svgmap/astro/integration";
import { defineConfig } from "astro/config";

export default defineConfig({
  integrations: [iconifySvgmap()],
});

SvelteKit: add the plugins from @stephansama/vite-iconify-svgmap/svelte/integration after sveltekit() in vite.config.js:

import iconifySvgmap from "@stephansama/vite-iconify-svgmap/svelte/integration";
import { sveltekit } from "@sveltejs/kit/vite";
import { defineConfig } from "vite";

export default defineConfig({ plugins: [sveltekit(), iconifySvgmap()] });

Plain Vite: add iconifySvgmap() from @stephansama/vite-iconify-svgmap to plugins.

1. Add the virtual module types to tsconfig.json:

{ "compilerOptions": { "types": ["@stephansama/vite-iconify-svgmap/client"] } }

Core Patterns

Static imports (preferred)

---
import home from "virtual:iconify-svgmap/mdi/home";
---

<svg width="24" height="24" aria-hidden="true"><use href={home}></use></svg>

The default export is the sprite href (/_astro/mdi.<hash>.svg#home in builds). Unknown packs or icons fail the build.

Icons only known while rendering

---
import { getIcon } from "virtual:iconify-svgmap";

const href = getIcon(entry.data.pack, entry.data.icon);
---

<svg width="24" height="24" aria-hidden="true"><use href={href}></use></svg>

getIcon is synchronous. It registers the icon in memory and returns /_iconify/<pack>.svg?v=<build>#<icon>. The Astro integration writes those sprites in astro:build:done; without Astro call writeSprites(clientOutDir) after rendering.

Icon components (astro, svelte)