💛 You can help the author become a full-time open-source maintainer by sponsoring him on GitHub.
Use any icon from Iconify
npm i @egoist/tailwindcss-icons -DIn your tailwind.config.js:
const { iconsPlugin, getIconCollections } = require("@egoist/tailwindcss-icons")
module.exports = {
plugins: [
iconsPlugin({
// Select the icon collections you want to use
// You can also ignore this option to automatically discover all individual icon packages you have installed
// If you install @iconify/json, you should explicitly specify the collections you want to use, like this:
collections: getIconCollections(["mdi", "lucide"]),
// If you want to use all icons from @iconify/json, you can do this:
// collections: getIconCollections("all"),
// and the more recommended way is to use `dynamicIconsPlugin`, see below.
}),
],
}You also need to install @iconify/json (full icon collections, 50MB) or @iconify-json/{collection_name} (individual icon package):
# install every icon:
npm i @iconify/json -D
# or install individual packages like this:
npm i @iconify-json/mdi @iconify-json/lucide -DThen you can use the icons in your HTML:
<!-- pattern: i-{collection_name}-{icon_name} -->
<span class="i-mdi-home"></span>Search the icon you want to use here: https://icones.js.org
Tip
To get the full list of icon names as typescript type, you can refer to this issue.
| Option | Type | Default | Description |
|---|---|---|---|
| prefix | string | i |
Class prefix for matching icon rules |
| scale | number | 1 |
Scale relative to the current font size |
| strokeWidth | number | undefined |
Stroke width for icons (this may not work for all icons) |
| extraProperties | Record<string, string> | {} |
Extra CSS properties applied to the generated CSS. |
| collectionNamesAlias | [key in CollectionNames]?: string | {} |
Alias to customize collection names. |
You can also use custom icons with this plugin, for example:
module.exports = {
plugins: [
iconsPlugin({
collections: {
foo: {
icons: {
"arrow-left": {
// svg body
body: '<path d="M10 19l-7-7m0 0l7-7m-7 7h18"/>',
// svg width and height, optional
width: 24,
height: 24,
},
},
},
},
}),
],
}Then you can use this custom icon as class name: i-foo-arrow-left.
Tip
To read custom icons from directory, you can refer to Load svgs from filesystem
The idea is from @iconify/tailwind, thanks to the author of Iconify for the great work!
If you want to install @iconify/json and use whatever icon you want,
you should add another plugin to your tailwind.config.js.
This is because we can not provide autocomplete for all icons from @iconify/json,
it will make your editor slow.
const { iconsPlugin, dynamicIconsPlugin } = require("@egoist/tailwindcss-icons")
module.exports = {
plugins: [iconsPlugin(), dynamicIconsPlugin()],
}Then you can use icons dynamically like <span class="i-[mdi-light--home]"></span>.
MIT © EGOIST
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent