Cleans up and inlines your SVG files into Webpack module.
npm install svg-inline-loader[![npm][npm]][npm-url]
[![deps][deps]][deps-url]
[![test][test]][test-url]
[![coverage][cover]][cover-url]
[![chat][chat]][chat-url]
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.
``bash`
npm install svg-inline-loader --save-dev
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 for detail.
#### 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
`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 for hash options.
Preferred usage is via a module.loaders:`js``
{
test: /\.svg$/,
loader: 'svg-inline-loader?classPrefix'
}
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