# tailwindcss-iconify

> A tailwindcss plugin for iconify

Latest version **0.0.3** (published 2022-05-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install tailwindcss-iconify
pnpm add tailwindcss-iconify
yarn add tailwindcss-iconify
bun add tailwindcss-iconify
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.3 |
| Published | 2022-05-03 |
| First published | 2022-05-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 12.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Yiyang Xu |
| Maintainers | infinitex |
| Keywords | tailwindcss, iconify, icon, tailwindcss-plugin |

## Links

- npm: https://www.npmjs.com/package/tailwindcss-iconify
- Repository: https://github.com/InfiniteXyy/tailwindcss-iconify
- Issues: https://github.com/InfiniteXyy/tailwindcss-iconify/issues
- npm.io page: https://npm.io/package/tailwindcss-iconify

## Dependencies (1)

- [@iconify/utils](https://npm.io/package/@iconify/utils.md) ^1.0.32

## Alternatives

- [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) — 2.2M weekly downloads
- [roboto-fontface](https://npm.io/package/roboto-fontface.md) — 196.0K weekly downloads
- [@react-native-vector-icons/common](https://npm.io/package/@react-native-vector-icons/common.md) — 150.4K weekly downloads
- [@procore/core-icons](https://npm.io/package/@procore/core-icons.md) — 4.6K weekly downloads
- [@react-md/material-icons](https://npm.io/package/@react-md/material-icons.md) — 1.6K weekly downloads

## Recent versions

- 0.0.3 (latest) — 2022-05-03
- 0.0.2 — 2022-05-02
- 0.0.1 — 2022-05-02

## README

# tailwindcss-iconify

<a href="https://github.com/infinitexyy/tailwindcss-iconify/actions"><img src="https://img.shields.io/github/workflow/status/infinitexyy/tailwindcss-iconify/test.svg" alt="Build Status"></a>
<a href="https://codecov.io/gh/infinitexyy/tailwindcss-iconify"><img src="https://img.shields.io/codecov/c/github/infinitexyy/tailwindcss-iconify.svg" alt="Code Coverage"></a>
<a href="https://npmjs.com/package/tailwindcss-iconify"><img src="https://img.shields.io/npm/v/tailwindcss-iconify.svg" alt="npm-v"></a>
<a href="https://npmjs.com/package/tailwindcss-iconify"><img src="https://img.shields.io/npm/dt/tailwindcss-iconify.svg" alt="npm-d"></a>

Tailwindcss plugin for iconify

A Copy of [@unocss/preset-icon](https://github.com/unocss/unocss/blob/main/packages/preset-icons/README.md) in tailwind world, based on antfu's post [Icons in pure css](https://antfu.me/posts/icons-in-pure-css)

## Demo

https://tailwindcss-iconify.vercel.app

## Installation

```bash
# install plugin
yarn add -D tailwindcss-iconify

# install your iconset
yarn add -D @iconify-json/carbon
# [Optional] Or install them all(about 130MB)
yarn add -D @iconify/json
```

## Usage

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

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

Use icon within the component class

```tsx
<div className="i-[carbon-logo-github]" />
```

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

### TODO

- [ ] Support more configurations as @unocss/preset-icon
- [ ] Support custom icon sets

### Thanks

This project is simple and nearly the same as @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.

---
_Source: https://npm.io/package/tailwindcss-iconify · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._