A RSBuild plugin that automatically generates optimized CSS with embedded SVG icons from Iconify.
- 🚀 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
npm install rsbuild-plugin-iconify --save-dev
# or
yarn add rsbuild-plugin-iconify -D
# or
bun add -D rsbuild-plugin-iconifyAdd 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"/>| 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 |
MIT