Package Exports

rsbuild-plugin-iconify
rsbuild-plugin-iconify/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (rsbuild-plugin-iconify) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

RSBuild Plugin Iconify

A RSBuild plugin that automatically generates optimized CSS with embedded SVG icons from Iconify.

Features

🚀 Automatically scan your code for icon usage
🎯 Generate optimized SVG data URIs for icons
🔄 Include complete icon sets or only used icons
📦 Compress and optimize the final CSS
🔌 Seamless integration with RSBuild

Installation

npm install rsbuild-plugin-iconify --save-dev
# or
yarn add rsbuild-plugin-iconify -D
# or
bun add -D rsbuild-plugin-iconify

Usage

Add the plugin to your RSBuild configuration:

// rsbuild.config.js
import { pluginIconify } from 'rsbuild-plugin-iconify'

export default {
    plugins: [
        pluginIconify({
            // Options (all optional)
            targetDir: 'src/styles/icons', // Directory to save generated CSS
            includeSets: ['mdi-light', 'material-symbols'], // Icon sets to include completely
            maxIconsPerSet: 200, // Max icons per included set
            maxTotalIcons: 1000, // Max total icons
            compress: true, // Apply compression
        }),
    ],
}

Import the generated CSS in your main CSS file:

@import './styles/icons/generated-icons.css';

Use the icons in your components:

// With CSS classes
<span className="icon-[mdi-light--home] iconify"/>

// For colored icons
<span className="icon-[material-symbols--edit] iconify-color"/>

Options

Option	Type	Default	Description
`targetDir`	`string`	`'src/styles/icons'`	Directory to save generated CSS
`includeSets`	`string[]`	`['mdi-light', 'material-symbols']`	Icon sets to include completely
`maxIconsPerSet`	`number`	`200`	Maximum icons per included set
`maxTotalIcons`	`number`	`1000`	Maximum total icons
`compress`	`boolean`	`true`	Apply compression to CSS

License

MIT