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 (see the example app for a complete example with comments):

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

module.exports = {
  [...]
  plugins: [
    Icons(({ theme }) => ({
      heroiconsOutline: {
        icons: {
          lockOpen: {},
          lockClosed: {},
          plusCircle: {
            cursor: 'pointer',
            color: theme('colors.emerald.600'),
            '&:hover': {
              color: theme('colors.emerald.700')
            }
          },
          minusCircle: {
            cursor: 'pointer',
            color: theme('colors.red.600'),
            '&:hover': {
              color: theme('colors.red.700')
            },
            '.dark &': {
              color: theme('colors.red.400')
            }
          },
          'trash?bg': {}
        },
        scale: 1.5
        location: 'https://example.com/icons.json'
      }
    }))
  ]
}

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

<div class="i-heroicons-outline-plus-circle"></div>

Example