{"id":13677846,"url":"https://github.com/jhamlet/svg-react-loader","last_synced_at":"2025-05-15T10:05:34.780Z","repository":{"id":36434623,"uuid":"40739633","full_name":"jhamlet/svg-react-loader","owner":"jhamlet","description":"Webpack SVG to React Component Loader","archived":false,"fork":false,"pushed_at":"2023-06-10T22:10:22.000Z","size":436,"stargazers_count":559,"open_issues_count":53,"forks_count":83,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-14T16:56:11.037Z","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/jhamlet.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"AUTHORS","dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-08-14T23:15:53.000Z","updated_at":"2024-05-30T05:02:41.000Z","dependencies_parsed_at":"2024-06-18T12:18:04.732Z","dependency_job_id":"cffbbf90-3f88-4771-9822-77fcb3237607","html_url":"https://github.com/jhamlet/svg-react-loader","commit_stats":{"total_commits":89,"total_committers":16,"mean_commits":5.5625,"dds":0.2134831460674157,"last_synced_commit":"4eb98ac9fbc22ae72bdd0e90d57051adf771c7b6"},"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhamlet%2Fsvg-react-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhamlet%2Fsvg-react-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhamlet%2Fsvg-react-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhamlet%2Fsvg-react-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jhamlet","download_url":"https://codeload.github.com/jhamlet/svg-react-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254319718,"owners_count":22051072,"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-08-02T13:00:47.916Z","updated_at":"2025-05-15T10:05:34.703Z","avatar_url":"https://github.com/jhamlet.png","language":"JavaScript","readme":"SVG to React Loader\n===================\n\n\u003e 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\u003e As of version 0.4.0, `svg-react-loader` no longer requires `babel` to\n\u003e transpile the generated code. Everything is returned as an ES5-7 compatible\n\u003e module, and the component is just a\n\u003e [function](https://facebook.github.io/react/docs/reusable-components.html#stateless-functions).\n\u003e With that, it only works with React@\u003e=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 \u003cIcon className='normal' /\u003e;\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#### Webpack 1\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\u0026props[]=id:my-icon?../svg/icon.svg';\nimport MyIcon from 'svg-react-loader?filters[]=./my-filter.js!../svg/icon.svg';\n~~~\n\n#### Webpack 2-3\n\n~~~js\n// webpack configuration\nmodule: {\n    loaders: [\n        {\n            test: /\\.svg$/,\n            exclude: /node_modules/,\n            use: {\n                loader: 'svg-react-loader',\n                options: {\n                    tag: 'symbol',\n                    attrs: {\n                        title: 'example',\n                    },\n                    name: 'MyIcon',\n                },\n            },\n        }\n    ]\n}\n\n// Resource paths\nimport MyIcon from '../svg/icon.svg';\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: \u003cjerry@hamletink.com\u003e\n\n\nLicense\n-------\n\n[MIT](./LICENSE)\n","funding_links":[],"categories":["Plugins"],"sub_categories":["Rspack Loaders"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjhamlet%2Fsvg-react-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjhamlet%2Fsvg-react-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjhamlet%2Fsvg-react-loader/lists"}