InfiniteXyy / tailwindcss-iconify

A tailwindcss plugin for iconify

tailwindcss-iconify

Tailwind CSS plugin for Iconify.

Bring @unocss/preset-icon to Tailwind CSS, based on antfu's post Icons in pure css

Why

• No need to install additional Icon libraries
• Only used icons are included, thanks to Tailwind Purge
• Easy to switch icons with CSS: i-[carbon-star] hover:i-[carbon-star-filled]

Demo

https://tailwindcss-iconify.vercel.app

Installation

1. Install this plugin

# 1. install plugin
yarn add -D tailwindcss-iconify
# 2. install your needed iconset
yarn add -D @iconify-json/carbon
#    [Optional] install all the icons (about 130MB)
yarn add -D @iconify/json

2. Add this plugin to your tailwind.config.js:

module.exports = {
  ...
  plugins: [require('tailwindcss-iconify').default()],
  ...
}

Usage

<div className="i-[carbon-star] hover:i-[carbon-star-filled]" />

If are using VSCode, and want to get a better Development Experience, you can install the Iconify IntelliSense VSCode Plugin.

TODO

• Support more configurations, like custom properties
• Support custom icon sets

Thanks

This project is greatly inspired by @unocss/preset-icon. If you want to get the fully supported iconify support in css, you can try unocss , it's a fast and small Atomic-CSS generator alternative.