tailwindcss-plugin-icons

tailwindcss-plugin-icons

Tailwind CSS port of @unocss/preset-icons.

# Npm
npm install tailwindcss-plugin-icons
# Pnpm
pnpm add tailwindcss-plugin-icons
# Yarn
yarn add tailwindcss-plugin-icons

How to use

1. Search the available icon sets at Icônes or Iconify and choose the icons your project needs
2. Install the icon sets with npm install @iconify-json/[the-collection-you-want]. For example heroicons npm install @iconify-json/heroicons-outline @iconify-json/heroicons-solid
3. Configure the plugin in your tailwind.config.js:

const { Icons } = require('tailwindcss-plugin-icons')

module.exports = {
  [...]
  plugins: [
    Icons({
      heroiconsSolid: {
        // By default it will search for icons in common iconify module locations
        icons: ['trash', 'trash?bg']
      },
      heroiconsOutline: {
        icons: ['lock-open', 'lock-closed'],
        // You can pass other modules too
        location: 'my-icon-alias/icons.json'
      },
      custom: {
        icons: ['loading'],
        // It can be a URI. Fetched resources will be cached to the file system
        location:
          'https://gist.githubusercontent.com/JensDll/4e59cf6005f585581975941a94bc1d88/raw/0e70bdac81224add27d8f0576ab15406709e5938/icons.json'
      },
      customAlt: {
        icons: ['loading'],
        // It can be a relative or absolute path
        location: './src/icons.json'
      }
    })
  ]
}

After the icon's name, you can pass ?mask or ?bg to force a specific render method. Only use ?mask on colored and ?bg on colorless icons. Otherwise, there is no difference from the default.

1. Write icons with Tailwind CSS classes directly in your markup:

<div class="i-heroicons-solid-trash h-5 w-5"></div>

Example