$ show unplugin/unplugin-icons
unplugin-icons is a universal build tool plugin that enables on-demand import of thousands of SVG icons as framework-specific components. It integrates with Vite, Webpack, Rollup, Nuxt, Rspack, and esbuild via the unplugin abstraction. The core architecture consists of a loader that resolves icon paths (e.g., `~icons/mdi/account`), fetches SVG data from Iconify or custom collections, and passes the SVG through a compiler that generates code for Vue 3, React/JSX, Svelte, Solid, Astro, Ember, Qwik, Web Components, or raw SVG strings. Options allow customization of scale, style, class, icon customizer, and auto-install of icon sets. The resolver module enables auto-importing icons as components in Vue/React/Solid projects via unplugin-vue-components or unplugin-auto-import. The codebase is well-structured, with clear separation between build tool adapters, core logic, and compilers. It relies on external dependencies like @iconify/utils for SVG loading and optional peer dependencies for framework-specific compilation.
The LLM identified 4 files worth highlighting for reuse:
Core module that resolves icon paths (e.g., `~icons/collection/icon`), extracts query parameters, loads SVG via Iconify's node loader (supporting custom collections and auto-install), and delegates to the appropriate compiler. It handles the full pipeline from import path to generated component code. This module is self-contained and could be extracted as a standalone icon loading utility for any build tool.
Compiler that transforms raw SVG into a Vue 3 component using `@vue/compiler-sfc`'s `compileTemplate`. It integrates with `handleSVGId` to avoid ID collisions by generating random IDs for gradient/pattern references. The output is a `markRaw` component with a render function. This demonstrates a clean pattern for programmatic SFC generation and could be reused in other Vue 3 code generation tools.
Utility that detects SVG elements referencing IDs (e.g., `url(#gradient)`) and replaces them with dynamic Vue reactive bindings that generate unique random IDs at runtime. This prevents ID collisions when multiple instances of the same icon are used on a page. The pattern is non-obvious and solves a common SVG reuse problem; it could be extracted as a standalone SVG sanitizer for any framework.
Resolver for unplugin-vue-components and unplugin-auto-import that maps component names (e.g., `IMdiAccount`) to icon import paths (`~icons/mdi/account`). It supports prefix configuration, collection aliases, custom collections, and strict matching. The resolver is a clean implementation of the unplugin resolver pattern and can be reused in any project needing auto-import of icon components.