{"_id":"babel-plugin-react-svg","_rev":"19-d08ea7151a6a42631ee6db8a300702b1","name":"babel-plugin-react-svg","dist-tags":{"latest":"3.0.3","canary":"3.0.4-alpha.3"},"versions":{"0.0.0":{"name":"babel-plugin-react-svg","version":"0.0.0","description":"","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"keywords":[],"author":{"name":"boopathi","email":"me@boopathi.in"},"license":"MIT","_id":"babel-plugin-react-svg@0.0.0","_npmVersion":"5.4.2","_nodeVersion":"8.5.0","_npmUser":{"name":"boopathi","email":"me@boopathi.in"},"dist":{"integrity":"sha512-aIit80XZ+hPdr3iTirjtDjUOeLILjxoKERGEMSfVRgFeRMC5peXq4ReQCzNRH2Or1i2mexzAglujmC/fDOGQHA==","shasum":"e634763a41724bdc0054ac9543f59606eba5a5d6","tarball":"https://registry.npmjs.org/babel-plugin-react-svg/-/babel-plugin-react-svg-0.0.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDa1OcKWE9YQdTfcj4ZbFXs48BEeR29BEdFocIWwYxyhQIgU+Nx4WcaqxsoOY7bO3uwvYFQDHC4cpf9XkcN6+1+mfc="}]},"maintainers":[{"name":"boopathi","email":"me@boopathi.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/babel-plugin-react-svg-0.0.0.tgz_1507718827618_0.49745374522171915"},"directories":{}},"2.0.0-alpha.4":{"name":"babel-plugin-react-svg","version":"2.0.0-alpha.4","description":"Babel plugin to transform svg to react component","keywords":["babel","babel-plugin","react","react-svg-loader","svg","webpack","webpack-loader"],"homepage":"https://github.com/boopathi/react-svg-loader/packages/babel-plugin-react-svg","bugs":{"url":"https://github.com/boopathi/react-svg-loader/issues"},"license":"MIT","author":{"name":"boopathi"},"files":["lib","README.md"],"main":"lib/index.js","repository":{"type":"git","url":"git+https://github.com/boopathi/react-svg-loader.git"},"peerDependencies":{"babel-plugin-syntax-jsx":"^6.18.0"},"_id":"babel-plugin-react-svg@2.0.0-alpha.4","_npmVersion":"5.4.2","_nodeVersion":"8.5.0","_npmUser":{"name":"boopathi","email":"me@boopathi.in"},"dist":{"integrity":"sha512-PfVYzlRgSx34Q6cC9CXjJYqi2cBNnoqYgoAf277IovGEXCUk8HjE0noIRvWPxRa6HEouSh2vDJwsXLLhBYu+Kw==","shasum":"2e88d611348ca21750a37b114f431eca77b9de66","tarball":"https://registry.npmjs.org/babel-plugin-react-svg/-/babel-plugin-react-svg-2.0.0-alpha.4.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFuIIzlL1LBd1S7SKO89n0OAKYpo57c0CxNOcn9QG8vXAiEAxPHGewq2Lm5RzmgR8+h1cZDdEe46P62BzEHArpBQgeg="}]},"maintainers":[{"name":"boopathi","email":"me@boopathi.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/babel-plugin-react-svg-2.0.0-alpha.4.tgz_1507729944727_0.9790515766944736"},"directories":{}},"2.0.0":{"name":"babel-plugin-react-svg","version":"2.0.0","description":"Babel plugin to transform svg to react component","keywords":["babel","babel-plugin","react","react-svg-loader","svg","webpack","webpack-loader"],"homepage":"https://github.com/boopathi/react-svg-loader/packages/babel-plugin-react-svg","bugs":{"url":"https://github.com/boopathi/react-svg-loader/issues"},"license":"MIT","author":{"name":"boopathi"},"files":["lib","README.md"],"main":"lib/index.js","repository":{"type":"git","url":"git+https://github.com/boopathi/react-svg-loader.git"},"peerDependencies":{"babel-plugin-syntax-jsx":"^6.18.0"},"_id":"babel-plugin-react-svg@2.0.0","_npmVersion":"5.4.2","_nodeVersion":"8.5.0","_npmUser":{"name":"boopathi","email":"me@boopathi.in"},"dist":{"integrity":"sha512-dwMtmFwOWMbkYPJ56JmHSMzgCEKZajVAOE84Vq6T0JcD4Hr0zXTXZwWlpXVNMhhaZqSFy6Lp044gNtCsSGEmNw==","shasum":"3c4f3fe4204e5074042c023245b406cbdcf7afe1","tarball":"https://registry.npmjs.org/babel-plugin-react-svg/-/babel-plugin-react-svg-2.0.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDbQwVbhoaWzj7/JbypWGdV9uMiQbw1wijHiHplqJjqKQIhAKxXT17IaDYR4xSOghfNhE1tWZIQvVOD9+jaUvQAFRy9"}]},"maintainers":[{"name":"boopathi","email":"me@boopathi.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/babel-plugin-react-svg-2.0.0.tgz_1507737138505_0.3934012402314693"},"directories":{}},"2.1.0":{"name":"babel-plugin-react-svg","version":"2.1.0","description":"Babel plugin to transform svg to react component","keywords":["babel","babel-plugin","react","react-svg-loader","svg","webpack","webpack-loader"],"homepage":"https://github.com/boopathi/react-svg-loader/tree/master/packages/babel-plugin-react-svg","bugs":{"url":"https://github.com/boopathi/react-svg-loader/issues"},"license":"MIT","author":{"name":"boopathi"},"files":["lib","README.md"],"main":"lib/index.js","repository":{"type":"git","url":"git+https://github.com/boopathi/react-svg-loader.git"},"peerDependencies":{"babel-plugin-syntax-jsx":"^6.18.0"},"_id":"babel-plugin-react-svg@2.1.0","_npmVersion":"5.4.2","_nodeVersion":"8.5.0","_npmUser":{"name":"boopathi","email":"me@boopathi.in"},"dist":{"integrity":"sha512-dHhDj5o4TEdrGSIzWQvTthZsEGCWGRKzSd+zO0xl8ie0zMf4to5nF64Cyu2zfM0mfB9BGRYQLE3YQliv9c+gPA==","shasum":"169eeba1a20fa2dee3a71ff38eedd63d08e69487","tarball":"https://registry.npmjs.org/babel-plugin-react-svg/-/babel-plugin-react-svg-2.1.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDcBjKi8N4/AIWkMuwYzt8Z2RljC67gXyWZwH79W0/MTQIgadiDtemtjLKsyAiAHC46LMzO152QKCBkuDGc+/+t3xA="}]},"maintainers":[{"name":"boopathi","email":"me@boopathi.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/babel-plugin-react-svg-2.1.0.tgz_1507849828848_0.7582442378625274"},"directories":{}},"2.2.0-alpha.58aa6b3c":{"name":"babel-plugin-react-svg","version":"2.2.0-alpha.58aa6b3c","description":"Babel plugin to transform svg to react component","keywords":["babel","babel-plugin","react","react-svg-loader","svg","webpack","webpack-loader"],"homepage":"https://github.com/boopathi/react-svg-loader/tree/master/packages/babel-plugin-react-svg","bugs":{"url":"https://github.com/boopathi/react-svg-loader/issues"},"license":"MIT","author":{"name":"boopathi"},"files":["lib","README.md"],"main":"lib/index.js","repository":{"type":"git","url":"git+https://github.com/boopathi/react-svg-loader.git"},"peerDependencies":{"babel-plugin-syntax-jsx":"^6.18.0"},"_id":"babel-plugin-react-svg@2.2.0-alpha.58aa6b3c","_npmVersion":"5.5.1","_nodeVersion":"8.5.0","_npmUser":{"name":"boopathi","email":"me@boopathi.in"},"dist":{"integrity":"sha512-uwU0mNDUznBs2RkiqfhL1402BcI6fGaleNXDAbdWf4BMsgZUYwCLQx1Jc3OgojUxHY3yKE9P/98k3oWURPPwzw==","shasum":"5667257f40b7ea925b975c8a57e8a4b7203ae011","tarball":"https://registry.npmjs.org/babel-plugin-react-svg/-/babel-plugin-react-svg-2.2.0-alpha.58aa6b3c.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD/qSj2cMxNrra6KN2++tnMURKpD0GjzRMR6e4+ylT70AIgXfhemoMQJRX/pLYaGMLMQ7px0OOGLlpln1DMp3vZhB4="}]},"maintainers":[{"name":"boopathi","email":"me@boopathi.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/babel-plugin-react-svg-2.2.0-alpha.58aa6b3c.tgz_1511809665693_0.08162324409931898"},"directories":{}},"2.2.0-nightly.58aa6b3c":{"name":"babel-plugin-react-svg","version":"2.2.0-nightly.58aa6b3c","description":"Babel plugin to transform svg to react component","keywords":["babel","babel-plugin","react","react-svg-loader","svg","webpack","webpack-loader"],"homepage":"https://github.com/boopathi/react-svg-loader/tree/master/packages/babel-plugin-react-svg","bugs":{"url":"https://github.com/boopathi/react-svg-loader/issues"},"license":"MIT","author":{"name":"boopathi"},"files":["lib","README.md"],"main":"lib/index.js","repository":{"type":"git","url":"git+https://github.com/boopathi/react-svg-loader.git"},"peerDependencies":{"babel-plugin-syntax-jsx":"^6.18.0"},"_id":"babel-plugin-react-svg@2.2.0-nightly.58aa6b3c","_npmVersion":"5.5.1","_nodeVersion":"8.5.0","_npmUser":{"name":"boopathi","email":"me@boopathi.in"},"dist":{"integrity":"sha512-ff6GmD2jDiM9KbzDFvawfSdSlRzELJpa7ToaT0eBbtKep8cfeuIdhTPSeUpP6qfwSukpVHZQgS3nStl4KyKe8w==","shasum":"3f504e9a23b9d12e3029624e27350fdfd28714bf","tarball":"https://registry.npmjs.org/babel-plugin-react-svg/-/babel-plugin-react-svg-2.2.0-nightly.58aa6b3c.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEjAOPrRFURDl8pMQPJdz8QhyHGoGGYrnTky4yyirTwaAiEAowHBzwDi+lnLNjWID3BB16SkSAzUQGT9ZG8S4N4Ha0Y="}]},"maintainers":[{"name":"boopathi","email":"me@boopathi.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/babel-plugin-react-svg-2.2.0-nightly.58aa6b3c.tgz_1511810917951_0.09661935432814062"},"directories":{}},"2.2.0-alpha.a1496904":{"name":"babel-plugin-react-svg","version":"2.2.0-alpha.a1496904","description":"Babel plugin to transform svg to react component","keywords":["babel","babel-plugin","react","react-svg-loader","svg","webpack","webpack-loader"],"homepage":"https://github.com/boopathi/react-svg-loader/tree/master/packages/babel-plugin-react-svg","bugs":{"url":"https://github.com/boopathi/react-svg-loader/issues"},"license":"MIT","author":{"name":"boopathi"},"files":["lib","README.md"],"main":"lib/index.js","repository":{"type":"git","url":"git+https://github.com/boopathi/react-svg-loader.git"},"peerDependencies":{"babel-plugin-syntax-jsx":"^6.18.0"},"_id":"babel-plugin-react-svg@2.2.0-alpha.a1496904","_npmVersion":"5.5.1","_nodeVersion":"8.5.0","_npmUser":{"name":"boopathi","email":"me@boopathi.in"},"dist":{"integrity":"sha512-kL3nLOYi2CwFum6Er4WPR3FhUlYcGJH8TWc+s5RK8TcTaRKT97zaJpkyGCu1u++Bm2klz+DI1fCaFEXy6Xlfkw==","shasum":"11e1557e3c96307b693e889d6c550cfac213825d","tarball":"https://registry.npmjs.org/babel-plugin-react-svg/-/babel-plugin-react-svg-2.2.0-alpha.a1496904.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCEw089OWKQragxiguLIOhrNwnIKUNXMiuOlewMrWMWhQIhAMKL+5/KzJP0BpnBSsJeH9Gf2uJ3eqw1688F6H3/f8L/"}]},"maintainers":[{"name":"boopathi","email":"me@boopathi.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/babel-plugin-react-svg-2.2.0-alpha.a1496904.tgz_1511822207200_0.30885223648510873"},"directories":{}},"2.2.0-alpha.52f0a7dd":{"name":"babel-plugin-react-svg","version":"2.2.0-alpha.52f0a7dd","description":"Babel plugin to transform svg to react component","keywords":["babel","babel-plugin","react","react-svg-loader","svg","webpack","webpack-loader"],"homepage":"https://github.com/boopathi/react-svg-loader/tree/master/packages/babel-plugin-react-svg","bugs":{"url":"https://github.com/boopathi/react-svg-loader/issues"},"license":"MIT","author":{"name":"boopathi"},"files":["lib","README.md"],"main":"lib/index.js","repository":{"type":"git","url":"git+https://github.com/boopathi/react-svg-loader.git"},"peerDependencies":{"babel-plugin-syntax-jsx":"^6.18.0"},"_id":"babel-plugin-react-svg@2.2.0-alpha.52f0a7dd","_npmVersion":"5.5.1","_nodeVersion":"8.9.1","_npmUser":{"name":"boopathi","email":"me@boopathi.in"},"dist":{"integrity":"sha512-VTfV8BLjTeoU9gsi5fTtTaMGDtMMba51/rBjbt262QJOjhyU110OAEbAw3PC5h9qzw/HmAmIaKZNXSOMwd+JMg==","shasum":"96067becb7ee3a40904ec1034b3670ea2c2113b1","tarball":"https://registry.npmjs.org/babel-plugin-react-svg/-/babel-plugin-react-svg-2.2.0-alpha.52f0a7dd.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGMHOt78pMz+ZNgoSq6gXbJw/OD0HgLyEYq4i9BelbmEAiEAqQ+Ib8ZZQR6sFSJJAiB1USjEwivNwLf609aP4Qlz+rk="}]},"maintainers":[{"name":"boopathi","email":"me@boopathi.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/babel-plugin-react-svg-2.2.0-alpha.52f0a7dd.tgz_1511865397205_0.8907649551983923"},"directories":{}},"2.2.0-alpha.038ff855":{"name":"babel-plugin-react-svg","version":"2.2.0-alpha.038ff855","description":"Babel plugin to transform svg to react component","keywords":["babel","babel-plugin","react","react-svg-loader","svg","webpack","webpack-loader"],"homepage":"https://github.com/boopathi/react-svg-loader/tree/master/packages/babel-plugin-react-svg","bugs":{"url":"https://github.com/boopathi/react-svg-loader/issues"},"license":"MIT","author":{"name":"boopathi"},"files":["lib","README.md"],"main":"lib/index.js","repository":{"type":"git","url":"git+https://github.com/boopathi/react-svg-loader.git"},"peerDependencies":{"babel-plugin-syntax-jsx":"^6.18.0"},"_id":"babel-plugin-react-svg@2.2.0-alpha.038ff855","_npmVersion":"5.5.1","_nodeVersion":"8.9.3","_npmUser":{"name":"boopathi","email":"me@boopathi.in"},"dist":{"integrity":"sha512-PkV9KhHs+MbJgLcDZS6l6+BGvD2bSOl+yRcOOKni9/n/hWa1DI0vq4wKKDOPstMY4M1qNEm5J8MWANrlK4+yJw==","shasum":"948a4f7553dd671bfdbcbafa3852de60bec3c3a8","tarball":"https://registry.npmjs.org/babel-plugin-react-svg/-/babel-plugin-react-svg-2.2.0-alpha.038ff855.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC+4+6359VvbnYLKcD1u7Hk62OMAq80LbAKyndtg4WaNQIgNP/yf3U4UN1EOSQuGiXFI+7/6+Z3qQ4Hf0EV7J0btDw="}]},"maintainers":[{"name":"boopathi","email":"me@boopathi.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/babel-plugin-react-svg-2.2.0-alpha.038ff855.tgz_1514497483375_0.3505858490243554"},"directories":{}},"2.2.0-alpha.10f9a762":{"name":"babel-plugin-react-svg","version":"2.2.0-alpha.10f9a762","description":"Babel plugin to transform svg to react component","keywords":["babel","babel-plugin","react","react-svg-loader","svg","webpack","webpack-loader"],"homepage":"https://github.com/boopathi/react-svg-loader/tree/master/packages/babel-plugin-react-svg","bugs":{"url":"https://github.com/boopathi/react-svg-loader/issues"},"license":"MIT","author":{"name":"boopathi"},"files":["lib","README.md"],"main":"lib/index.js","repository":{"type":"git","url":"git+https://github.com/boopathi/react-svg-loader.git"},"peerDependencies":{"babel-plugin-syntax-jsx":"^6.18.0"},"_id":"babel-plugin-react-svg@2.2.0-alpha.10f9a762","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"boopathi","email":"me@boopathi.in"},"dist":{"integrity":"sha512-46i3IwiOFIBBDU9NEqRX5+oS0beCsB67/hqDOJDBHJysQY7o7ImCSdE5moD1ANIEkOiJkzlYErMKWwlhd2U8sw==","shasum":"2a85f97c497fdf1f6a2c2707fdc668e5f3bc6ec5","tarball":"https://registry.npmjs.org/babel-plugin-react-svg/-/babel-plugin-react-svg-2.2.0-alpha.10f9a762.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC5LOXH0aaj6kh043fKqUnoB9vfkcoYPXmQrtiiLLX87QIgYNzWQi6/RAeHCJpH0mtj/L6UEtZ20ihOBQC8l5rGVpY="}]},"maintainers":[{"name":"boopathi","email":"me@boopathi.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/babel-plugin-react-svg-2.2.0-alpha.10f9a762.tgz_1515173769636_0.5216772509738803"},"directories":{}},"2.2.0-alpha.02daccb2":{"name":"babel-plugin-react-svg","version":"2.2.0-alpha.02daccb2","description":"Babel plugin to transform svg to react component","keywords":["babel","babel-plugin","react","react-svg-loader","svg","webpack","webpack-loader"],"homepage":"https://github.com/boopathi/react-svg-loader/tree/master/packages/babel-plugin-react-svg","bugs":{"url":"https://github.com/boopathi/react-svg-loader/issues"},"license":"MIT","author":{"name":"boopathi"},"files":["lib","README.md"],"main":"lib/index.js","repository":{"type":"git","url":"git+https://github.com/boopathi/react-svg-loader.git"},"peerDependencies":{"babel-plugin-syntax-jsx":"^6.18.0"},"readme":"# babel-plugin-react-svg\n\nA plugin that converts svg to a react component. Used in [react-svg-loader](/packages/react-svg-loader)\n\n## Install\n\n```sh\nnpm i babel-plugin-react-svg --save-dev\n\n# or with yarn\n\nyarn add babel-plugin-react-svg --dev\n```\n\n## Example\n\nInput SVG:\n\n```html\n<svg class=\"foo\" style='text-align: center; width: 100px' pointer-events=\"stroke\">\n  <circle cx=\"50\" cy=\"50\" r=\"25\" style=\"text-align: center;\" stroke-width=\"5\" />\n</svg>\n```\n\nOutput React Component:\n\n```js\nimport React from \"react\";\nexport default ({ styles = {}, ...props}) => <svg\n  className={styles[\"foo\"] || \"foo\"}\n  style={{ textAlign: \"center\", width: \"100px\" }}\n  pointerEvents=\"stroke\"\n  {...props}>\n    <circle cx=\"50\" cy=\"50\" r=\"25\" style={{textAlign: \"center\"}} strokeWidth=\"5\" />\n</svg>;\n```\n\n## Transformations\n\nGoing from bottom up, the following transformations are applied and the same can be checked in the partly annotated source - [babel-plugin](src/plugin.js)\n\n#### 1. Hyphenated attributes to camelCase\n\n```html\n<svg pointer-events=\"none\">\n  <path stroke-width=\"5\"/>\n</svg>\n```\n\nis transformed to\n\n```html\n<svg pointerEvents=\"none\">\n  <path strokeWidth=\"5\"/>\n</svg>\n```\n\n#### 2. Style attr string to object\n\nReact expects style attribute value to be an object. Also, Hyphenated style names are converted to camel case.\n\n```html\n<svg style=\"text-align: center\">\n  <circle style=\"width: 10px\"/>\n</svg>\n```\n\nis transformed to\n\n```html\n<svg style={{textAlign: 'center'}}>\n  <circle style={{width: '10px'}}/>\n</svg>\n```\n\n#### 3. Propagate props to root element\n\nThe props passed to the output component is passed on to the root SVG node and the props already defined are overridden by the props passed.\n\n```html\n<svg width=\"50\">\n  ...\n</svg>\n```\n\nis transformed to\n\n```html\n<svg width=\"50\" {...props}>\n  ...\n</svg>\n```\n\n#### 4. class to className & class values to styles prop\n\n```html\n<svg class=\"foo bar\"/>\n```\n\nis transformed to\n\n```jsx\n<svg className={ (styles[\"foo\"] || \"foo\") + \" \" + (styles[\"bar\"] || \"bar\") }>\n```\n\n#### 5. export React.Component\n\nThe loader should now export the svg component. And this is done by wrapping it in an ArrowFunctionExpression.\n\n```html\n<svg>...</svg>\n```\n\nis transformed to\n\n```js\nimport React from 'react';\nexport default ({ styles = {}, ...props }) => <svg {...props}>...</svg>;\n```\n\n## Assumptions and Other gotchas\n\n+ Root element is always `<svg>`\n+ SVG is optimized using SVGO\n\n## LICENSE\n\n[MIT](https://github.com/boopathi/react-svg-loader/blob/master/LICENSE)\n","readmeFilename":"README.md","_id":"babel-plugin-react-svg@2.2.0-alpha.02daccb2","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"boopathi","email":"me@boopathi.in"},"dist":{"integrity":"sha512-lBdiCL7Hcw3wF3lu5fEWl9lX74bjiMNhl5x3rNJoPE5ZEtxo7HUM7AK1C9WqLb8Yodqxhx7jU933Ed0SBLCE0Q==","shasum":"aca8521a9a445e4ef979be3234b2ad849fed4331","tarball":"https://registry.npmjs.org/babel-plugin-react-svg/-/babel-plugin-react-svg-2.2.0-alpha.02daccb2.tgz","fileCount":5,"unpackedSize":8502,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDsSBUtWiwM1MZtctbWskjhxh0ALyXt5r66kzUMqzAwBAIgNlGcQaDNzAGkrwXAYqb6SMPN7EDAI0BGHEHIl/lfkNY="}]},"maintainers":[{"name":"boopathi","email":"me@boopathi.in"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/babel-plugin-react-svg_2.2.0-alpha.02daccb2_1519320076568_0.04261944300046028"},"_hasShrinkwrap":false},"2.2.0-alpha.b8e3c6d5":{"name":"babel-plugin-react-svg","version":"2.2.0-alpha.b8e3c6d5","description":"Babel plugin to transform svg to react component","keywords":["babel","babel-plugin","react","react-svg-loader","svg","webpack","webpack-loader"],"homepage":"https://github.com/boopathi/react-svg-loader/tree/master/packages/babel-plugin-react-svg","bugs":{"url":"https://github.com/boopathi/react-svg-loader/issues"},"license":"MIT","author":{"name":"boopathi"},"files":["lib","README.md"],"main":"lib/index.js","repository":{"type":"git","url":"git+https://github.com/boopathi/react-svg-loader.git"},"peerDependencies":{"babel-plugin-syntax-jsx":"^6.18.0"},"readme":"# babel-plugin-react-svg\n\nA plugin that converts svg to a react component. Used in [react-svg-loader](/packages/react-svg-loader)\n\n## Install\n\n```sh\nnpm i babel-plugin-react-svg --save-dev\n\n# or with yarn\n\nyarn add babel-plugin-react-svg --dev\n```\n\n## Example\n\nInput SVG:\n\n```html\n<svg class=\"foo\" style='text-align: center; width: 100px' pointer-events=\"stroke\">\n  <circle cx=\"50\" cy=\"50\" r=\"25\" style=\"text-align: center;\" stroke-width=\"5\" />\n</svg>\n```\n\nOutput React Component:\n\n```js\nimport React from \"react\";\nexport default ({ styles = {}, ...props}) => <svg\n  className={styles[\"foo\"] || \"foo\"}\n  style={{ textAlign: \"center\", width: \"100px\" }}\n  pointerEvents=\"stroke\"\n  {...props}>\n    <circle cx=\"50\" cy=\"50\" r=\"25\" style={{textAlign: \"center\"}} strokeWidth=\"5\" />\n</svg>;\n```\n\n## Transformations\n\nGoing from bottom up, the following transformations are applied and the same can be checked in the partly annotated source - [babel-plugin](src/plugin.js)\n\n#### 1. Hyphenated attributes to camelCase\n\n```html\n<svg pointer-events=\"none\">\n  <path stroke-width=\"5\"/>\n</svg>\n```\n\nis transformed to\n\n```html\n<svg pointerEvents=\"none\">\n  <path strokeWidth=\"5\"/>\n</svg>\n```\n\n#### 2. Style attr string to object\n\nReact expects style attribute value to be an object. Also, Hyphenated style names are converted to camel case.\n\n```html\n<svg style=\"text-align: center\">\n  <circle style=\"width: 10px\"/>\n</svg>\n```\n\nis transformed to\n\n```html\n<svg style={{textAlign: 'center'}}>\n  <circle style={{width: '10px'}}/>\n</svg>\n```\n\n#### 3. Propagate props to root element\n\nThe props passed to the output component is passed on to the root SVG node and the props already defined are overridden by the props passed.\n\n```html\n<svg width=\"50\">\n  ...\n</svg>\n```\n\nis transformed to\n\n```html\n<svg width=\"50\" {...props}>\n  ...\n</svg>\n```\n\n#### 4. class to className & class values to styles prop\n\n```html\n<svg class=\"foo bar\"/>\n```\n\nis transformed to\n\n```jsx\n<svg className={ (styles[\"foo\"] || \"foo\") + \" \" + (styles[\"bar\"] || \"bar\") }>\n```\n\n#### 5. export React.Component\n\nThe loader should now export the svg component. And this is done by wrapping it in an ArrowFunctionExpression.\n\n```html\n<svg>...</svg>\n```\n\nis transformed to\n\n```js\nimport React from 'react';\nexport default ({ styles = {}, ...props }) => <svg {...props}>...</svg>;\n```\n\n## Assumptions and Other gotchas\n\n+ Root element is always `<svg>`\n+ SVG is optimized using SVGO\n\n## LICENSE\n\n[MIT](https://github.com/boopathi/react-svg-loader/blob/master/LICENSE)\n","readmeFilename":"README.md","_id":"babel-plugin-react-svg@2.2.0-alpha.b8e3c6d5","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"boopathi","email":"me@boopathi.in"},"dist":{"integrity":"sha512-ZFnwcufr7Qe2QrqopSMRh0XLXIifr57yLxwLe1BhbzLnC7YU1+epOq15UflHuJNBEHvR07cwla3zHQ70tb+wgg==","shasum":"c9d67702a6f1b741c0f2d7fb86d8b07120f8eea6","tarball":"https://registry.npmjs.org/babel-plugin-react-svg/-/babel-plugin-react-svg-2.2.0-alpha.b8e3c6d5.tgz","fileCount":5,"unpackedSize":8502,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC/6xe4sT17C4MEh/PkN6Q1zcxmjjqXkprzV4jW4KvfGAIgUNZIyD/feJhLaSKrzAV556YRhZPw4vpqY1NtgcARgUs="}]},"maintainers":[{"name":"boopathi","email":"me@boopathi.in"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/babel-plugin-react-svg_2.2.0-alpha.b8e3c6d5_1519849754750_0.38850653212932507"},"_hasShrinkwrap":false},"2.2.0-alpha.90436959":{"name":"babel-plugin-react-svg","version":"2.2.0-alpha.90436959","description":"Babel plugin to transform svg to react component","keywords":["babel","babel-plugin","react","react-svg-loader","svg","webpack","webpack-loader"],"homepage":"https://github.com/boopathi/react-svg-loader/tree/master/packages/babel-plugin-react-svg","bugs":{"url":"https://github.com/boopathi/react-svg-loader/issues"},"license":"MIT","author":{"name":"boopathi"},"files":["lib","README.md"],"main":"lib/index.js","repository":{"type":"git","url":"git+https://github.com/boopathi/react-svg-loader.git"},"peerDependencies":{"babel-plugin-syntax-jsx":"^6.18.0"},"readme":"# babel-plugin-react-svg\n\nA plugin that converts svg to a react component. Used in [react-svg-loader](/packages/react-svg-loader)\n\n## Install\n\n```sh\nnpm i babel-plugin-react-svg --save-dev\n\n# or with yarn\n\nyarn add babel-plugin-react-svg --dev\n```\n\n## Example\n\nInput SVG:\n\n```html\n<svg class=\"foo\" style='text-align: center; width: 100px' pointer-events=\"stroke\">\n  <circle cx=\"50\" cy=\"50\" r=\"25\" style=\"text-align: center;\" stroke-width=\"5\" />\n</svg>\n```\n\nOutput React Component:\n\n```js\nimport React from \"react\";\nexport default ({ styles = {}, ...props}) => <svg\n  className={styles[\"foo\"] || \"foo\"}\n  style={{ textAlign: \"center\", width: \"100px\" }}\n  pointerEvents=\"stroke\"\n  {...props}>\n    <circle cx=\"50\" cy=\"50\" r=\"25\" style={{textAlign: \"center\"}} strokeWidth=\"5\" />\n</svg>;\n```\n\n## Transformations\n\nGoing from bottom up, the following transformations are applied and the same can be checked in the partly annotated source - [babel-plugin](src/plugin.js)\n\n#### 1. Hyphenated attributes to camelCase\n\n```html\n<svg pointer-events=\"none\">\n  <path stroke-width=\"5\"/>\n</svg>\n```\n\nis transformed to\n\n```html\n<svg pointerEvents=\"none\">\n  <path strokeWidth=\"5\"/>\n</svg>\n```\n\n#### 2. Style attr string to object\n\nReact expects style attribute value to be an object. Also, Hyphenated style names are converted to camel case.\n\n```html\n<svg style=\"text-align: center\">\n  <circle style=\"width: 10px\"/>\n</svg>\n```\n\nis transformed to\n\n```html\n<svg style={{textAlign: 'center'}}>\n  <circle style={{width: '10px'}}/>\n</svg>\n```\n\n#### 3. Propagate props to root element\n\nThe props passed to the output component is passed on to the root SVG node and the props already defined are overridden by the props passed.\n\n```html\n<svg width=\"50\">\n  ...\n</svg>\n```\n\nis transformed to\n\n```html\n<svg width=\"50\" {...props}>\n  ...\n</svg>\n```\n\n#### 4. class to className & class values to styles prop\n\n```html\n<svg class=\"foo bar\"/>\n```\n\nis transformed to\n\n```jsx\n<svg className={ (styles[\"foo\"] || \"foo\") + \" \" + (styles[\"bar\"] || \"bar\") }>\n```\n\n#### 5. export React.Component\n\nThe loader should now export the svg component. And this is done by wrapping it in an ArrowFunctionExpression.\n\n```html\n<svg>...</svg>\n```\n\nis transformed to\n\n```js\nimport React from 'react';\nexport default ({ styles = {}, ...props }) => <svg {...props}>...</svg>;\n```\n\n## Assumptions and Other gotchas\n\n+ Root element is always `<svg>`\n+ SVG is optimized using SVGO\n\n## LICENSE\n\n[MIT](https://github.com/boopathi/react-svg-loader/blob/master/LICENSE)\n","readmeFilename":"README.md","_id":"babel-plugin-react-svg@2.2.0-alpha.90436959","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"boopathi","email":"me@boopathi.in"},"dist":{"integrity":"sha512-iIveTkPcAd4FatUza3+UiGyCFIWQi9xWpaYdeHaiHzAX/REcRPZVTNUQbqg16cf3QD/7XHU4d+giuCirff0Npw==","shasum":"b30ee0bb9048a18f355ba377a60788c8ecda47ef","tarball":"https://registry.npmjs.org/babel-plugin-react-svg/-/babel-plugin-react-svg-2.2.0-alpha.90436959.tgz","fileCount":5,"unpackedSize":8502,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC1zYjRaSOsEVitNX+aDFWv5HUmnpkR+5t+RUfJvEsekQIgGghKT9nw6z/z0Pcn3EXe4J395XdPEhObtxydd2EwoxU="}]},"maintainers":[{"name":"boopathi","email":"me@boopathi.in"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/babel-plugin-react-svg_2.2.0-alpha.90436959_1521328175234_0.38820375983647404"},"_hasShrinkwrap":false},"2.1.1-alpha.36":{"name":"babel-plugin-react-svg","version":"2.1.1-alpha.36","description":"Babel plugin to transform svg to react component","keywords":["babel","babel-plugin","react","react-svg-loader","svg","webpack","webpack-loader"],"homepage":"https://github.com/boopathi/react-svg-loader/tree/master/packages/babel-plugin-react-svg","bugs":{"url":"https://github.com/boopathi/react-svg-loader/issues"},"repository":{"type":"git","url":"git+https://github.com/boopathi/react-svg-loader.git"},"license":"MIT","author":{"name":"boopathi"},"main":"lib/index.js","peerDependencies":{"@babel/plugin-syntax-jsx":"^7.2.0"},"engines":{"node":">=6"},"gitHead":"8d4107a7c6c031e0aaf081a056ca8e9fa0ec5876","readme":"# babel-plugin-react-svg\n\nA plugin that converts svg to a react component. Used in [react-svg-loader](/packages/react-svg-loader)\n\n## Install\n\n```sh\nnpm i babel-plugin-react-svg --save-dev\n\n# or with yarn\n\nyarn add babel-plugin-react-svg --dev\n```\n\n## Example\n\nInput SVG:\n\n```html\n<svg class=\"foo\" style='text-align: center; width: 100px' pointer-events=\"stroke\">\n  <circle cx=\"50\" cy=\"50\" r=\"25\" style=\"text-align: center;\" stroke-width=\"5\" />\n</svg>\n```\n\nOutput React Component:\n\n```js\nimport React from \"react\";\nexport default ({ styles = {}, ...props}) => <svg\n  className={styles[\"foo\"] || \"foo\"}\n  style={{ textAlign: \"center\", width: \"100px\" }}\n  pointerEvents=\"stroke\"\n  {...props}>\n    <circle cx=\"50\" cy=\"50\" r=\"25\" style={{textAlign: \"center\"}} strokeWidth=\"5\" />\n</svg>;\n```\n\n## Transformations\n\nGoing from bottom up, the following transformations are applied and the same can be checked in the partly annotated source - [babel-plugin](src/plugin.js)\n\n#### 1. Hyphenated attributes to camelCase\n\n```html\n<svg pointer-events=\"none\">\n  <path stroke-width=\"5\"/>\n</svg>\n```\n\nis transformed to\n\n```html\n<svg pointerEvents=\"none\">\n  <path strokeWidth=\"5\"/>\n</svg>\n```\n\n#### 2. Style attr string to object\n\nReact expects style attribute value to be an object. Also, Hyphenated style names are converted to camel case.\n\n```html\n<svg style=\"text-align: center\">\n  <circle style=\"width: 10px\"/>\n</svg>\n```\n\nis transformed to\n\n```html\n<svg style={{textAlign: 'center'}}>\n  <circle style={{width: '10px'}}/>\n</svg>\n```\n\n#### 3. Propagate props to root element\n\nThe props passed to the output component is passed on to the root SVG node and the props already defined are overridden by the props passed.\n\n```html\n<svg width=\"50\">\n  ...\n</svg>\n```\n\nis transformed to\n\n```html\n<svg width=\"50\" {...props}>\n  ...\n</svg>\n```\n\n#### 4. class to className & class values to styles prop\n\n```html\n<svg class=\"foo bar\"/>\n```\n\nis transformed to\n\n```jsx\n<svg className={ (styles[\"foo\"] || \"foo\") + \" \" + (styles[\"bar\"] || \"bar\") }>\n```\n\n#### 5. export React.Component\n\nThe loader should now export the svg component. And this is done by wrapping it in an ArrowFunctionExpression.\n\n```html\n<svg>...</svg>\n```\n\nis transformed to\n\n```js\nimport React from 'react';\nexport default ({ styles = {}, ...props }) => <svg {...props}>...</svg>;\n```\n\n## Assumptions and Other gotchas\n\n+ Root element is always `<svg>`\n+ SVG is optimized using SVGO\n\n## LICENSE\n\n[MIT](https://github.com/boopathi/react-svg-loader/blob/master/LICENSE)\n","readmeFilename":"README.md","_id":"babel-plugin-react-svg@2.1.1-alpha.36","_nodeVersion":"11.9.0","_npmVersion":"lerna/3.11.1/node@v11.9.0+x64 (darwin)","dist":{"integrity":"sha512-RyV0uJHU89vD9s6ABWjLx8Q6WOCE7u+F0x96MncNWV3EOFFhLw4pcijkOL8PZIkzndkY1p+vUKsCXXl6lrO55Q==","shasum":"e5a09d7ed6c25549445bcc7e098a16c5ced6dfcf","tarball":"https://registry.npmjs.org/babel-plugin-react-svg/-/babel-plugin-react-svg-2.1.1-alpha.36.tgz","fileCount":6,"unpackedSize":9641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcY41pCRA9TVsSAnZWagAAlzAP/A6EH+cNTMBOO5vLyp9e\nzGNKk3SL9WCWF6BfopYGhaafwH7hsZ5GOsvy84QWhjXCrnYe9Y+axWsf7zjy\nQqTQWv/3nQhOtZDlsCbBGQLs8u4UI6JKRJ8bnoa0z26IuwWEHO/9CY+tQbHg\ndXS3EXAi0pg+/aUaZ+ue7OhNKam4+U4CzT5mkZCE5lHpv0cv7DnvBzA7/7Bo\nek5858NA0Dhb1DvHoZB5TxMjOzUE96bnCJJ/c7AAoyPncGtj3LbVra4b50Hk\nhmnLwqnlBvZX4TkfR7o8NSdIK2GkwYc3Lr6ahh+s/fuYrbeHHIJomL79AWoG\npjBtrrYkmvKIJCP7m6/6L8PyLfx7MICmKz7gH9eyT3vLtdECTqBOJPSqQqLK\ni9cGOZYpSA6btOT4mACjKJwHb6qEEhLmCLsbdZIu863q0qr7UJQMpMEaBdIl\nTkpOV+eJ0369mOeewAqs27MsBE36BSpLYxoa2Ql2SsRCbk6St/BCVJQcYM63\n9FaZyTh7dwftCu13FFFdNzFF+hHpYn7JYtHWZjgP6UtBQDLA1Ff/ccm9+6XP\n0OymTy4/v50eWruYXdnGulUDBpihjky+VVBuAfOS0DcLUkwiKcc6rG3RhNxq\nK259/BR1hQq0PGz3DpT0XL6S7IVWXM1aZpI/Z4tP6qxkrXURbwS0wMB3IS5M\nYijG\r\n=1K2k\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCUtXqSZBMP//J3G/9DNURNusnCIugXykkEAEOyRDYPFgIhAIXqk3lglS1060bLyimEfIqlht3fVUYtIH9Y9ZCO22v7"}]},"maintainers":[{"name":"boopathi","email":"me@boopathi.in"}],"_npmUser":{"name":"boopathi","email":"me@boopathi.in"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/babel-plugin-react-svg_2.1.1-alpha.36_1550028137204_0.7092306731503086"},"_hasShrinkwrap":false},"3.0.0":{"name":"babel-plugin-react-svg","version":"3.0.0","description":"Babel plugin to transform svg to react component","keywords":["babel","babel-plugin","react","react-svg-loader","svg","webpack","webpack-loader"],"homepage":"https://github.com/boopathi/react-svg-loader/tree/master/packages/babel-plugin-react-svg","bugs":{"url":"https://github.com/boopathi/react-svg-loader/issues"},"repository":{"type":"git","url":"git+https://github.com/boopathi/react-svg-loader.git"},"license":"MIT","author":{"name":"boopathi"},"main":"lib/index.js","peerDependencies":{"@babel/plugin-syntax-jsx":"^7.2.0"},"engines":{"node":">=6"},"gitHead":"f99668807b16aff139efbc84c63430349ddc1bb1","_id":"babel-plugin-react-svg@3.0.0","_nodeVersion":"12.0.0","_npmVersion":"lerna/3.13.4/node@v12.0.0+x64 (darwin)","dist":{"integrity":"sha512-dPhU6kkbUcK7Qbm+5Bj0aOvcet/BJOaOSYeHqetu0hjjECAvkl0IHMiySZdEHIRv9tvy2To91UXrULw/rtTBeA==","shasum":"7069d986018f1f9ca185c4ffb9478b3affb5f598","tarball":"https://registry.npmjs.org/babel-plugin-react-svg/-/babel-plugin-react-svg-3.0.0.tgz","fileCount":6,"unpackedSize":9624,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcy+6/CRA9TVsSAnZWagAAW+QQAIBpN9Xet8INF7+pDZM7\n6CMa5LQGUb+RGB02u1tIHnZJUHg88nUEw51Qjw1y9o69L4b7rPvNwNC8zfJ6\n/P8BYNqH9rmqOiHEimEwfsycXzDKawnjOJba4ZVZG1l/cq2auF9X4L641Nyf\nwFQ7k+Zf5F5BCDj0JCGsj8fpIQ7Y08CNvflM2koKKwlt7YzGEnSCP//UJrnK\n4S8iAfxunT5eUsPzkkqVZKRvDuxzla0JnhzIG366K9zaC7b+LytsuTGDr9OF\njIRetIy/IZC4jnYTF+9dX2j6t7dl83mtC1cvx9mwWZqmoduursC1V4+Ya2ER\nKmtgngUlwEBOi++Pdcm9owqxcxDWVv6r075bEgDQQGp7skZlTQX/D7v95v4R\nh/SGVj/aD1cryVoiyER7g8uoK9VI4KPmf+C3t1RGezNnIKKsanHUnO0gk0PM\nnO3Ncc+lXEnZ4XzSbN/3rn7WMyerNi7OrsGLuRAN0CjWQFlCd7rBFGwo/0Py\n4M3B73wqkkC3h8H8Fnn7OeEJ+PYsa+5/Ubsmba2a/9BJ0zg2BreQyCGarSSC\nfSPNrd1QChrnAuTBaRUiWA4Rr+Rua2YpVv7HpQOBN75gR53U7HKsujekZjJ7\nsg9Wqo+qDTYSF5nik52TkliwzJtKZTxf8E2WeAkXYD4EpI2veFnnqJFPzY2M\ne6KZ\r\n=3sA2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDqXmQG4EwdON4UMQiH9Pv8XEZtE4ZkZkmsZCqjLd/MJAiEA/alu0i7wMzrHE/9uOsEhnP4hhy7EO7K+8DY67Waal7k="}]},"maintainers":[{"name":"boopathi","email":"me@boopathi.in"}],"_npmUser":{"name":"boopathi","email":"me@boopathi.in"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/babel-plugin-react-svg_3.0.0_1556868798465_0.42130885307585286"},"_hasShrinkwrap":false},"3.0.1":{"name":"babel-plugin-react-svg","version":"3.0.1","description":"Babel plugin to transform svg to react component","keywords":["babel","babel-plugin","react","react-svg-loader","svg","webpack","webpack-loader"],"homepage":"https://github.com/boopathi/react-svg-loader/tree/master/packages/babel-plugin-react-svg","bugs":{"url":"https://github.com/boopathi/react-svg-loader/issues"},"repository":{"type":"git","url":"git+https://github.com/boopathi/react-svg-loader.git"},"license":"MIT","author":{"name":"boopathi"},"main":"lib/index.js","peerDependencies":{"@babel/plugin-syntax-jsx":"^7.2.0"},"engines":{"node":">=8"},"gitHead":"7913eb2ef6003bb912159fde22f4c1a2b77f0bb1","_id":"babel-plugin-react-svg@3.0.1","_nodeVersion":"12.0.0","_npmVersion":"lerna/3.13.4/node@v12.0.0+x64 (darwin)","dist":{"integrity":"sha512-BHJoNHMk03GunN2C9Z7zivhtY39h93yRagOOObGulSlTVUsUL40iAa4GlpGFkclGqGBkgtW06VUtENvfwCUGNA==","shasum":"baa804fcd851ed928035975c2a31725b16581395","tarball":"https://registry.npmjs.org/babel-plugin-react-svg/-/babel-plugin-react-svg-3.0.1.tgz","fileCount":6,"unpackedSize":9624,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcz+/0CRA9TVsSAnZWagAANr0QAJpb0kHQulYd2Ciu+MDU\nyNUG683BYtpDzx0VC8LDMeNdf5dKpCtVWn+1GAQBuIQsatQYLr/iyaJIRhe5\nTLlMDC2pIn1HS0aTt1vmoEoXQQ0pa0LhsoJzU+98mhkfnNH9QIBQPT4F90ea\nc0zVrfA5NT3qA7vU+uj30SRQFdIk1d35aa+KVuFWz8cGi0lSgPWTxNlT+U1H\nYzS77o1xBjrxpbHEPF7dPYHEL3zq05AvdcYMzBlj5e4ik+TKFYwp9S1ovtt0\n47yg6PVCDSKqiDO+UNMjwDSiIserIn/yBLttHz57gVMxRafDglLAKBgRotT7\ndOqUW2deKXkIAC3H4jV9xxh06JkoQ2ED0f4tinc76ue7IdX8CtG86Vp3JDkf\nswfYhQ20jPp+YURiiGUNL30MiL7U0imIKGnWSuzbheBhWeyrVeNw/lZMTtDv\nlehWVsowOe7vXgmt887ne1O0apzpbpeNrb67biPxZ4JQgnsIjfXOV4wueiWA\n+QQXMoFAzGrYHRwdSH8Is/3wuixhAHAfyH1p/7DtdzbD4LGoDK5vN0fPMvkY\nWGSA2fKKjw1LDmtA6bZvED6AubDjXV+xG5No9MTAlXYFOdzb0to7btc7NB+b\nIwTNjDB+WJRCtzi9sJrqr6rj9l5lDB3Kt/yDOa0RCuzysaRetVZ7PSkQVCxI\nJAWr\r\n=w13m\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHnamuNgIXNhpvDJABSjzn+1SC0V0lzZ6xxCveO2AKfzAiBOlmDXzJEUmGfT9UvdD4LCJGbvghq6EFyXF7zGDEkrYg=="}]},"maintainers":[{"name":"boopathi","email":"me@boopathi.in"}],"_npmUser":{"name":"boopathi","email":"me@boopathi.in"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/babel-plugin-react-svg_3.0.1_1557131251927_0.6722294413331924"},"_hasShrinkwrap":false},"3.0.3":{"name":"babel-plugin-react-svg","version":"3.0.3","description":"Babel plugin to transform svg to react component","keywords":["babel","babel-plugin","react","react-svg-loader","svg","webpack","webpack-loader"],"homepage":"https://github.com/boopathi/react-svg-loader/tree/master/packages/babel-plugin-react-svg","bugs":{"url":"https://github.com/boopathi/react-svg-loader/issues"},"repository":{"type":"git","url":"git+https://github.com/boopathi/react-svg-loader.git"},"license":"MIT","author":{"name":"boopathi"},"main":"lib/index.js","peerDependencies":{"@babel/plugin-syntax-jsx":"^7.2.0"},"engines":{"node":">=8"},"gitHead":"cf2ffcea04be8e008ef01e5710e43d3fc76cfdf2","_id":"babel-plugin-react-svg@3.0.3","_nodeVersion":"12.0.0","_npmVersion":"lerna/3.14.1/node@v12.0.0+x64 (darwin)","dist":{"integrity":"sha512-Pst1RWjUIiV0Ykv1ODSeceCBsFOP2Y4dusjq7/XkjuzJdvS9CjpkPMUIoO4MLlvp5PiLCeMlsOC7faEUA0gm3Q==","shasum":"7da46a0bd8319f49ac85523d259f145ce5d78321","tarball":"https://registry.npmjs.org/babel-plugin-react-svg/-/babel-plugin-react-svg-3.0.3.tgz","fileCount":6,"unpackedSize":9624,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc9WImCRA9TVsSAnZWagAAlHQP/0q67xhvYzhy8KUhIRS4\nIq+C3HJFgfZkU9XZVucXlD1jWB9Yd9suhIyXkzgES81/yCGd7ObXYsyPdgnl\nNkAYbVJiBUYjmqiKE6TTM/fCF9u305+nyJDnGAlVTMtcT4lOj7gulB9WZrGV\nI0oU6rAXVYcBSP9ecbVVHYWtFRBtQyZdBn38XtuSvgXD2dcyqarsCWAbvKTB\ntutR2xEZSQYLI14o6/6EK8c1namXsTfrY5C7zh33RwmiJfXZc7dHwk8Semmi\nWHtk0qqBwIeHbYKxRvtyK8FR19zCUBbho/dhrdylbEmbN/mqxhkdaoBU3WFw\naD0/EHp/p3BQKYLwXuYQeKVgO8kVZvNczczV5puLs4/AFnCiXyyGmtlGVEKf\nDPaBzLeuuceeaF8VakDdyNHkDWUqDpQqmH4oCo2RSm2ng2ru5u1Mcd3d6gVs\ntqU5HZvMWsJU/2RzUNvtGkZ4GRFypYeam1+PYM4Jx/yKaLj6AH5xOMJvw6Rs\nB4ppQEUcXqAwAO5oLcvXYHlJZtHc+YOtSwPgidCM/S0uwprLBpzHK6jFQZ73\nkAayBb6KSv4E1j5LPpwtXg5pxFxVz7yMtJwWVsKgVnsbMuJ2O5sJwqSmfNl9\ngv2BnjuPNDUgH99ne6VsfhtOo/5LRiYMEnKAN7PnoCcqiOiXR/WMZqTa7v4i\n6f/g\r\n=OSyo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICzg/lKFU+PivVHhVXSD6L8Z9TLoE8xs/xbKW/D57gIrAiAijNLRrGnUpcdgPAeu2NtPalzHxhl9sYWT8KgHI8U0Uw=="}]},"maintainers":[{"name":"boopathi","email":"me@boopathi.in"}],"_npmUser":{"name":"boopathi","email":"me@boopathi.in"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/babel-plugin-react-svg_3.0.3_1559585318100_0.630870509948162"},"_hasShrinkwrap":false},"3.0.4-alpha.3":{"name":"babel-plugin-react-svg","version":"3.0.4-alpha.3","description":"Babel plugin to transform svg to react component","keywords":["babel","babel-plugin","react","react-svg-loader","svg","webpack","webpack-loader"],"homepage":"https://github.com/boopathi/react-svg-loader/tree/master/packages/babel-plugin-react-svg","bugs":{"url":"https://github.com/boopathi/react-svg-loader/issues"},"repository":{"type":"git","url":"git+https://github.com/boopathi/react-svg-loader.git"},"license":"MIT","author":{"name":"boopathi"},"main":"lib/index.js","peerDependencies":{"@babel/plugin-syntax-jsx":"^7.2.0"},"engines":{"node":">=8"},"gitHead":"0d2beda61aff7963b4ec34effe274ed6bf006abd","readme":"# babel-plugin-react-svg\n\nA plugin that converts svg to a react component. Used in [react-svg-loader](/packages/react-svg-loader)\n\n## Install\n\n```sh\nnpm i babel-plugin-react-svg --save-dev\n\n# or with yarn\n\nyarn add babel-plugin-react-svg --dev\n```\n\n## Example\n\nInput SVG:\n\n```html\n<svg class=\"foo\" style='text-align: center; width: 100px' pointer-events=\"stroke\">\n  <circle cx=\"50\" cy=\"50\" r=\"25\" style=\"text-align: center;\" stroke-width=\"5\" />\n</svg>\n```\n\nOutput React Component:\n\n```js\nimport React from \"react\";\nexport default ({ styles = {}, ...props}) => <svg\n  className={styles[\"foo\"] || \"foo\"}\n  style={{ textAlign: \"center\", width: \"100px\" }}\n  pointerEvents=\"stroke\"\n  {...props}>\n    <circle cx=\"50\" cy=\"50\" r=\"25\" style={{textAlign: \"center\"}} strokeWidth=\"5\" />\n</svg>;\n```\n\n## Transformations\n\nGoing from bottom up, the following transformations are applied and the same can be checked in the partly annotated source - [babel-plugin](src/plugin.js)\n\n#### 1. Hyphenated attributes to camelCase\n\n```html\n<svg pointer-events=\"none\">\n  <path stroke-width=\"5\"/>\n</svg>\n```\n\nis transformed to\n\n```html\n<svg pointerEvents=\"none\">\n  <path strokeWidth=\"5\"/>\n</svg>\n```\n\n#### 2. Style attr string to object\n\nReact expects style attribute value to be an object. Also, Hyphenated style names are converted to camel case.\n\n```html\n<svg style=\"text-align: center\">\n  <circle style=\"width: 10px\"/>\n</svg>\n```\n\nis transformed to\n\n```html\n<svg style={{textAlign: 'center'}}>\n  <circle style={{width: '10px'}}/>\n</svg>\n```\n\n#### 3. Propagate props to root element\n\nThe props passed to the output component is passed on to the root SVG node and the props already defined are overridden by the props passed.\n\n```html\n<svg width=\"50\">\n  ...\n</svg>\n```\n\nis transformed to\n\n```html\n<svg width=\"50\" {...props}>\n  ...\n</svg>\n```\n\n#### 4. class to className & class values to styles prop\n\n```html\n<svg class=\"foo bar\"/>\n```\n\nis transformed to\n\n```jsx\n<svg className={ (styles[\"foo\"] || \"foo\") + \" \" + (styles[\"bar\"] || \"bar\") }>\n```\n\n#### 5. export React.Component\n\nThe loader should now export the svg component. And this is done by wrapping it in an ArrowFunctionExpression.\n\n```html\n<svg>...</svg>\n```\n\nis transformed to\n\n```js\nimport React from 'react';\nexport default ({ styles = {}, ...props }) => <svg {...props}>...</svg>;\n```\n\n## Assumptions and Other gotchas\n\n+ Root element is always `<svg>`\n+ SVG is optimized using SVGO\n\n## LICENSE\n\n[MIT](https://github.com/boopathi/react-svg-loader/blob/master/LICENSE)\n","readmeFilename":"README.md","_id":"babel-plugin-react-svg@3.0.4-alpha.3","_nodeVersion":"12.6.0","_npmVersion":"lerna/3.15.0/node@v12.6.0+x64 (linux)","dist":{"integrity":"sha512-8vsz3vRfdGdy2ymzZrpUX6LrJUBUbZR9R+eu30NXnXzdgpkaQXHBBxX0DxDTY5gb99kgBZnJnB8Wf+WsIVtfgA==","shasum":"e54392439c4b85df5a8cb993bd58c49296721825","tarball":"https://registry.npmjs.org/babel-plugin-react-svg/-/babel-plugin-react-svg-3.0.4-alpha.3.tgz","fileCount":15,"unpackedSize":16652,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdJ6XkCRA9TVsSAnZWagAA4soP/jBjbinzjho63w2RS4xt\nWAD5SCwNJW+u+Ilhd1yj3ucL60DzKy2Tp7itd5aUXolHq8zc50VupONyz6Bl\n2uX2BVZZwt/qAC6vO9z1Ngbps4rYdOgBHHlwlluwbwaDwb8XY4bewpdf9X0/\n22vetbC3QUq/MEDHAcZATR1dvgAqryjWhNN2rfhbBrblNnbBC4+d6T/DbT4M\nxFJD5gH0qPir9K7ftvlfvz3221s51Z1GJf6vBQSQq7RzR2WYnTScd+dNU/3m\nwzFsSfhqsIL4BaR9Bc3QYeSqhfIu5x8zEUHY4Dt1B72J+HITdzJJvzCeulbX\njlY9LLTug/+59rNaOPMmZwMhngDV/UV2LhtkA2LmLeo6Am6KsW6GexE688ie\nyWTKiCozuvL8pFv1kexpc0aZydaarpAGT258tGxVOKMQ6Xx0HJqI2kLER3wB\nJaMv/r3vypEZBLUKstcR3U4jJuQf9I381iTdlfVXEd+pxCJYRnHtB9hzYnLd\n+VoABHPkhSsq+DrPiquVcjduelY/KVzoycruWiRLro08+v9D4YAZNjEe5V5Z\nxTo+tq/BMGfnhtFpB1Opm/v0AiLMovsh7otP4BTYzFOPmN+mgm/tvHncHu9e\nYYmM8dvhCNy0rx9FcRi1Q61/gTxnJ66PaHrLPOTYqKtyzfLhS2PxAoq+qL0g\n3m21\r\n=tGt1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHQJMrxg5XDvPETDH+L4Hz1b1XKBgbKSdkyEhXZ4SMKZAiEAveSyBxoKjlGqMI2f9zo+Q4EmMvcdkapSunZUyOQ6UBg="}]},"maintainers":[{"name":"boopathi","email":"me@boopathi.in"}],"_npmUser":{"name":"boopathi","email":"me@boopathi.in"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/babel-plugin-react-svg_3.0.4-alpha.3_1562879459681_0.5126222297496912"},"_hasShrinkwrap":false}},"readme":"","maintainers":[{"name":"boopathi","email":"me@boopathi.in"}],"time":{"modified":"2022-04-11T16:41:41.070Z","created":"2017-10-11T10:47:08.548Z","0.0.0":"2017-10-11T10:47:08.548Z","2.0.0-alpha.4":"2017-10-11T13:52:25.687Z","2.0.0":"2017-10-11T15:52:19.403Z","2.1.0":"2017-10-12T23:10:29.771Z","2.2.0-alpha.58aa6b3c":"2017-11-27T19:07:46.643Z","2.2.0-nightly.58aa6b3c":"2017-11-27T19:28:39.056Z","2.2.0-alpha.a1496904":"2017-11-27T22:36:48.169Z","2.2.0-alpha.52f0a7dd":"2017-11-28T10:36:38.107Z","2.2.0-alpha.038ff855":"2017-12-28T21:44:44.661Z","2.2.0-alpha.10f9a762":"2018-01-05T17:36:10.626Z","2.2.0-alpha.02daccb2":"2018-02-22T17:21:16.615Z","2.2.0-alpha.b8e3c6d5":"2018-02-28T20:29:14.826Z","2.2.0-alpha.90436959":"2018-03-17T23:09:35.275Z","2.1.1-alpha.36":"2019-02-13T03:22:17.376Z","3.0.0":"2019-05-03T07:33:18.618Z","3.0.1":"2019-05-06T08:27:32.052Z","3.0.3":"2019-06-03T18:08:38.288Z","3.0.4-alpha.3":"2019-07-11T21:10:59.815Z"},"keywords":["babel","babel-plugin","react","react-svg-loader","svg","webpack","webpack-loader"],"author":{"name":"boopathi"},"license":"MIT","readmeFilename":"","description":"Babel plugin to transform svg to react component","homepage":"https://github.com/boopathi/react-svg-loader/tree/master/packages/babel-plugin-react-svg","repository":{"type":"git","url":"git+https://github.com/boopathi/react-svg-loader.git"},"bugs":{"url":"https://github.com/boopathi/react-svg-loader/issues"}}