svg-inline-loader
Cleans up and inlines your SVG files into Webpack module.
Last updated 5 months ago by jhnns .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install svg-inline-loader 
SYNC missed versions from official npm registry.

npm deps test coverage chat

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


Juho Vepsäläinen

Joshua Wiens

Kees Kluskens

Sean Larkin

Current Tags

  • 0.8.2                                ...           latest (5 months ago)

15 Versions

  • 0.8.2                                ...           5 months ago
  • 0.8.0                                ...           3 years ago
  • 0.7.1                                ...           4 years ago
  • 0.7.0                                ...           4 years ago
  • 0.6.1                                ...           4 years ago
  • 0.6.0                                ...           4 years ago
  • 0.5.0                                ...           4 years ago
  • 0.4.1                                ...           4 years ago
  • 0.4.0                                ...           5 years ago
  • 0.3.0                                ...           5 years ago
  • 0.2.3                                ...           5 years ago
  • 0.2.2                                ...           5 years ago
  • 0.2.1                                ...           5 years ago
  • 0.2.0                                ...           5 years ago
  • 0.1.0                                ...           5 years ago
Downloads
Today 1
This Week 868
This Month 522
Last Day 142
Last Week 627
Last Month 3,526
Dependencies (3)
Dev Dependencies (14)
Dependents (222)

Copyright 2014 - 2016 © taobao.org |