Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/icon-blender/postcss-icon-blender
PostCSS plugin for creating customized SVG icon collections from over 80,000 free and open-source icons
https://github.com/icon-blender/postcss-icon-blender
icon icon-blender postcss postcss-plugin svg
Last synced: about 1 month ago
JSON representation
PostCSS plugin for creating customized SVG icon collections from over 80,000 free and open-source icons
- Host: GitHub
- URL: https://github.com/icon-blender/postcss-icon-blender
- Owner: icon-blender
- License: mit
- Created: 2021-04-27T20:48:40.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2021-06-01T23:10:38.000Z (over 3 years ago)
- Last Synced: 2024-10-06T20:17:52.678Z (3 months ago)
- Topics: icon, icon-blender, postcss, postcss-plugin, svg
- Language: JavaScript
- Homepage: https://icon-blender.com
- Size: 18.6 KB
- Stars: 5
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
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.
## 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
```
**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')
]
}
```