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