{"_id":"@benwiley4000/svg-react-loader","_rev":"1-3702bb4a3c8505e52f311a1e19cc9f27","name":"@benwiley4000/svg-react-loader","dist-tags":{"latest":"0.4.5-fix-vulnerabilities"},"versions":{"0.4.5-fix-vulnerabilities":{"name":"@benwiley4000/svg-react-loader","version":"0.4.5-fix-vulnerabilities","description":"A Webpack Loader to turn SVGs into React Components","main":"./lib/loader.js","directories":{"test":"test"},"scripts":{"test":"./bin/test.sh unit","karma":"./bin/test.sh karma"},"repository":{"type":"git","url":"git+https://github.com/jhamlet/svg-react-loader.git"},"keywords":["webpack","loader","react","svg","component"],"author":{"name":"Jerry Hamlet","email":"jerry@hamletink.com"},"license":"MIT","bugs":{"url":"https://github.com/jhamlet/svg-react-loader/issues"},"homepage":"https://github.com/jhamlet/svg-react-loader#readme","dependencies":{"css":"2.2.3","loader-utils":"1.1.0","ramda":"0.21.0","rx":"4.1.0","traverse":"0.6.6","xml2js":"0.4.17"},"devDependencies":{"babel-core":"6.11.4","babel-loader":"6.2.4","babel-plugin-object-rest-spread":"0.0.0","babel-plugin-transform-object-rest-spread":"6.23.0","babel-plugin-transform-runtime":"6.23.0","babel-preset-modern-browsers":"9.0.2","babel-preset-react":"6.11.1","babel-register":"6.24.1","enzyme":"2.4.1","karma":"3.0.0","karma-chrome-launcher":"1.0.1","karma-cli":"1.0.1","karma-mocha":"1.3.0","karma-mocha-reporter":"2.2.3","karma-sourcemap-loader":"0.3.7","karma-webpack":"3.0.1","mocha":"5.2.0","prop-types":"15.5.10","react":"15.6.1","react-addons-test-utils":"^15.6.0","react-dom":"15.6.1","should":"9.0.2","webpack":"2.6.1","webpack-dev-server":"2.4.5"},"contributors":[{"name":"Jerry Hamlet","email":"jerry@hamletink.com","url":"http://hamletink.com/"}],"gitHead":"0fe109b32456eae017c33f93492898ec97ac3da3","_id":"@benwiley4000/svg-react-loader@0.4.5-fix-vulnerabilities","_npmVersion":"6.4.1","_nodeVersion":"8.9.0","_npmUser":{"name":"benwiley4000","email":"therealbenwiley@gmail.com"},"dist":{"integrity":"sha512-00jx1jpMzzrTYCp1yEmDsiqiHWZOpYER71eJDejLcb6/Jyk64LRw3F5EKS/Ku3H5OdWXryFg0GxkzGiVoTqxCQ==","shasum":"669cc061dd4cba3783cf5bee495828fd39d4a9e0","tarball":"https://registry.npmjs.org/@benwiley4000/svg-react-loader/-/svg-react-loader-0.4.5-fix-vulnerabilities.tgz","fileCount":32,"unpackedSize":28855,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbjErBCRA9TVsSAnZWagAAxXMP/3t0ueTqkCXdOHCX+AEU\nVEDPQJIEhALje6BvAOm+1VKH4JiYZTb3mA9KX7eyRAnO3aTDj0Y5poK2O5AF\n30HxUe+x7T75zBEM1bCXXCf0vk7E1FxnAPH7oMf4ZuDXLv4gNzbSGM9KHvis\nZ5l5kuYnxNUmem2l1FPbVJ5gHRI+xFV4baRtJa0HQi6oWNtmPgLAIv3J+Idb\nORcaiN+etXxEFTH2tInqmNK5uBHQYg6zDDA/VhkPDQLJlc06R2rZI2bjKjJP\nekTjq+APmcuR5gYS8GE9FNcoVWorN+7x1phR5EfWHsG7KI587u31mq5dWxrN\nXWdtcVMps/Dm2C3Eaxbr8D9Uc7+QKaq2xfvx8v9GZMwAY+0qcpmJKNxoHFSm\nbEqtP2fzIve8iKI69JA4ZdOKe9zdYM8cj85/OcGFwMmIoe8Wlq5bxSmBMeBE\nXE/Dnyg69t1aY8ZtOT7PR3ItZGUzk0Vjxw6C11k4Kxt++MWFb1D37qe7hIOc\nbVLWdRTGLUIlk1zAdKeBr/l471LQ9UIQAZWx7mHbikeUjpCW/MJ5+thcGC/Y\nRpwyd5r9UA3WD0bxnm0Jd42kpHYxnCNEt7uRFrOe6kbpDtc2zwgB1ZrTo4b8\nCn02aVItn+GH2a6d/T8tlGGN/0M0/82PyxXYeWO0+Cf114Rc2bn71X5j1Hox\nIMo2\r\n=u1GO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHHdzPKxVWY+gYq9NDXqvDu/TyKf9LwUumY/iNhtkNAvAiEAqqXwVdBXtGFkTbUTAGaG1WH/JnB34CANyKlBaLKezGE="}]},"maintainers":[{"name":"benwiley4000","email":"therealbenwiley@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-react-loader_0.4.5-fix-vulnerabilities_1535920833094_0.4149276475089787"},"_hasShrinkwrap":false}},"time":{"created":"2018-09-02T20:40:32.933Z","0.4.5-fix-vulnerabilities":"2018-09-02T20:40:33.299Z","modified":"2022-04-04T18:28:29.103Z"},"maintainers":[{"name":"benwiley4000","email":"therealbenwiley@gmail.com"}],"description":"A Webpack Loader to turn SVGs into React Components","homepage":"https://github.com/jhamlet/svg-react-loader#readme","keywords":["webpack","loader","react","svg","component"],"repository":{"type":"git","url":"git+https://github.com/jhamlet/svg-react-loader.git"},"contributors":[{"name":"Jerry Hamlet","email":"jerry@hamletink.com","url":"http://hamletink.com/"}],"author":{"name":"Jerry Hamlet","email":"jerry@hamletink.com"},"bugs":{"url":"https://github.com/jhamlet/svg-react-loader/issues"},"license":"MIT","readme":"SVG to React Loader\n===================\n\n> A Webpack Loader to turn SVGs into React Components\n\nSummary\n-------\n\nA webpack loader allowing for inline usage of a SVG as a React component, or for\ncomposing individual SVGs into larger ones.\n\nThe latest version has been refactored to allow for receiving an SVG/XML string\nor an JSON [object-tree](#object-tree-api) representing an SVG. This allows for\nother loaders before `svg-react` to alter/update/remove nodes before reaching\n`svg-react`.\n\nIn addition, the new [filters](#filters) API allows for additional ways to\nmodify the generated SVG Component. This allows `svg-react` to also be used as a\npre-loader (with `filters` and `raw=true` params) for modifying SVGs before they\nare acted on by the loader version of `svg-react`.\n\n### Notes\n\n> As of version 0.4.0, `svg-react-loader` no longer requires `babel` to\n> transpile the generated code. Everything is returned as an ES5-7 compatible\n> module, and the component is just a\n> [function](https://facebook.github.io/react/docs/reusable-components.html#stateless-functions).\n> With that, it only works with React@>=0.14\n\n\nInstallation\n------------\n\n~~~\n% npm install --save-dev svg-react-loader\n~~~\n\n\nUsage\n-----\n\nES6+ (Assuming a `babel-loader` is used on `/\\.jsx?$/` files):\n\n~~~js\nimport React, { Component } from 'react';\nimport Icon from 'svg-react-loader?name=Icon!../svg/my-icon.svg';\n\nexport default class MyIcon extends Component {\n    render () {\n        return <Icon className='normal' />;\n    }\n};\n~~~\n\nES5\n\n~~~js\nvar React = require('react');\nvar Icon = require('svg-react-loader?name=Icon!../svg/my-icon.svg');\n\nmodule.exports = React.createClass({\n    render () {\n        return React.createElement(Icon, { className: 'normal' });\n    }\n});\n~~~\n\n\nDocumentation\n-------------\n\n### Query Params\n\nQuery params can be used on the loader path, or on the resource's path. Those on\nthe resource will override those given for the loader.\n\n* `name`: `displayName` to use for the compiled component. Defaults to using the\n  resource's file name, capitalized and camelCased. ex. `\"?name=MyIcon\"`\n\n* `tag`: Override the root-level tag name.\n\n* `props`: Attributes to apply to the root-level tag. If a certain attribute is\n  already assigned to the tag, the value here will override that.\n\n* `attrs`: Alias for `props`\n\n* `filters`: If given on the query string, it is a list of module names, or\n  filepaths, to load as [filter functions](#filters). If given in the webpack\n  config as a `svgReactLoader.filters`, or as `query.filters` for the loader\n  configuration object, it is an array of functions.\n\n* `classIdPrefix`: A string to prefix all class or id selectors in found style\n  blocks, or within `className` properties, with. If indicated without a string,\n  the file's basename will be used as a prefix.\n\n* `raw`: If set to `true` will output the parsed object tree repesenting the SVG\n  as a JSON string. Otherwise, returns a string of JavaScript that represents\n  the component's module.\n\n* `propsMap`: If given on the query string, it is an array of colon separated\n  `propname:translatedname` pairs. If given in the webpack configuration as\n  `svgReactLoader.propsMap`, or in an object query for the loader configuration,\n  is a simple object of `propname: 'translatedname'`\n\n* `xmlnsTest`: A regular expression used to remove non-supported xmlns\n  attributes. Default is `/^xmlns(Xlink)?$/`\n\n* `titleCaseDelim`: A regular expression used to generate component's name. It\n  would be ignore if `name` was set.\n  Default is `/[._-]/`\n\n#### Examples\n\n~~~js\n// webpack configuration\nmodule: {\n    loaders: [\n        {\n            test: /\\.svg$/,\n            exclude: /node_modules/,\n            loader: 'svg-react-loader',\n            query: {\n                classIdPrefix: '[name]-[hash:8]__',\n                filters: [\n                    function (value) {\n                        // ...\n                        this.update(newvalue);\n                    }\n                ],\n                propsMap: {\n                    fillRule: 'fill-rule',\n                    foo: 'bar'\n                },\n                xmlnsTest: /^xmlns.*$/\n            }\n        }\n    ]\n}\n\n// Resource paths\nimport MyIcon from 'svg-react-loader?name=MyIcon!../svg/icon.svg';\nimport MyIcon from 'svg-react-loader?tag=symbol!../svg/icon.svg';\nimport MyIcon from 'svg-react-loader?tag=symbol&props[]=id:my-icon?../svg/icon.svg';\nimport MyIcon from 'svg-react-loader?filters[]=./my-filter.js!../svg/icon.svg';\n~~~\n\n\n### Object Tree API\n\nInternally, `svg-react-loader` converts the given SVG/XML into an object tree\nthat looks something like:\n\n~~~js\n{\n    \"tagname\": \"svg\",\n    \"props\": {\n        \"xmlns\": \"http://www.w3.org/2000/svg\",\n        \"xmlns:xlink\": \"http://www.w3.org/1999/xlink\",\n        \"viewBox\": \"0 0 16 16\",\n        \"enable-background\": \"new 0 0 16 16\",\n        \"xml:space\": \"preserve\"\n    },\n    \"children\": [\n        {\n            \"tagname\": \"rect\",\n            \"props\": {\n                \"x\": \"0\",\n                \"y\": \"0\",\n                \"width\": \"16\",\n                \"height\": \"16\",\n                \"fill\": \"#fff\"\n            }\n        },\n        {\n            \"tagname\": \"text\",\n            \"children\": [\"Foobar\"]\n        }\n    ]\n}\n~~~\n\nIt then uses a variety of [filters](#filters) to modify the tree to conform to\nhow `React` expects to see props, styles, etc...\n\nIf `svg-react-loader` receives a JSON string instead of string of SVG/XML, it\nexpects to receive it in the above format (i.e.: objects with properties\n'tagname', 'props', and 'children'). Children is always an array (unless empty),\nand children can be objects with the mentioned props, or a plain string (for\ntext nodes).\n\n### Filters\n\nA filter is just a function that accepts one value, and it has the same `this`\ncontext as the [traverse](https://www.npmjs.com/package/traverse) API.\n\n`svg-react-loader` is really just a series of filters applied to a parsed\nSVG/XML, or JSON, string and then regenerated as a string to form a React\nfunctional component.\n\nReview [lib/sanitize/filters](lib/sanitize/filters) for some examples.\n\nReport an Issue\n---------------\n\n* [Bugs](http://github.com/jhamlet/svg-react-loader/issues)\n* Contact the author: <jerry@hamletink.com>\n\n\nLicense\n-------\n\n[MIT](./LICENSE)\n","readmeFilename":"README.md"}