You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.jsimport{pluginIconify}from'rsbuild-plugin-iconify'exportdefault{plugins: [pluginIconify({// Options (all optional)targetDir: 'src/styles/icons',// Directory to save generated CSSincludeSets: ['mdi-light','material-symbols'],// Icon sets to include completelymaxIconsPerSet: 200,// Max icons per included setmaxTotalIcons: 1000,// Max total iconscompress: 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<spanclassName="icon-[mdi-light--home] iconify"/>// For colored icons<spanclassName="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
About
Plugin to help get icons from iconify, generate css and compress it
