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 will search in common iconify module locations
        icons: ['trash', 'trash?bg']
      },
      heroiconsOutline: {
        icons: ['lock-open', 'lock-closed'],
        // Can be some other module too
        location: 'my-icon-alias/icons.json'
      },
      custom: {
        icons: ['loading'],
        // Can be a URI
        location:
          'https://gist.githubusercontent.com/JensDll/4e59cf6005f585581975941a94bc1d88/raw/6cdeb3cb9dacd47fd132d49004a2e8f4cbc0774f/icons.json'
      },
      customAlt: {
        icons: ['loading'],
        // Can be a relative or absolute path
        location: './src/icons.json'
      }
    })
  ]
}

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

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

Example