- Notifications
You must be signed in to change notification settings - Fork19
Use any icon (100,000+) from Iconify, for TailwindCSS
License
egoist/tailwindcss-icons
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
💛 You can help the author become a full-time open-source maintainer bysponsoring him on GitHub.
Use any icon fromIconify
npm i @egoist/tailwindcss-icons -D
With TailwindCSS v4 css config:
@plugin'@egoist/tailwindcss-icons';/* pass options to the plugin */@plugin'@egoist/tailwindcss-icons' {scale:1.5;}
With js config:
@config"path/to/your/tailwind.config.ts";
In yourtailwind.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 -D
Then you can use the icons in your HTML:
<!-- pattern: i-{collection_name}-{icon_name} --><spanclass="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 tothis 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 bodybody:'<path d="M10 19l-7-7m0 0l7-7m-7 7h18"/>',// svg width and height, optionalwidth: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 toLoad 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 yourtailwind.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></span>.
MIT ©EGOIST
About
Use any icon (100,000+) from Iconify, for TailwindCSS