svg-loader

0.0.2 verified Sat Apr 25 auth: no javascript

A simple webpack loader for importing SVG files directly as inline SVG strings or elements. Version 0.0.2 is the latest; this is an unofficial, likely low-maintenance loader. It provides a basic alternative to more feature-rich loaders like svg-inline-loader or raw-loader. Bundles as inline SVG, but lacks advanced optimization and caching features. Consider svgo-loader for optimization or @svgr/webpack for React components instead.

Common errors

error Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type. ↓

cause Webpack is not configured to use svg-loader for .svg files.

fix

Add a rule for /\\\.svg$/ with 'svg-loader' in webpack config.

error Cannot find module 'svg-loader' ↓

cause The package is not installed or not found in node_modules.

fix

Run 'npm install svg-loader' or 'yarn add svg-loader'.

Warnings

breaking The loader expects SVGs to be valid XML and may fail silently if not. ↓

fix Ensure SVGs are well-formed; use additional validation or preprocessing.

gotcha Loader returns SVG as a string, not a parsed DOM element or React component. ↓

fix Use dangerouslySetInnerHTML for HTML rendering, or switch to @svgr/webpack for React usage.

gotcha No optimization or cleanup is performed; SVGs with embedded JavaScript may execute. ↓

fix Sanitize SVGs before use, or switch to a loader with SVGO integration like svgo-loader.

Install

npm install svg-loader

yarn add svg-loader

pnpm add svg-loader

Imports

default
wrong
```
const svgContent = require('./file.svg');
```
correct
```
import svgContent from './file.svg';
```
Works with webpack's SVG loader; returns the SVG as a string. Ensure loader is configured in webpack config.
named export
wrong
```
import ReactComponent from './file.svg';
```
correct
```
import { ReactComponent } from './file.svg';
```
If you want to use SVG as React component, use @svgr/webpack instead. This loader does not provide ReactComponent export.
no default import from CommonJS
wrong
```
const { default: svgContent } = require('./file.svg');
```
correct
```
const svgContent = require('./file.svg');
```
When using require(), the SVG content is returned directly as a string.

Quickstart

Configures webpack to use svg-loader for SVG files; then import SVG files to get their content as strings.

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: 'svg-loader'
      }
    ]
  }
};