/tailwindcss-iconify

A tailwindcss plugin for iconify

Primary LanguageTypeScriptMIT LicenseMIT

tailwindcss-iconify

Build Status Code Coverage npm-v npm-d

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
  1. 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.