{"id":20054,"library":"gatsby-plugin-svgr-loader","title":"gatsby-plugin-svgr-loader","description":"A Gatsby plugin that integrates @svgr/webpack to allow importing SVG files as React components. Stable version 0.1.0, last updated in 2019, no recent releases. It replaces gatsby-plugin-react-svg with a different underlying SVGR implementation. Supports rule-based include/exclude to control which SVGs are processed by SVGR vs url-loader. Minimal configuration needed. Not actively maintained, but functional for compatible Gatsby versions.","status":"maintenance","version":"0.1.0","language":"javascript","source_language":"en","source_url":"https://github.com/matheusdsmartins/gatsby-plugin-svgr-loader","tags":["javascript","gatsby","svg","react","gatsby-plugin"],"install":[{"cmd":"npm install gatsby-plugin-svgr-loader","lang":"bash","label":"npm"},{"cmd":"yarn add gatsby-plugin-svgr-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add gatsby-plugin-svgr-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"required for SVG transformation","package":"@svgr/webpack","optional":false}],"imports":[{"note":"Options must be wrapped in a `rule` object; `include` cannot be at top level.","wrong":"{\n  resolve: \"gatsby-plugin-svgr-loader\",\n  options: { include: /assets/ }\n}","symbol":"plugin in gatsby-config","correct":"{\n  resolve: 'gatsby-plugin-svgr-loader',\n  options: { rule: { include: /assets/ } }\n}"},{"note":"Default import works with SVGR; require may not work in all Gatsby setups.","wrong":"const Icon = require('./assets/icon.svg');","symbol":"React component from SVG","correct":"import Icon from './assets/icon.svg';"},{"note":"Use `.inline.svg` naming convention and corresponding include regex to avoid url-loader conflicts.","wrong":"import Something from './path/something.svg';","symbol":"Inline SVG pattern","correct":"import Something from './path/something.inline.svg';"}],"quickstart":{"code":"// Install\nnpm install gatsby-plugin-svgr-loader\n\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-plugin-svgr-loader',\n      options: {\n        rule: {\n          include: /\\.inline\\.svg$/\n        }\n      }\n    }\n  ]\n}\n\n// In a React component\nimport React from 'react';\nimport InlineIcon from './assets/icon.inline.svg';\n\nconst App = () => <InlineIcon />;\nexport default App;","lang":"javascript","description":"Configures the plugin to treat .inline.svg files as React components via SVGR, while other SVGs remain handled by url-loader."},"warnings":[{"fix":"Consider using gatsby-plugin-react-svg or manual SVGR configuration.","message":"Plugin no longer maintained; may not work with Gatsby v3+ due to webpack config changes.","severity":"deprecated","affected_versions":">=0.1.0"},{"fix":"Always provide either `include` or `exclude` rule to control which SVGs go to SVGR.","message":"The plugin removes SVGs from url-loader's default config for matched patterns; may break SVG imports in CSS if not carefully configured.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Pin @svgr/webpack to a version compatible with your Gatsby setup.","message":"SVGR version mismatch can cause silent failures or bundle size bloat if @svgr/webpack version conflicts with Gatsby's dependencies.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run: npm install @svgr/webpack","cause":"@svgr/webpack not installed; it's a peer dependency not auto-installed.","error":"Error: Cannot find module '@svgr/webpack'"},{"fix":"Use: options: { rule: { include: /regex/ } }","cause":"Options passed incorrectly, e.g., `include` at top level instead of inside `rule`.","error":"Error: [gatsby-plugin-svgr-loader] `rule` option must be an object with `include` or `exclude`."},{"fix":"Ensure `rule.include` or `rule.exclude` is set correctly to avoid conflicts.","cause":"SVG file is being processed by multiple loaders; plugin didn't exclude it from url-loader properly.","error":"(Webpack) Module parse failed: Unexpected token on SVG file"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}