@egoist/tailwindcss-icons

Install

npm i @egoist/tailwindcss-icons -D

Usage

@plugin'@egoist/tailwindcss-icons';/* pass options to the plugin */@plugin'@egoist/tailwindcss-icons' {scale:1.5;}

@config"path/to/your/tailwind.config.ts";

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.}),],}

# install every icon:npm i @iconify/json -D# or install individual packages like this:npm i @iconify-json/mdi @iconify-json/lucide -D

<!-- pattern: i-{collection_name}-{icon_name} --><spanclass="i-mdi-home"></span>

Tip

To get the full list of icon names as typescript type, you can refer tothis issue.

Plugin Options

Custom Icons

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,},},},},}),],}

Tip

To read custom icons from directory, you can refer toLoad svgs from filesystem

Generate Icon Dynamically

const{ iconsPlugin, dynamicIconsPlugin}=require("@egoist/tailwindcss-icons")module.exports={plugins:[iconsPlugin(),dynamicIconsPlugin()],}

Sponsors

License