Wondering what’s next for npm?Check out our public roadmap! »

    svg-inline-loader

    0.8.2 • Public • Published

    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

    Install

    npm i svg-inline-loader

    DownloadsWeekly Downloads

    194,598

    Version

    0.8.2

    License

    MIT

    Unpacked Size

    21 kB

    Total Files

    9

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar