Unplugin Icons
unplugin-icons is an alternative to Iconify icon components, developed by Anthony Fu.
It generates icon components on demand for multiple frameworks and supports all popular build tools.
Latest documentation is available at unplugin-icons GitHub repository.
Difference
What is the difference from Iconify icon components?
unplugin-icons does not load icon data from API. It detects icons that you are using in your project and bundles them during build process.
It is very easy to use.
Usage
unplugin-icons generates icon components for the following frameworks:
- Vue 2
- Vue 3
- React
- Preact
- Svelte
- Solid
Usage example for React:
import IconAccessibility from '~icons/carbon/accessibility';
import IconAccountBox from '~icons/mdi/account-box';
function App() {
return (
<div>
<IconAccessibility />
<IconAccountBox style={{ fontSize: '2em', color: 'red' }} />
</div>
);
}
See unplugin-icons GitHub repository for more information.
Custom icons
You can use unplugin-icons with custom icons. During build process you can import, clean up and optimise icons using Iconify Tools.
See demo from Iconify Tools package. Configuration is in svelte.config.js.