SVG Inline Loader

0.8.2 verified Sat Apr 25 auth: no javascript maintenance

A Webpack loader that inlines SVG files as modules while removing unnecessary metadata (e.g., from Adobe Suite or Sketch). The latest stable version is 0.8.2, last released in 2017. It offers query options to strip tags, attributes, and add CSS class/id prefixes to avoid collisions. Key differentiators: built-in sanitization of exported SVGs, configurable removal and prefixing, and seamless integration with Webpack 1/2. However, it is unmaintained and does not support Webpack 5; alternatives like @svgr/webpack are recommended for modern projects.

Common errors

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

cause Webpack is trying to parse the SVG as JavaScript because no loader is configured for SVG files.

fix

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

error Cannot find module 'svg-inline-loader' ↓

cause svg-inline-loader is not installed or not in node_modules.

fix

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

error Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. ↓

cause Using Webpack 4+ with svg-inline-loader's outdated module.loaders syntax.

fix

Use module.rules instead of module.loaders: { module: { rules: [ { test: /\.svg$/, loader: 'svg-inline-loader' } ] } }

error TypeError: Cannot read property 'query' of undefined ↓

cause The loader is being used in a way that expects an options object but receives none (common in older Webpack versions).

fix

Ensure the loader is configured with an options object: { test: /\.svg$/, loader: 'svg-inline-loader', options: { ... } }

Warnings

breaking Webpack 4/5 compatibility: svg-inline-loader only supports Webpack <=3. It may break with Webpack 4+. ↓

fix Upgrade to a maintained loader like @svgr/webpack or use svg-url-loader for Webpack 5.

deprecated Loader configuration via require('!...') is deprecated. Use module.rules in webpack config instead. ↓

fix Configure the loader in webpack.config.js under module.rules. Avoid inline loader prefixes.

gotcha The removingTags option only works when removeTags is true. If omitted, tags like <title> and <desc> remain. ↓

fix Set removeTags: true in loader options for removingTags to take effect.

gotcha If you configure this loader multiple times (e.g., duplicate rules), it can cause errors or double processing. ↓

fix Ensure only one rule with test: /\.svg$/ exists in your webpack config.

Install

npm install svg-inline-loader

yarn add svg-inline-loader

pnpm add svg-inline-loader

Imports

default (loader)
wrong
```
import svgInlineLoader from 'svg-inline-loader'
```
correct
```
module.exports = { test: /\.svg$/, loader: 'svg-inline-loader' }
```
This is a Webpack loader, not a standard import. Configure in webpack.config.js via module.rules.
require (runtime usage)
wrong
```
var logo = require('./logo.svg');
```
correct
```
var logo = require('svg-inline-loader?classPrefix!./logo.svg');
```
Inline requires must include the loader prefix. Alternatively, configure in webpack rules and use normal require.
ESM import (with loader configured)
wrong
```
import logo from 'svg-inline-loader!./logo.svg';
```
correct
```
import logo from './logo.svg';
```
When the loader is configured in webpack config, a plain import works. The ! syntax is for inline requires only.

Quickstart

Webpack configuration to inline SVGs, removing common tags and attributes, and adding automatic class prefix to avoid collisions.

// webpack.config.js
module.exports = {
    module: {
        rules: [
            {
                test: /\.svg$/,
                loader: 'svg-inline-loader',
                options: {
                    removeTags: true,
                    removingTags: ['title', 'desc', 'defs', 'style'],
                    removeSVGTagAttrs: true,
                    classPrefix: true
                }
            }
        ]
    }
};