{"_id":"@dmytrohusiev/babel-plugin-optimize-inline-svg","_rev":"1-60d61f46eeb1c15a71cc9eaf199e921e","name":"@dmytrohusiev/babel-plugin-optimize-inline-svg","dist-tags":{"latest":"1.2.0"},"versions":{"1.2.0":{"name":"@dmytrohusiev/babel-plugin-optimize-inline-svg","version":"1.2.0","description":"A babel plugin that optimizes and inlines SVGs for your react components.","main":"lib/index.js","scripts":{"test":"yarn run tests-only","pretests-only":"yarn run build","tests-only":"babel-node test/sanity.js","build":"babel src --out-dir lib","lint":"eslint src/","prepublish":"yarn run build","pretest":"yarn run lint --fix"},"repository":{"type":"git","url":"git+https://github.com/dmytrohusiev/babel-plugin-optimize-inline-svg.git"},"keywords":["babel","plugin","react","svg","inline"],"author":{"name":"Jordan Gensler","email":"jordan.gensler@airbnb.com"},"contributors":[{"name":"Dmytro Husiev","email":"husiev.dmytro07@gmail.com"}],"license":"MIT","bugs":{"url":"https://github.com/dmytrohusiev/babel-plugin-optimize-inline-svg/issues"},"homepage":"https://github.com/dmytrohusiev/babel-plugin-optimize-inline-svg#readme","devDependencies":{"@babel/cli":"^7.4.3","@babel/core":"^7.0.0","@babel/node":"^7.2.2","@babel/preset-react":"^7.0.0","babel-preset-airbnb":"^5.0.0","eslint":"^7.10.0","eslint-config-airbnb":"^18.2.0","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.1","eslint-plugin-react":"^7.12.4","react":"^16.13.1"},"peerDependencies":{"@babel/core":"^7.0.0"},"dependencies":{"@babel/helper-plugin-utils":"^7.0.0","@babel/parser":"^7.0.0","lodash.isplainobject":"^4.0.6","resolve":"^1.10.0","svgo":"^1.3.2"},"directories":{"lib":"lib","test":"test"},"gitHead":"907d00e2f2de5c12a8675e0162da0c0013fbe7bf","_id":"@dmytrohusiev/babel-plugin-optimize-inline-svg@1.2.0","_nodeVersion":"12.13.1","_npmVersion":"6.12.1","dist":{"integrity":"sha512-4LZ2mlYYnZ3vLzp/LntqFEGXMv+K1T4qFI3UYxHze1m1lrE01TNPTb1VlK/a1mIewBbZZRgUXfVVee6j66v+hg==","shasum":"2361c9ace34bcf65817d40210510073475af1bce","tarball":"https://registry.npmjs.org/@dmytrohusiev/babel-plugin-optimize-inline-svg/-/babel-plugin-optimize-inline-svg-1.2.0.tgz","fileCount":28,"unpackedSize":30880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdHx6CRA9TVsSAnZWagAADogP/23Z5/yiXL8BZYTfADsj\n0aEuzcBOZVX+xI6b4DkC0leuzmIW/SrGzbdDhaNuVTISGX6x58IB4OOY110n\nNibIOa5MdFlVVwD3MDQaYvFYJRcgrLt8lt+F3Lp+/36jWd05BXoTw8ewvUqa\nqhlXN9tdIgVCcopzq07lMjWddTuXkXRRVr+G1Ni0U4aWR5WEkOjJEVyA/0GI\ndvJbu/+e0ZiPRma7LO1mAwWDUzwXGgAULITBtINVYYZiRtk+ath13iySbH22\nqdmTofpHBhq3EbHWHTcf8xTeSvYwcSJIM60dXQBzGw3DpCD3pZ4FghzKVK/Z\nmaVkA37oZMlslGWOZZi9CNdUISluWg/TUheFG2xpNirxXs8LLn2gUc5UOzKq\nJRyf0rGZGnicDzjiTUg5k/taaLlZfviFJSHAOeA22GQrQDT8KTeVVp8EYoC2\nbwJRTOCxD9d5dV32gRvP1CfASGp6hsMUysDm9XVt7S1OLG06ePepUwQYrqVC\nOdTHXutkKl/gvNbK4pcstYfo7kWe85IelK3GtIjjP0qxutbqpohWztuVdThI\nJ4YPVHmeyDb2niAgkNntjn3VEn5QWEvXsgBpD6juS4IqhZkH0HYagRiT+E6W\nCJPn18LzAk9pS6NW2g+USKUkhAhoQmjQOUjJ70ZUmSZDJDM4dDmwE7p9uJ2i\n8vxh\r\n=HWCR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC8jZGBAm4dI1ltQlrvfMfCkYnsafyhGYrfnb1igdJlMwIhAO8dnwcGOKYWkC2uU2wBjpY3Poffd2yqXHgohXtrMEBb"}]},"maintainers":[{"name":"dmytrohusiev","email":"husiev.dmytro07@gmail.com"}],"_npmUser":{"name":"dmytrohusiev","email":"husiev.dmytro07@gmail.com"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/babel-plugin-optimize-inline-svg_1.2.0_1601469562487_0.8898419755182321"},"_hasShrinkwrap":false}},"time":{"created":"2020-09-30T12:39:22.455Z","1.2.0":"2020-09-30T12:39:22.628Z","modified":"2022-04-05T05:00:46.391Z"},"maintainers":[{"name":"dmytrohusiev","email":"husiev.dmytro07@gmail.com"}],"description":"A babel plugin that optimizes and inlines SVGs for your react components.","homepage":"https://github.com/dmytrohusiev/babel-plugin-optimize-inline-svg#readme","keywords":["babel","plugin","react","svg","inline"],"repository":{"type":"git","url":"git+https://github.com/dmytrohusiev/babel-plugin-optimize-inline-svg.git"},"contributors":[{"name":"Dmytro Husiev","email":"husiev.dmytro07@gmail.com"}],"author":{"name":"Jordan Gensler","email":"jordan.gensler@airbnb.com"},"bugs":{"url":"https://github.com/dmytrohusiev/babel-plugin-optimize-inline-svg/issues"},"license":"MIT","readme":"# babel-plugin-optimize-inline-svg\r\n\r\nTransforms imports to SVG files into React Components, and optimizes the SVGs with [SVGO](https://github.com/svg/svgo/).\r\n\r\nFor example, the following code...\r\n\r\n```jsx\r\nimport React from 'react';\r\nimport CloseSVG from './close.svg';\r\n\r\nconst MyComponent = () => <CloseSVG />;\r\n```\r\n\r\nwill be transformed into...\r\n\r\n```jsx\r\nimport React from 'react';\r\nconst CloseSVG = () => <svg>{/* ... */}</svg>;\r\n\r\nconst MyComponent = () => <CloseSVG />;\r\n```\r\n\r\n## Installation\r\n\r\n```\r\nnpm install --save-dev @dmytrohusiev/babel-plugin-optimize-inline-svg\r\n```\r\n\r\n## Usage\r\n\r\n### Via `.babelrc` (Recommended)\r\n\r\n**.babelrc**\r\n\r\n```json\r\n{\r\n  \"plugins\": [\r\n    \"optimize-inline-svg\"\r\n  ]\r\n}\r\n```\r\n\r\n#### Options\r\n\r\n- *`ignorePattern`* - A pattern that imports will be tested against to selectively ignore imports.\r\n- *`caseSensitive`* - A boolean value that if true will require file paths to match with case-sensitivity. Useful to ensure consistent behavior if working on both a case-sensitive operating system like Linux and a case-insensitive one like OS X or Windows.\r\n- *`svgo`* - svgo options (`false` to disable). Example:\r\n```json\r\n{\r\n  \"plugins\": [\r\n    [\r\n      \"optimize-inline-svg\",\r\n      {\r\n        \"svgo\": {\r\n          \"plugins\": [\r\n            {\r\n              \"removeAttrs\": { \"attrs\": \"(data-name)\" }\r\n            },\r\n            {\r\n              \"cleanupIDs\": true\r\n            }\r\n          ]\r\n\r\n        }\r\n      }\r\n    ]\r\n  ]\r\n}\r\n\r\n```\r\n\r\n### Via CLI\r\n\r\n```sh\r\n$ babel --plugins optimize-inline-svg script.js\r\n```\r\n\r\n### Via Node API\r\n\r\n\r\n```javascript\r\nrequire('@babel/core').transform('code', {\r\n  plugins: [\r\n    ['optimize-inline-svg', { filename: 'filename representing the code' }],\r\n  ]\r\n}) // => { code, map, ast };\r\n```\r\n\r\n---\r\n\r\nInspired by and code foundation provided by [react-svg-loader](https://github.com/boopathi/react-svg-loader).\r\n","readmeFilename":"README.md"}