# tailwindcss-svg-icon-color

> Tailwind CSS plugin for coloring icons.

Latest version **1.0.8** (published 2024-04-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install tailwindcss-svg-icon-color
pnpm add tailwindcss-svg-icon-color
yarn add tailwindcss-svg-icon-color
bun add tailwindcss-svg-icon-color
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.8 |
| Published | 2024-04-17 |
| First published | 2023-11-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 3.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Kevin Lobine |
| Maintainers | tiersept |

## Links

- npm: https://www.npmjs.com/package/tailwindcss-svg-icon-color
- Repository: https://github.com/tiersept/tailwindcss-svg-icon-color
- Homepage: https://github.com/tiersept/tailwindcss-svg-icon-color#readme
- Issues: https://github.com/tiersept/tailwindcss-svg-icon-color/issues
- npm.io page: https://npm.io/package/tailwindcss-svg-icon-color

## Recent versions

- 1.0.8 (latest) — 2024-04-17
- 1.0.7 — 2024-04-17
- 1.0.6 — 2024-02-08
- 1.0.5 — 2024-02-08
- 1.0.4 — 2023-11-01
- 1.0.3 — 2023-11-01
- 1.0.2 — 2023-11-01
- 1.0.1 — 2023-11-01
- 1.0.0 — 2023-11-01

## README

# tailwindcss-svg-icon-color

<a href="https://www.npmjs.com/package/tailwindcss-svg-icon-color"><img src="https://badgen.net/npm/v/tailwindcss-svg-icon-color" alt="Version"></a>
<a href="https://www.npmjs.com/package/tailwindcss-svg-icon-color"><img src="https://badgen.net/npm/dm/tailwindcss-svg-icon-color" alt="Downloads"></a>

A plugin that adds the `icon-color-...` utility class to your arsenal of classes to use on svg's.
Assuming the icon's are designed and exported to only obtain their colors from the fill property set on the path.

## Installation

To install the package, run

    npm install tailwindcss-svg-icon-color --save-dev

    yarn add -D tailwindcss-svg-icon-color

## Config

In your `tailwind.config.js` file, import the plugin as follows.

```javascript
const svgIconColor = require("tailwindcss-svg-icon-color");

module.exports = {
  plugins: [svgIconColor],
};
```

## Example usage

The class targets the `path` property in the svg and adds a fill color from the theme file.

```javascript
<IconArrowRight className="icon-color-yellow-400 hover:icon-color-yellow-200 [&>path]:transition-all [&>path]:duration-300" />
```

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