unplugin/unplugin-icons
Unplugin Icons
unplugin-icons is a build-time plugin that integrates with modern bundlers to import icons from popular icon sets automatically. It detects icon usage in source code and tree-shakes the final bundle to include only the icons actually referenced, reducing unnecessary payload. The plugin also provides a mechanism for loading custom SVG icon collections from local files or remote sources, making them accessible through the same import syntax as built-in sets.
The plugin is framework-agnostic and offers a conventional path resolution scheme for referencing icons by collection and name across different frontend frameworks. A pipeline-based transformation system lets users customize icon appearance—such as size, style, and class—before the SVG is injected into the build. Additionally, it supports importing icons as raw SVG strings for direct use in templates or as framework components, all without runtime overhead.
Automatic icon detection in templates and JSX eliminates manual import statements, while custom icon collection loading and component-based imports extend flexibility. The overall design ensures that icons are handled efficiently and consistently regardless of the build tool or framework in use.
Features
- Cross-Framework Build Plugins - Works with multiple frontend frameworks to import icons without runtime overhead.
- Cross-Build-Tool Plugins - Provides a single API that adapts to multiple build tools via a shared plugin interface.
- Automatic Component Imports - Automatically detects icons used in templates and JSX and imports them without manual statements.
- Icon Import Path Conventions - Maps import paths like ~icons/collection/name to SVG files using a predefined naming convention.
- Icon Collections - Provides a single API to access icons from multiple popular icon sets like Material and Font Awesome.
- Build Plugin Importers - Imports icons from popular icon sets as framework components or raw SVG with automatic tree-shaking.
- Icon Components - Imports icons from popular sets as framework components with automatic tree-shaking.
- Custom SVG Loaders - Provides a custom loader mechanism to load user-defined SVG icons from files, inline content, or remote sources.
- Icon Libraries - Allows importing icons as framework components using a convention-based path with tree-shaking.
- Template Scan Importers - Automatically resolves and imports icons used in template code, eliminating manual import statements.
- SVG Component Transformations - Provides a chain of configurable transformations to resize, style, and wrap SVGs as components during the build.
- Bundler Integration Tools - Integrates with bundlers to include only the icons used in the project source code into the final build.
- Usage-Based Auto Importers - Scans source code for icon usage and automatically imports only the exact icons used, eliminating unused icons.
- Custom Source - Loads user-provided SVG files or remote sources as a custom icon collection accessible via the same import syntax.
- Custom Source Loaders - Enables loading user-defined SVG icons from files, inline content, or remote sources for use alongside built-in collections.
- Core Frameworks - On-demand icon loading for component-based projects.
- Icon Libraries - On-demand access to thousands of icons as components.
