💛 You can help the author become a full-time open-source maintainer by sponsoring him on GitHub.
@egoist/tailwindcss-icons
Use any icon from Iconify
![npm downloads](https://badgen.net/npm/dm/@egoist/tailwindcss-icons)
Install
npm i @egoist/tailwindcss-icons -D
Usage
In your tailwind.config.js
:
const { iconsPlugin, getIconCollections } = require("@egoist/tailwindcss-icons")
module.exports = {
plugins: [
iconsPlugin({
collections: getIconCollections(["mdi", "lucide"]),
}),
],
}
You also need to install @iconify/json
(full icon collections, 50MB) or @iconify-json/{collection_name}
(individual icon package):
npm i @iconify/json -D
npm i @iconify-json/mdi @iconify-json/lucide -D
Then you can use the icons in your HTML:
<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.
Plugin Options
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. |
Custom Icons
You can also use custom icons with this plugin, for example:
module.exports = {
plugins: [
iconsPlugin({
collections: {
foo: {
icons: {
"arrow-left": {
body: '<path d="M10 19l-7-7m0 0l7-7m-7 7h18"/>',
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
Generate Icon Dynamically
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>
.
![sponsors](https://sponsors-images.egoist.dev/sponsors.svg)
License
MIT © EGOIST