# postcss-icon-blender

> PostCSS plugin for creating customized SVG icon collections from over 80,000 free and open-source icons

Latest version **1.0.0-Beta.3** (published 2021-06-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install postcss-icon-blender
pnpm add postcss-icon-blender
yarn add postcss-icon-blender
bun add postcss-icon-blender
```

## 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.0-Beta.3 |
| Published | 2021-06-01 |
| First published | 2021-05-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=10.0.0 |
| Dependencies | 3 |
| Unpacked size | 247.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | Josh Schmidt |
| Maintainers | oyejorge |
| Keywords | postcss, css, postcss-plugin, svg, icon, fontawesome |

## Links

- npm: https://www.npmjs.com/package/postcss-icon-blender
- Repository: https://github.com/icon-blender/postcss-icon-blender
- Homepage: https://icon-blender.com
- Issues: https://github.com/icon-blender/postcss-icon-blender/issues
- npm.io page: https://npm.io/package/postcss-icon-blender

## Dependencies (3)

- [icon-blender](https://npm.io/package/icon-blender.md) ^1.0.0-beta.3
- [@iconify/json](https://npm.io/package/@iconify/json.md) ^1.1.334
- [@iconify/json-tools](https://npm.io/package/@iconify/json-tools.md) ^1.0.10

## 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

- 1.0.0-Beta.3 (latest) — 2021-06-01
- 1.0.0-Beta.2 — 2021-05-03
- 1.0.0-beta.1 — 2021-05-01

## README

# PostCSS Icon Blender

[PostCSS](https://github.com/postcss/postcss) plugin for creating customized SVG icon collections from over 80,000 free and open-source icons.

![Test Results](https://github.com/icon-blender/postcss-icon-blender/actions/workflows/test.yml/badge.svg)

## Usage

Before
```css
@icon fa align-left;
```

After
```css
.fa-align-left{
	--url: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1792 1408"%3e%3cpath d="M1792 1216v128q0 26-19 45t-45 19H64q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1664q26 0 45 19t19 45zm-384-384v128q0 26-19 45t-45 19H64q-26 0-45-19T0 960V832q0-26 19-45t45-19h1280q26 0 45 19t19 45zm256-384v128q0 26-19 45t-45 19H64q-26 0-45-19T0 576V448q0-26 19-45t45-19h1536q26 0 45 19t19 45zM1280 64v128q0 26-19 45t-45 19H64q-26 0-45-19T0 192V64q0-26 19-45T64 0h1152q26 0 45 19t19 45z" fill="currentColor"/%3e%3c/svg%3e');
}
```

Add the icon to your html anywhere using:
```html
<i class="ib fa-align-left"></i>
```

**Important** don't forget to include or import [icon-blender.css](https://github.com/icon-blender/icon-blender/blob/main/css/icon-blender.css).


## Custom Class Names

When using the ```@icon``` rule, generated class names will take the form ```.ib-{collection_prefix}-{icon_name}```.
If you'd prefer alternate class names, you can use the ```@iconUrl``` rule instead.


Before
```css
.my-class-name{
	@iconUrl fa align-left;
}
```

After
```css
.my-class-name{
	--url: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1792 1408"%3e%3cpath d="M1792 1216v128q0 26-19 45t-45 19H64q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1664q26 0 45 19t19 45zm-384-384v128q0 26-19 45t-45 19H64q-26 0-45-19T0 960V832q0-26 19-45t45-19h1280q26 0 45 19t19 45zm256-384v128q0 26-19 45t-45 19H64q-26 0-45-19T0 576V448q0-26 19-45t45-19h1536q26 0 45 19t19 45zM1280 64v128q0 26-19 45t-45 19H64q-26 0-45-19T0 192V64q0-26 19-45T64 0h1152q26 0 45 19t19 45z" fill="currentColor"/%3e%3c/svg%3e');
}
```


## PostCSS Setup

**Step 1:** Install plugin:

```sh
npm install --save-dev postcss postcss-icon-blender
```

**Step 2:** Check you project for existed PostCSS config: `postcss.config.js`
in the project root, `"postcss"` section in `package.json`
or `postcss` in bundle config.

If you do not use PostCSS, add it according to [official docs](https://github.com/postcss/postcss#usage)
and set this plugin in settings.

**Step 3:** Add the plugin to plugins list:

```diff
module.exports = {
  plugins: [
+   require('postcss-icon-blender'),
    require('autoprefixer')
  ]
}
```

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