Skip to content

JensDll/tailwindcss-plugin-icons

Repository files navigation

tailwindcss-plugin-icons

npm socket_security license

Tailwind CSS implementation of @unocss/preset-icons. See comprehensive example at playground/vue.

npm install tailwindcss-plugin-icons
pnpm add tailwindcss-plugin-icons
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 any required icon set with npm install @iconify-json/[the-icon-set-name].

  3. Configure the plugin in your tailwind.config file, for example, heroicons:

    import type { Config } from 'tailwindcss'
    import { Icons, type Options } from 'tailwindcss-plugin-icons'
    
    const options: Options = ({ theme }) => ({
      heroicons: {
        icons: {
          'plus-circle': {
            cursor: 'pointer',
            color: theme('colors.emerald.600'),
            '&:hover': {
              color: theme('colors.emerald.800'),
            },
          },
          'trash?bg': {},
        },
        includeAll: true,
        scale: iconName => (iconName.endsWith('-20-solid') ? 1.25 : 1.5),
        location: 'https://esm.sh/@iconify-json/heroicons@1.1.9/icons.json',
      },
    })
    
    export default {
      plugins: [Icons(options)],
    } as Config

    The plugin's options are a function. It gets forwarded the Tailwind CSS plugin API and returns the selected icons with optional default style and scale. After the icon's name, you can pass ?bg or ?mask to force a specific render method. Finally, you can use includeAll: true to have every icon in the icon set added as a Tailwind source.

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

    <div class="i-heroicons-plus-circle"></div>
    <div class="bg-heroicons-trash-black"></div>