svg-inline-loader

What is svg-inline-loader?

The svg-inline-loader npm package is a Webpack loader that inlines SVG files, allowing you to import SVGs directly into your JavaScript or TypeScript files. This can be useful for manipulating SVGs with JavaScript, applying styles, or optimizing SVGs for better performance.

What are svg-inline-loader's main functionalities?

Inline SVG Import

This feature allows you to import an SVG file directly into your JavaScript or TypeScript code. The SVG content is inlined, which means it is included directly in the JavaScript bundle, allowing for easier manipulation and styling.

const mySvg = require('svg-inline-loader!./path/to/my.svg');

SVG Optimization

By configuring Webpack to use svg-inline-loader for SVG files, you can ensure that all SVGs are inlined and optimized during the build process. This can help reduce the number of HTTP requests and improve performance.

module: { rules: [ { test: /\.svg$/, use: [ 'svg-inline-loader' ] } ] }

Custom Attributes

This feature allows you to customize the behavior of the loader, such as preserving or removing certain attributes from the SVG tags. This can be useful for maintaining specific SVG properties or optimizing the SVG content further.

module: { rules: [ { test: /\.svg$/, use: [ { loader: 'svg-inline-loader', options: { removeSVGTagAttrs: false } } ] } ] }

Other packages similar to svg-inline-loader

svg-url-loader

The svg-url-loader package is another Webpack loader that inlines SVGs, but it does so by converting them to data URLs. This can be useful for embedding SVGs directly in CSS or HTML. Compared to svg-inline-loader, svg-url-loader focuses more on converting SVGs to data URLs rather than inlining them directly in JavaScript.

react-svg-loader

The react-svg-loader package is designed specifically for React applications. It transforms SVGs into React components, allowing you to use SVGs as React components directly in your JSX. This is different from svg-inline-loader, which inlines SVGs into JavaScript without converting them to React components.

svgr

SVGR is a tool that transforms SVGs into React components, similar to react-svg-loader. It provides a CLI, webpack loader, and a Node.js API for converting SVGs to React components. SVGR offers more customization options and is more feature-rich compared to svg-inline-loader, which focuses on inlining SVGs into JavaScript.

README

SVG Inline Loader for Webpack

This Webpack loader inlines SVG as module. If you use Adobe suite or Sketch to export SVGs, you will get auto-generated, unneeded crusts. This loader removes it for you, too.

Config

Simply add configuration object to module.loaders like this.

    {
        test: /\.svg$/,
        loader: 'svg-inline'
    }

query

There are a few queries available: removeTags (default: false), removeSVGTagAttrs (default: true), etc. (See config.js)

removeTags

Removes specified tags and its children. You can specify tags by setting removingTags query array. (i.e. ?removingTags[]=style)

removeSVGTagAttrs

Removes width and height attributes from <svg />. Default is true.

<IconSVG /> React Component

To use this component in React, import/require from svg-inline-loader/lib/component.jsx. It is ES5-safe, no need to transpile, You will need object-assign and react as dependencies.

Use like:

<IconSVG src={require("svg-inline!icon.svg")} />

Notes

inspired by

Changelog

0.3.0

• Isolate transfomration functions and make tag removal optional, add README
• Added React svg icon tag