Icons with UnoCSS
If you are using UnoCSS, you can easily use over 150,000 open source icons and custom icons with minimal code.
Among other features, UnoCSS has @unocss/preset-icons package that dynamically generates icons. It uses icon data from Iconify.
Usage
To use icons with UnoCSS, add @unocss/preset-icons preset to config:
import presetIcons from '@unocss/preset-icons';
UnoCSS({
presets: [
presetIcons({
/* options */
}),
// ...other presets
],
});
In your code add element with the following class name: "i-" + icon set prefix + "-" + icon name.
Examples:
<span class="i-carbon-logo-github"></span>
<span class="i-mdi-light-home"></span>
It is that simple.
For more information, see README file in preset-icons package.
Icon size
Be aware that by default, UnoCSS scales icons to 1.2em.
You can change that by changing scale option.
Custom icons
You can use UnoCSS with custom icons. During the build process, you can import, clean up and optimise icons using Iconify Tools.
See demo from Iconify Tools package. Configuration is in unocss.config.ts.