svg-inline-loader

Cleans up and inlines your SVG files into Webpack module.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
svg-inline-loader
0.8.24 years ago9 years agoMinified + gzip package size for svg-inline-loader in KB

Readme

!npmnpmnpm-url !depsdepsdeps-url !testtesttest-url !coveragecovercover-url !chatchatchat-url
<img width="200" height="200" vspace="" hspace="25"
  src="https://cdn.rawgit.com/webpack/media/e7485eb2/logo/icon.svg">
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


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

Configuration


Simply add configuration object to module.loaders like this.
{
    test: /\.svg$/,
    loader: 'svg-inline-loader'
}

warning: You should configure this loader only once via module.loaders or require('!...'). See #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 <svg />.
default: removeSVGTagAttrs: true

removingTagAttrs: [...string]

Removes attributes from inside the <svg />.
default: removingTagAttrs: []

warnTagAttrs: [...string]

Warns to console about attributes from inside the <svg />.
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


// 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:
{
    test: /\.svg$/,
    loader: 'svg-inline-loader?classPrefix'
}

Maintainers


<tr>
  <td align="center">
    <img width="150" height="150"
    src="https://avatars3.githubusercontent.com/u/166921?v=3&s=150">
    </br>
    <a href="https://github.com/bebraw">Juho Vepsäläinen</a>
  </td>
  <td align="center">
    <img width="150" height="150"
    src="https://avatars2.githubusercontent.com/u/8420490?v=3&s=150">
    </br>
    <a href="https://github.com/d3viant0ne">Joshua Wiens</a>
  </td>
  <td align="center">
    <img width="150" height="150"
    src="https://avatars3.githubusercontent.com/u/533616?v=3&s=150">
    </br>
    <a href="https://github.com/SpaceK33z">Kees Kluskens</a>
  </td>
  <td align="center">
    <img width="150" height="150"
    src="https://avatars3.githubusercontent.com/u/3408176?v=3&s=150">
    </br>
    <a href="https://github.com/TheLarkInn">Sean Larkin</a>
  </td>
</tr>