{"id":16494837,"url":"https://github.com/stipsan/postcss-import-svg","last_synced_at":"2025-09-29T08:31:10.423Z","repository":{"id":37026126,"uuid":"315410321","full_name":"stipsan/postcss-import-svg","owner":"stipsan","description":null,"archived":false,"fork":false,"pushed_at":"2024-05-09T11:31:38.000Z","size":326,"stargazers_count":2,"open_issues_count":23,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-11T09:11:37.622Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/stipsan.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":"2020-11-23T18:50:11.000Z","updated_at":"2023-03-04T05:53:28.000Z","dependencies_parsed_at":"2023-01-20T10:43:04.552Z","dependency_job_id":"800bb69b-b660-4923-8061-28584d89f86c","html_url":"https://github.com/stipsan/postcss-import-svg","commit_stats":{"total_commits":35,"total_committers":6,"mean_commits":5.833333333333333,"dds":0.5714285714285714,"last_synced_commit":"da0e972c98444c977e9c5d00778b589bbdc40854"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stipsan%2Fpostcss-import-svg","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stipsan%2Fpostcss-import-svg/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stipsan%2Fpostcss-import-svg/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stipsan%2Fpostcss-import-svg/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stipsan","download_url":"https://codeload.github.com/stipsan/postcss-import-svg/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234600974,"owners_count":18858546,"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-10-11T14:15:52.811Z","updated_at":"2025-09-29T08:31:05.092Z","avatar_url":"https://github.com/stipsan.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# postcss-import-svg\n\n[PostCSS] plugin to reference an SVG file and inline it, optionally update currentColor references.\nA fork of [postcss-inline-svg](https://github.com/TrySound/postcss-inline-svg/pull/76) to support replacing `currentColor`.\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-import-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#### 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## 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([require(\"postcss-import-svg\"), require(\"postcss-svgo\")]);\n```\n\nOr if you use [cssnano](https://cssnano.co/) your SVG URLs already minified\nas cssnano includes postcss-svgo.\n\n```js\npostcss([require(\"postcss-import-svg\"), require(\"cssnano\")]);\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstipsan%2Fpostcss-import-svg","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstipsan%2Fpostcss-import-svg","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstipsan%2Fpostcss-import-svg/lists"}