{"id":13447578,"url":"https://github.com/TrySound/postcss-inline-svg","last_synced_at":"2025-03-22T01:31:05.906Z","repository":{"id":38714777,"uuid":"45779377","full_name":"TrySound/postcss-inline-svg","owner":"TrySound","description":"PostCSS plugin to reference an SVG file and control its attributes with CSS syntax","archived":false,"fork":false,"pushed_at":"2023-07-12T22:57:22.000Z","size":303,"stargazers_count":481,"open_issues_count":16,"forks_count":39,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-10T21:49:40.864Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/TrySound.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-11-08T12:24:39.000Z","updated_at":"2025-01-30T13:05:25.000Z","dependencies_parsed_at":"2024-06-18T12:29:26.414Z","dependency_job_id":"123bc4e0-5fdb-4fd2-b397-5f0cab8f102e","html_url":"https://github.com/TrySound/postcss-inline-svg","commit_stats":{"total_commits":137,"total_committers":9,"mean_commits":"15.222222222222221","dds":"0.21167883211678828","last_synced_commit":"bfced350f7b75bac3f87f9c68cf72e9153d5fb61"},"previous_names":[],"tags_count":26,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TrySound%2Fpostcss-inline-svg","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TrySound%2Fpostcss-inline-svg/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TrySound%2Fpostcss-inline-svg/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TrySound%2Fpostcss-inline-svg/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TrySound","download_url":"https://codeload.github.com/TrySound/postcss-inline-svg/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244102831,"owners_count":20398386,"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":[],"created_at":"2024-07-31T05:01:21.535Z","updated_at":"2025-03-22T01:31:05.889Z","avatar_url":"https://github.com/TrySound.png","language":"JavaScript","readme":"# postcss-inline-svg [![CI][build-badge-img]][ci]\n\n[PostCSS] plugin to reference an SVG file and control its attributes with CSS syntax.\n\n[PostCSS]: https://github.com/postcss/postcss\n[build-badge-img]: https://github.com/TrySound/postcss-inline-svg/actions/workflows/nodejs.yml/badge.svg\n[ci]: https://github.com/TrySound/postcss-inline-svg/actions/workflows/nodejs.yml\n\n```postcss\n@svg-load nav url(img/nav.svg) {\n    fill: #cfc;\n    path:nth-child(2) {\n        fill: #ff0;\n    }\n}\n.nav {\n    background: svg-inline(nav);\n}\n.up {\n    background: svg-load('img/arrow-up.svg', fill=#000, stroke=#fff);\n}\n```\n\n```css\n.nav {\n    background: url(\"data:image/svg+xml;charset=utf-8,%3Csvg fill='%23cfc'%3E%3Cpath d='...'/%3E%3Cpath d='...' fill='%23ff0'/%3E%3Cpath d='...'/%3E%3C/svg%3E\");\n}\n.up {\n    background: url(\"data:image/svg+xml;charset=utf-8,%3Csvg fill='%23000' stroke='%23fff'%3E...%3C/svg%3E\");\n}\n```\n\nPostCSS parsers allow to use different syntax (but only one syntax in one svg-load() definition):\n\n```postcss\n.up {\n    background: svg-load('img/arrow-up.svg', fill: #000, stroke: #fff);\n}\n.down {\n    background: svg-load('img/arrow-down.svg', fill=#000, stroke=#fff);\n}\n```\n\n## Usage\n\n```js\npostcss([ require('postcss-inline-svg')(options) ])\n```\n\nSee [PostCSS] docs for examples for your environment.\n\n### Options\n\n#### options.paths\n\nArray of paths to resolve URL. Paths are tried in order, until an existing file is found.\n\nDefault: `false` - path will be relative to source file if it was specified.\n\n#### options.removeFill\n\nDefault: `false` - with `true` removes all `fill` attributes before applying specified.\nPassed RegExp filters files by ID.\n\n#### options.removeStroke\n\nDefault: `false` - with `true` removes all `stroke` attributes before applying specified.\nPassed RegExp filters files by ID.\n\n\n#### options.encode(svg)\n\nProcesses SVG after applying parameters. Default will be ommited if passed `false`.\n\nDefault:\n\n```js\nfunction encode(code) {\n    return code\n        .replace(/%/g, '%25')\n        .replace(/\u003c/g, '%3C')\n        .replace(/\u003e/g, '%3E')\n        .replace(/\u0026/g, '%26')\n        .replace(/#/g, \"%23\")\n        .replace(/{/g, \"%7B\")\n        .replace(/}/g, \"%7D\");\n}\n```\n\n#### options.transform(svg, path)\n\nTransforms SVG after `encode` function and generates URL.\n\n#### options.xmlns\n\ntype: boolean\ndefault: true\n\nAdds `xmlns` attribute to SVG if not present.\n\n\n## Frequently asked questions\n\n### Why svg-load() doesn't work and the color still black (or red or whatever)?\n\nThat's because `svg-load()` overrides attributes only in `\u003csvg\u003e` element and children inherit that color.\nBut if there is already color on children nothing will be inherited.\n\nFor example\n\n```xml\n\u003csvg\u003e\n    \u003cpath fill=\"#ff0000\" d=\"...\" /\u003e\n\u003c/svg\u003e\n```\n\nafter inline-svg (fill: #000) will looks like\n\n```xml\n\u003csvg fill=\"#000\"\u003e\n    \u003cpath fill=\"#ff0000\" d=\"...\" /\u003e\n\u003c/svg\u003e\n```\n\nThere are three solutions: to remove that attribute (preferable), to use extended `@svg-load` notation or to use removeFill option.\n\n### How to optimize svg on build step?\n\n\u003e There is a plugin. :)\n\nYou are able to add [postcss-svgo](https://github.com/cssnano/cssnano/tree/master/packages/postcss-svgo) in your PostCSS plugins list which will detect every URL which contains data SVG URI and minify via [svgo](https://github.com/svg/svgo).\n\n```js\npostcss([\n    require('postcss-inline-svg'),\n    require('postcss-svgo')\n])\n```\n\nOr if you use [cssnano](https://cssnano.co/) your SVG URLs already minified\nas cssnano includes postcss-svgo.\n\n```js\npostcss([\n    require('postcss-inline-svg'),\n    require('cssnano')\n])\n```\n\n\n# License\n\nMIT © [Bogdan Chadkin](mailto:trysound@yandex.ru)\n\n## Support on Beerpay\nHey dude! Help me out for a couple of :beers:!\n\n[![Beerpay](https://beerpay.io/TrySound/postcss-inline-svg/badge.svg?style=beer-square)](https://beerpay.io/TrySound/postcss-inline-svg)  [![Beerpay](https://beerpay.io/TrySound/postcss-inline-svg/make-wish.svg?style=flat-square)](https://beerpay.io/TrySound/postcss-inline-svg?focus=wish)\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FTrySound%2Fpostcss-inline-svg","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FTrySound%2Fpostcss-inline-svg","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FTrySound%2Fpostcss-inline-svg/lists"}