Registry / web-framework / svg-react-loader

svg-react-loader

library0.4.6jsnpmunverified

A Webpack loader that transforms SVG files into reusable React components. Current stable version is 0.4.6. Allows inline SVG usage as React components or composition of multiple SVGs. Supports query parameters for component naming, attribute mapping, CSS class prefixing, and custom filter functions. Does not require Babel for output (ES5-7 compatible). Works with React >=0.14. Key differentiators: supports SVG/XML string or object tree input, filter API for node modification, and works as both a loader and pre-loader.

web-framework

npm install svg-react-loader

github ↗package ↗

INSTALL

IMPORT

SIG · SVG-REACT-LOADER

svg-react-loader

web-frameworkjavascriptv0.4.6

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default import

✓ import Icon from 'svg-react-loader?name=Icon!../svg/my-icon.svg';

✗ import Icon from '../svg/my-icon.svg';

Loader syntax is required: 'svg-react-loader?params!filepath'. Without the loader prefix, webpack won't process the SVG.

CommonJS require

✓ var Icon = require('svg-react-loader?name=Icon!../svg/my-icon.svg');

✗ var Icon = require('../svg/my-icon.svg');

Same as import, must include loader prefix in the require path.

webpack config loader

✓ loader: 'svg-react-loader'

✗ loader: 'svg-inline-loader'

Use 'svg-react-loader' in webpack module rules. Other SVG loaders produce strings or URLs, not React components.

Configures webpack to load SVG files as React components, with a filter to remove fill attributes.

// webpack.config.js module.exports = { module: { rules: [ { test: /\.svg$/, exclude: /node_modules/, use: [ { loader: 'svg-react-loader', options: { classIdPrefix: '[name]-[hash:8]__', filters: [ function (value) { // Remove fill attributes if (value.attrs && value.attrs.fill) { delete value.attrs.fill; } this.update(value); } ] } } ] } ] } }; // MyComponent.js import React from 'react'; import Icon from './my-icon.svg'; export default function MyComponent() { return <Icon className="my-icon" />; }

Debug

Known issues

breakingRequires React >=0.14 (stateless function component).

fix

Upgrade React to at least 0.14. For older React versions, use svg-react-loader@0.3.x.

affects: >=0.4.0

breakingNo longer requires Babel for transpilation; module returns ES5-7 compatible code.

fix

Ensure your webpack config does not expect Babel output from this loader. Adjust transpilation pipeline if needed.

affects: >=0.4.0

gotchaLoader must be used with '!' in import path or configured in webpack module rules.

fix

Always prefix SVG imports with 'svg-react-loader?' or configure in webpack module.rules.

affects: >=0.0.0

deprecatedWebpack 1 style loaders array is deprecated; use module.rules instead.

fix

Use module.rules with 'use' and 'loader' options instead of 'loaders' array.

affects: >=2.0.0

gotchafilter functions must call this.update() for changes to take effect.

fix

Always invoke this.update(value) inside filter functions after modifying the SVG object tree.

affects: >=0.4.0

Errors

Common errors & fixes

Module not found: Error: Can't resolve 'svg-react-loader' in '/path/to/project'

svg-react-loader not installed or not in devDependencies.

fix

Run npm install --save-dev svg-react-loader

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

Webpack rule for .svg files is missing or loader not configured.

fix

Add a rule in webpack.config.js: { test: /\.svg$/, use: 'svg-react-loader' }

React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

Import path missing loader prefix, so webpack returns undefined instead of a React component.

fix

Change import to include loader: import Icon from 'svg-react-loader!../svg/my-icon.svg';

Cannot find module 'babel-core'

Older version (<0.4.0) required Babel; newer versions don't but project may still use old version.

fix

Upgrade svg-react-loader to >=0.4.0: npm install svg-react-loader@latest

Upgrade

Version history

0.4.6latest on npm

Audit

Dependencies

webpackrequiredThis is a webpack loader; requires webpack to be installed.

reactrequiredThe generated components require React >=0.14.

Agent activity

7 hits · last 30 days

node

Resources

githubhttps://github.com/jhamlet/svg-react-loader ↗

packagehttps://www.npmjs.com/package/svg-react-loader ↗