[![npm][npm]][npm-url] [![deps][deps]][deps-url] [![test][test]][test-url] [![coverage][cover]][cover-url] [![chat][chat]][chat-url]

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.

Install

```bash npm install svg-inline-loader --save-dev ```

Configuration

Simply add configuration object to `module.loaders` like this. ```javascript { test: /\.svg$/, loader: 'svg-inline-loader' } ``` warning: You should configure this loader only once via `module.loaders` or `require('!...')`. See [#15](https://github.com/webpack-contrib/svg-inline-loader/issues/15) for detail.

Query Options

#### `removeTags: boolean` Removes specified tags and its children. You can specify tags by setting `removingTags` query array. default: `removeTags: false` #### `removingTags: [...string]` warning: this won't work unless you specify `removeTags: true` default: `removingTags: ['title', 'desc', 'defs', 'style']` #### `warnTags: [...string]` warns about tags, ex: ['desc', 'defs', 'style'] default: `warnTags: []` #### `removeSVGTagAttrs: boolean` Removes `width` and `height` attributes from ``. default: `removeSVGTagAttrs: true` #### `removingTagAttrs: [...string]` Removes attributes from inside the ``. default: `removingTagAttrs: []` #### `warnTagAttrs: [...string]` Warns to console about attributes from inside the ``. default: `warnTagAttrs: []` #### `classPrefix: boolean || string` Adds a prefix to class names to avoid collision across svg files. default: `classPrefix: false` #### `idPrefix: boolean || string` Adds a prefix to ids to avoid collision across svg files. default: `idPrefix: false`

Example Usage

```js // Using default hashed prefix (__[hash:base64:7]__) var logoTwo = require('svg-inline-loader?classPrefix!./logo_two.svg'); // Using custom string var logoOne = require('svg-inline-loader?classPrefix=my-prefix-!./logo_one.svg'); // Using custom string and hash var logoThree = require('svg-inline-loader?classPrefix=__prefix-[sha512:hash:hex:5]__!./logo_three.svg'); ``` See [loader-utils](https://github.com/webpack/loader-utils#interpolatename) for hash options. Preferred usage is via a `module.loaders`: ```js { test: /\.svg$/, loader: 'svg-inline-loader?classPrefix' } ```

Maintainers

Juho Vepsäläinen

Joshua Wiens

Kees Kluskens

Sean Larkin

[npm]: https://img.shields.io/npm/v/svg-inline-loader.svg [npm-url]: https://npmjs.com/package/svg-inline-loader [deps]: https://david-dm.org/webpack-contrib/svg-inline-loader.svg [deps-url]: https://david-dm.org/webpack-contrib/svg-inline-loader [chat]: https://img.shields.io/badge/gitter-webpack%2Fwebpack-brightgreen.svg [chat-url]: https://gitter.im/webpack/webpack [test]: https://travis-ci.org/webpack-contrib/svg-inline-loader.svg?branch=master [test-url]: https://travis-ci.org/webpack-contrib/svg-inline-loader [cover]: https://codecov.io/gh/webpack-contrib/svg-inline-loader/branch/master/graph/badge.svg [cover-url]: https://codecov.io/gh/webpack-contrib/svg-inline-loader

	Stars	Issues	Version	Updated	Created
@svgr/webpack			8.1.0	9 months ago	6 years ago
react-svg-loader	639	50	3.0.3	5 years ago	9 years ago
svg-inline-loader	490	36	0.8.2	4 years ago	9 years ago
svg-inline-react	131	15	3.2.1	3 years ago	9 years ago
svgo			3.3.2	10 days ago	12 years ago

@svgr/webpack vs react-svg-loader vs svg-inline-loader vs svg-inline-react vs svgo

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past