# tailwindcss-plugin-icon

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

Latest version **0.0.3** (published 2023-03-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install tailwindcss-plugin-icon
pnpm add tailwindcss-plugin-icon
yarn add tailwindcss-plugin-icon
bun add tailwindcss-plugin-icon
```

## 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 | 2023-03-10 |
| First published | 2023-03-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=14 |
| Dependencies | 1 |
| Unpacked size | 15 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Elone Hoo |
| Maintainers | elonehoo |
| Keywords | tailwindcss, plugin, icons |

## Links

- npm: https://www.npmjs.com/package/tailwindcss-plugin-icon
- Repository: https://github.com/wip-elonehoo/tailwindcss-plugin-icon
- Homepage: https://github.com/wip-elonehoo/tailwindcss-plugin-icon#readme
- Issues: https://github.com/wip-elonehoo/tailwindcss-plugin-icon/issues
- npm.io page: https://npm.io/package/tailwindcss-plugin-icon

## Dependencies (1)

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

## 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
- [stockfish](https://npm.io/package/stockfish.md) — 27.0K weekly downloads
- [@procore/core-icons](https://npm.io/package/@procore/core-icons.md) — 4.6K weekly downloads

## Recent versions

- 0.0.3 (latest) — 2023-03-10
- 0.0.2 — 2023-03-03
- 0.0.1 — 2023-03-03

## README

# tailwindcss-plugin-icon

[![NPM version](https://img.shields.io/npm/v/tailwindcss-plugin-icon?color=0ea5e9&label=)](https://www.npmjs.com/package/tailwindcss-plugin-icon)

> Use any icon (100,000+) from [Iconify](https://iconify.design/), for TailwindCSS

## Install

```bash
npm install tailwindcss-plugin-icon
```

## Usage

In your `tailwind.config.js`:

```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:

```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) License © 2023 [Elone Hoo](https://github.com/elonehoo)

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