tailwindcss-plugin-icon v0.0.3

tailwindcss-plugin-icon

Use any icon (100,000+) from Iconify, for TailwindCSS

Install

npm install tailwindcss-plugin-icon

Usage

In your tailwind.config.js:

import { getIconCollections, iconsPlugin } from 'tailwindcss-plugin-icon'

/** @type {import('tailwindcss').Config} */
module.exports = {

  plugins: [
    iconsPlugin({
      // Select the icon collections you want to use
      collections: getIconCollections(['heroicons', 'logos']),
    }),
  ],
}

You also need to install @iconify/json (full icon collections, 50MB) or @iconify-json/{collection_name} (individual icon package)

Then you can use the icons in your HTML:

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

Search the icon you want to use here: https://icones.js.org

License

MIT License © 2023 Elone Hoo