{"id":21384474,"url":"https://github.com/icon-blender/postcss-icon-blender","last_synced_at":"2025-07-13T14:31:34.436Z","repository":{"id":57328083,"uuid":"362246934","full_name":"icon-blender/postcss-icon-blender","owner":"icon-blender","description":"PostCSS plugin for creating customized SVG icon collections from over 80,000 free and open-source icons","archived":false,"fork":false,"pushed_at":"2021-06-01T23:10:38.000Z","size":19,"stargazers_count":5,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-29T12:43:03.672Z","etag":null,"topics":["icon","icon-blender","postcss","postcss-plugin","svg"],"latest_commit_sha":null,"homepage":"https://icon-blender.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/icon-blender.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-04-27T20:48:40.000Z","updated_at":"2023-11-28T21:19:56.000Z","dependencies_parsed_at":"2022-09-18T17:50:54.084Z","dependency_job_id":null,"html_url":"https://github.com/icon-blender/postcss-icon-blender","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/icon-blender/postcss-icon-blender","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/icon-blender%2Fpostcss-icon-blender","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/icon-blender%2Fpostcss-icon-blender/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/icon-blender%2Fpostcss-icon-blender/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/icon-blender%2Fpostcss-icon-blender/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/icon-blender","download_url":"https://codeload.github.com/icon-blender/postcss-icon-blender/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/icon-blender%2Fpostcss-icon-blender/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265155709,"owners_count":23719567,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["icon","icon-blender","postcss","postcss-plugin","svg"],"created_at":"2024-11-22T11:41:04.142Z","updated_at":"2025-07-13T14:31:34.120Z","avatar_url":"https://github.com/icon-blender.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# PostCSS Icon Blender\n\n[PostCSS](https://github.com/postcss/postcss) plugin for creating customized SVG icon collections from over 80,000 free and open-source icons.\n\n![Test Results](https://github.com/icon-blender/postcss-icon-blender/actions/workflows/test.yml/badge.svg)\n\n## Usage\n\nBefore\n```css\n@icon fa align-left;\n```\n\nAfter\n```css\n.fa-align-left{\n\t--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');\n}\n```\n\nAdd the icon to your html anywhere using:\n```html\n\u003ci class=\"ib fa-align-left\"\u003e\u003c/i\u003e\n```\n\n**Important** don't forget to include or import [icon-blender.css](https://github.com/icon-blender/icon-blender/blob/main/css/icon-blender.css).\n\n\n## Custom Class Names\n\nWhen using the ```@icon``` rule, generated class names will take the form ```.ib-{collection_prefix}-{icon_name}```.\nIf you'd prefer alternate class names, you can use the ```@iconUrl``` rule instead.\n\n\nBefore\n```css\n.my-class-name{\n\t@iconUrl fa align-left;\n}\n```\n\nAfter\n```css\n.my-class-name{\n\t--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');\n}\n```\n\n\n## PostCSS Setup\n\n**Step 1:** Install plugin:\n\n```sh\nnpm install --save-dev postcss postcss-icon-blender\n```\n\n**Step 2:** Check you project for existed PostCSS config: `postcss.config.js`\nin the project root, `\"postcss\"` section in `package.json`\nor `postcss` in bundle config.\n\nIf you do not use PostCSS, add it according to [official docs](https://github.com/postcss/postcss#usage)\nand set this plugin in settings.\n\n**Step 3:** Add the plugin to plugins list:\n\n```diff\nmodule.exports = {\n  plugins: [\n+   require('postcss-icon-blender'),\n    require('autoprefixer')\n  ]\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ficon-blender%2Fpostcss-icon-blender","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ficon-blender%2Fpostcss-icon-blender","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ficon-blender%2Fpostcss-icon-blender/lists"}