tailwindcss-plugin-iconify

Use any SVG icon powered by Iconify for Tailwind CSS, easy to use local icons and figma icons in particular.

Features

• preprocessSets - support autocomplete for individual icon sets
• local-icon-sets extension - easy to load local assets
  • Support import SVG icons directory by default
  • Support import IconifyJSON path
• figma-icon-sets extension - easy to load Figma icons

About Figma icons

TailwindCSS do not support async plugin for now, so figma-icon-sets extension you can not use directly.

But this library export related node scripts:

• importFigmaIconSets to import IconSets from figma files
• writeIconifyJSONs to write corresponding JSON files and SVG icons preview HTMLs
• loadFigmaIconSets = importFigmaIconSets + writeIconifyJSONs

Important

For better git auto merge, you should ignore icons.json and icons.html for code formatting.

Icon limitations

ref: iconify.design/import/figma

Motivation

I want to use tailwind autocomplete for Iconify icon sets and support local icon sets. related issue: iconify/iconify#241

Credits

• @egoist/tailwindcss-icons
• @iconify/tailwind

Related

• unplugin-iconify - Unplugin for iconify.

Build & Publish

• npm run build
• npx changeset
• npx changeset version
• git commit
• npx changeset publish
• git push --follow-tags

changeset prerelease doc

License

MIT License © 2022 Yuns