{"_id":"@andreyvolokitin/postcss-inline-svg","_rev":"2-52ed2ce5bd3a13d18bac8967616fbac1","name":"@andreyvolokitin/postcss-inline-svg","dist-tags":{"latest":"5.0.1"},"versions":{"5.0.0":{"name":"@andreyvolokitin/postcss-inline-svg","version":"5.0.0","description":"PostCSS plugin to reference an SVG file and control its attributes with CSS syntax","keywords":["postcss","css","postcss-plugin","svg","inline"],"main":"lib/index.js","scripts":{"test":"jest"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.js":["prettier --write","git add"]},"author":{"name":"Bogdan Chadkin","email":"trysound@yandex.ru"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/TrySound/postcss-inline-svg.git"},"bugs":{"url":"https://github.com/TrySound/postcss-inline-svg/issues"},"homepage":"https://github.com/TrySound/postcss-inline-svg","dependencies":{"css-select":"^3.1.0","dom-serializer":"^1.1.0","htmlparser2":"^5.0.1","postcss-value-parser":"^4.0.0"},"peerDependencies":{"postcss":"^8.1.4"},"devDependencies":{"husky":"^4.3.0","jest":"^26.6.1","lint-staged":"^10.5.0","postcss":"^8.1.4","prettier":"^2.1.2"},"gitHead":"de7fdabd9382e65d79f405cd6412a6ee6cec5b2d","_id":"@andreyvolokitin/postcss-inline-svg@5.0.0","_nodeVersion":"16.3.0","_npmVersion":"7.20.1","dist":{"integrity":"sha512-1MWXa2WL8PGiCEt4Tuiuav7nVbTzxcXn9U8IeXFu/+0l63ziV+xk9tHiYPcsLfHOR55rJyV/gAbEmRJXcbmnFw==","shasum":"84ffdbd80d6afdaa86f810d70715dfc0e435827a","tarball":"https://registry.npmjs.org/@andreyvolokitin/postcss-inline-svg/-/postcss-inline-svg-5.0.0.tgz","fileCount":11,"unpackedSize":17892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/bUrCRA9TVsSAnZWagAAkikP/RvV40KtvE1tREEtNAsv\nx2JKORu/ybSPIlPT1lZIP5KNofeCA4Qk+L9TkqBr2vOVduvR9QHPRCS109gj\nSjXflvPTZx2uw1e4mHjYnJgJ2+K9eNBbBTgxfpyCFcJIskT9P+vVpHLclyj8\nBQH3kZjAgtkImQC2M8Wxtz072fSbjLvwW9sTYwfUePZ972C/hHA+0dQPF6OJ\nal3WJL3/grnDMcAJhXC3bYC9WOW7DUkl3DHMTpuWyX8Ab9FQ7fD1TInME1GH\nfRuTbspq+9w+tXgVsoeOJQSp2x6uHQvnfUzBokKHZ051ZimZkxWQg5ITBi6t\ntU100GNKJ3cwiejpXRkq4GUPN8Mx0UUQiK/fk7RsegFD7gVMa2LRcB3HWXF/\ncDHTAN2pIWrLUmJ7hGuVvyuF7EAcUgZAOOQTFhKqM4QwwI+zQRU6Z9LzwgUv\nTV9j9LRbhxgubwEWKF6AaNP8sR9cwVK/acmc/7Z4ogDo3FLMckY6RaXgaS0D\nbt8ExLBRaJPdl2b/2vDhSbqZMkdq46AWY+ryDHRwa9TddteYHTCRmVZ1eqEB\nKqyyqH7W5NZKN9sjgQa9qAJxDsQRUFRf3MqlrEQCrj6HQTf+40Uk0x2CyjJR\nS/z/xWIb5ktFceMlacUAM2c1RwFdHDl9yZfmKMATxLe9t9sVXz7oZeTmZ2YP\nc6gc\r\n=2TnX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB+Y7Lr2a0d8Xc+RV95MrAm9eA2+KWjB0HPxYh+3DlvZAiAMameVWwNq7dBN/MYX9vdhEpN4swhWzIkkgxkpfe8WZQ=="}]},"_npmUser":{"name":"andreyvlktn","email":"andreyvlktn@gmail.com"},"directories":{},"maintainers":[{"name":"andreyvlktn","email":"andreyvlktn@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/postcss-inline-svg_5.0.0_1627239723749_0.8151821397545429"},"_hasShrinkwrap":false},"5.0.1":{"name":"@andreyvolokitin/postcss-inline-svg","version":"5.0.1","description":"PostCSS plugin to reference an SVG file and control its attributes with CSS syntax","keywords":["postcss","css","postcss-plugin","svg","inline"],"main":"lib/index.js","scripts":{"test":"jest"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.js":["prettier --write","git add"]},"author":{"name":"Bogdan Chadkin","email":"trysound@yandex.ru"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/TrySound/postcss-inline-svg.git"},"bugs":{"url":"https://github.com/TrySound/postcss-inline-svg/issues"},"homepage":"https://github.com/TrySound/postcss-inline-svg","dependencies":{"css-select":"^4.1.3","dom-serializer":"^1.1.0","htmlparser2":"^5.0.1","postcss-value-parser":"^4.0.0"},"peerDependencies":{"postcss":"^8.1.4"},"devDependencies":{"husky":"^4.3.0","jest":"^26.6.1","lint-staged":"^10.5.0","postcss":"^8.1.4","prettier":"^2.1.2"},"gitHead":"baa8053e551f96c4f6a3b0afee08fb1cead04a2d","_id":"@andreyvolokitin/postcss-inline-svg@5.0.1","_nodeVersion":"16.3.0","_npmVersion":"7.20.1","dist":{"integrity":"sha512-Zj/ptkMldvV8HQkIDTMf8iqWVcBfa2j7mt9okTCLwUEeRmY50qJOVOgBRgPcTKhq+vok8u+ATGzNaAzn5K9e6w==","shasum":"018d0f104c63d4532df9df1cc0ec3e6e13875ed4","tarball":"https://registry.npmjs.org/@andreyvolokitin/postcss-inline-svg/-/postcss-inline-svg-5.0.1.tgz","fileCount":11,"unpackedSize":17892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/bcnCRA9TVsSAnZWagAAJFkP/1Xn6UFFUFf6WhjZ4x7h\nNU3742APu3JBUXAhm33TPdQLle/qLBA+87DessW2+UyPi4Is4jlzYZBaiyNa\n5Qkv9QeCPnhOZgsSksra4NwBhEojtMJ7/UqSoF6pwtlq8+G83kapSCyeB5uz\n3uoUkUicrIx/vE1I14UKGDd+JBdKmBqYrWSeS7HMa606XWtlq2q47BjCN8Gd\n7DUKsnC8C7cjE7xrOme3X1I6ObGmDb1eMUo8MMcv46yGF8FMarVfOI9UANZh\nviPIQqloBtqSkMYR57i9efZgNymIh3jYNPq3U6gVhRnpq4R2XJRzhr9i3h5w\nG47WGF9TeAgROSujvsTw2w/YrfXSxWrQP0BXVNl3piwX9GIzyVzLdXz2lmT9\nUWbE0+5PiJZpYt+coKEESeCDnAz+e6f+uKKpkzu2kvZVzAv6E0ArbqpYbpAA\ngypH9Klp+DQ1SsLdJE2C7uq3Za2OcvX8obVLsnfVBYXQ/xE7rr9Ft6KRtCYu\nLe5WSrut9fpWbuyPK0nBmQbc/+ESmU8yz8rTSp4ert7NCP91WnQN9KHzK/qc\nJrx7vm/5wI6BxmT15zdQWlYEU8kC1MvbR7OAaxuPleoIv6VgBNctEd/V+WZ+\n+v6M2d6l2Npxz0ruveNwb4SFKy8d+INGrG0cfQuLTAlR13TK6/bnYS7Hm1vC\nbtGa\r\n=67VK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCDsozQtZTDC9wXVD8AHGfbzg3g/S2tyYhvnmtQyGjtIAIgOB1wnZ+nyYwyPIeEko9aO7rZ6A4C6E5Ra2nANaNcev8="}]},"_npmUser":{"name":"andreyvlktn","email":"andreyvlktn@gmail.com"},"directories":{},"maintainers":[{"name":"andreyvlktn","email":"andreyvlktn@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/postcss-inline-svg_5.0.1_1627240230946_0.9300740632883269"},"_hasShrinkwrap":false}},"time":{"created":"2021-07-25T19:02:03.676Z","5.0.0":"2021-07-25T19:02:03.906Z","modified":"2022-04-04T14:02:19.716Z","5.0.1":"2021-07-25T19:10:31.097Z"},"maintainers":[{"name":"andreyvlktn","email":"andreyvlktn@gmail.com"}],"description":"PostCSS plugin to reference an SVG file and control its attributes with CSS syntax","homepage":"https://github.com/TrySound/postcss-inline-svg","keywords":["postcss","css","postcss-plugin","svg","inline"],"repository":{"type":"git","url":"git+https://github.com/TrySound/postcss-inline-svg.git"},"author":{"name":"Bogdan Chadkin","email":"trysound@yandex.ru"},"bugs":{"url":"https://github.com/TrySound/postcss-inline-svg/issues"},"license":"MIT","readme":"# postcss-inline-svg [![Build Status][travis-img]][travis]\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[travis-img]: https://travis-ci.org/TrySound/postcss-inline-svg.svg\n[travis]: https://travis-ci.org/TrySound/postcss-inline-svg\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(/</g, '%3C')\n        .replace(/>/g, '%3E')\n        .replace(/&/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 `<svg>` 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<svg>\n    <path fill=\"#ff0000\" d=\"...\" />\n</svg>\n```\n\nafter inline-svg (fill: #000) will looks like\n\n```xml\n<svg fill=\"#000\">\n    <path fill=\"#ff0000\" d=\"...\" />\n</svg>\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> 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","readmeFilename":"README.md"}