{"id":15641625,"url":"https://github.com/jacobmischka/gatsby-plugin-react-svg","last_synced_at":"2025-04-06T04:13:08.080Z","repository":{"id":51851351,"uuid":"98118445","full_name":"jacobmischka/gatsby-plugin-react-svg","owner":"jacobmischka","description":"Adds svg-react-loader to gatsby webpack config","archived":false,"fork":false,"pushed_at":"2024-02-12T17:20:48.000Z","size":41,"stargazers_count":69,"open_issues_count":20,"forks_count":21,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-30T03:05:35.842Z","etag":null,"topics":["gatsby","hacktoberfest","react-svg"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/gatsby-plugin-react-svg","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/jacobmischka.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":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-07-23T18:50:06.000Z","updated_at":"2024-09-20T18:59:48.000Z","dependencies_parsed_at":"2024-06-18T13:36:36.279Z","dependency_job_id":null,"html_url":"https://github.com/jacobmischka/gatsby-plugin-react-svg","commit_stats":{"total_commits":32,"total_committers":13,"mean_commits":"2.4615384615384617","dds":0.53125,"last_synced_commit":"7f08a3b9a78f5748bb2f2381bd796178395cde4d"},"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jacobmischka%2Fgatsby-plugin-react-svg","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jacobmischka%2Fgatsby-plugin-react-svg/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jacobmischka%2Fgatsby-plugin-react-svg/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jacobmischka%2Fgatsby-plugin-react-svg/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jacobmischka","download_url":"https://codeload.github.com/jacobmischka/gatsby-plugin-react-svg/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247430878,"owners_count":20937874,"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":["gatsby","hacktoberfest","react-svg"],"created_at":"2024-10-03T11:43:57.043Z","updated_at":"2025-04-06T04:13:08.062Z","avatar_url":"https://github.com/jacobmischka.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# gatsby-plugin-react-svg [![npm version](https://badge.fury.io/js/gatsby-plugin-react-svg.svg)](https://badge.fury.io/js/gatsby-plugin-react-svg)\n\nAdds [`svg-react-loader`](https://github.com/jhamlet/svg-react-loader) to gatsby webpack config.\n\n\u003e **Note**: the plugin can **remove `SVG`s from the built-in `url-loader` config** in case invalid configuration.\n\n## Install\n\n`npm install --save gatsby-plugin-react-svg`\n\n## How to use\n\n```js\n// In your gatsby-config.js\n\nplugins: [\n  {\n    resolve: \"gatsby-plugin-react-svg\",\n    options: {\n      rule: {\n        include: /assets/ // See below to configure properly\n      }\n    }\n  }\n];\n```\n\n## Configuration\n\nThe `rule` plugin option can be used to pass [rule options](https://webpack.js.org/configuration/module/#rule). If either `include` or `exclude` options are present, `svg-react-loader` will use them and `url-loader` will be re-enabled with the inverse.\n\nThe following configuration uses `svg-react-loader` to process SVGs from a path matching `/assets/`, and `url-loader` to process SVGs from everywhere else.\n\n```js\n{\n  resolve: 'gatsby-plugin-react-svg',\n  options: {\n    rule: {\n      include: /assets/\n    }\n  }\n}\n```\n\nFrom now on you can import SVGs and use them as Components:\n\n```js\nimport Icon from \"./path/assets/icon.svg\";\n\n// ...\n\n\u003cIcon /\u003e;\n```\n\nAnother common configuration:\n\n- name SVGs used in React components like `something.inline.svg` and process them with `svg-react-loader`\n- name other SVGs (e.g. used in css/scss) `something.svg` and process them with the default `url-loader`\n\n```js\n{\n  resolve: 'gatsby-plugin-react-svg',\n  options: {\n    rule: {\n      include: /\\.inline\\.svg$/\n    }\n  }\n}\n```\n\nIn React components:\n\n```js\nimport Something from \"./path/something.inline.svg\";\n\n// ...\n\n\u003cSomething /\u003e;\n```\n\nIn styles file:\n\n```css\n.header-background {\n  background-image: url(./path/something.svg);\n}\n```\n\n## Using with typescript\n\nTo use SVGs with Typescript, create a custom type definition like this:\n\n```typescript\ndeclare module \"*.svg\" {\n  const content: any;\n  export default content;\n}\n```\n\nMake sure the file is contained in your `tsconfig.json` `include`.\n\n### SVG-React-Loader options\n\nAny of the svg-react-loader [query parameters](https://github.com/jhamlet/svg-react-loader#query-params) can be passed down via the webpack config by including an `options` prop within the `rule` prop.\n\n```js\n// In your gatsby-config.js\n\nplugins: [\n  {\n    resolve: \"gatsby-plugin-react-svg\",\n      options: {\n        rule: {\n          include: /\\.inline\\.svg$/,\n          options: {\n            tag: \"symbol\",\n            name: \"MyIcon\",\n            props: {\n              className: \"my-class\",\n              title: \"example\"\n            },\n            filters: [value =\u003e console.log(value)]\n          }\n        }\n      }\n  }\n];\n```\nThey can also be defined at the import level:\n\n```js\n  import Fork from \"-!svg-react-loader?props[]=className:w-4 h-4!../components/Icons/Fork.inline.svg\";\n```\n\n### Removing svg props (filters)\nUnwanted SVG props can be removed with filters. Since filters are quite complex this plugin adds a simple key `omitKeys` to allow end users to quickly remove props that are problematic from their svg files.\n\n```js\n{\n  resolve: `gatsby-plugin-react-svg`,\n  options: {\n    rule: {\n      include: /images\\/.*\\.svg/,\n      omitKeys: ['xmlnsDc', 'xmlnsCc', 'xmlnsRdf', 'xmlnsSvg', 'xmlnsSodipodi', 'xmlnsInkscape']\n      ///OR\n      filters: [(value) =\u003e { console.log(value); }]\n    }\n  }\n},\n```\n\n## Troubleshooting\n\n### I get \"InvalidCharacterError\" overlay in my browser during development\n\nExample of this error:\n```bash\nInvalidCharacterError: Failed to execute 'createElement' on 'Document':\nThe tag name provided ('data:image/svg+xml; ...\n```\n\nIt's likely that you use SVG in your React component, that is processed by `url-loader` instead of `svg-react-loader` due to incorrect configuration.\n\n### I get endless spinner (with an infinite loop in the background) in my browser during development\n\nIt's likely that some of your SVGs used in css/sass files are processed by `svg-react-loader` instead of `url-loader` due to incorrect configuration.\n\n### I get error \"Module parse failed\" in console\n\nExample of this error:\n```bash\nERROR in ./src/images/some-image.png 1:0\nModule parse failed: Unexpected character '�' (1:0)\n```\n\nIn case you see such error, it's likely that you configured `exclude/include` rule options incorrectly. Please check configuration section above.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjacobmischka%2Fgatsby-plugin-react-svg","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjacobmischka%2Fgatsby-plugin-react-svg","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjacobmischka%2Fgatsby-plugin-react-svg/lists"}