💛 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
In your tailwind.config.js
:
const { iconsPlugin, getIconCollections } = require("@egoist/tailwindcss-icons")
module.exports = {
plugins: [
iconsPlugin({
// Select the icon collections you want to use
collections: getIconCollections(["mdi", "lucide"]),
}),
],
}
You also need to install @iconify/json
(full icon collections, 50MB) or @iconify-json/{collection_name}
(individual icon package)
Then 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
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
.
MIT © EGOIST