https://github.com/webpack-contrib/svg-inline-loader

Inline SVG loader with cleaning-up functionality
https://github.com/webpack-contrib/svg-inline-loader

svg webpack-loader

Last synced: 21 days ago
JSON representation

Inline SVG loader with cleaning-up functionality

• Host: GitHub
• URL: https://github.com/webpack-contrib/svg-inline-loader
• Owner: webpack-contrib
• License: mit
• Archived: true
• Created: 2015-03-18T10:02:17.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2020-10-09T11:55:34.000Z (over 3 years ago)
• Last Synced: 2024-05-21T15:14:23.689Z (about 1 month ago)
• Topics: svg, webpack-loader
• Language: JavaScript
• Size: 211 KB
• Stars: 490
• Watchers: 11
• Forks: 59
• Open Issues: 36
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Lists

• awesome-list - svg-inline-loader
• awesome-stars-webVueBlog - webpack-contrib/svg-inline-loader - Inline SVG loader with cleaning-up functionality (JavaScript / 运维\&DevOps)

README

        
[![npm][npm]][npm-url]

[![deps][deps]][deps-url]

[![test][test]][test-url]

[![coverage][cover]][cover-url]

[![chat][chat]][chat-url]

# ! NO LONGER MAINTAINED !

This module is deprecated and will no longer be maintained.

In most cases, you can replace the functionality by using [`raw-loader`](https://github.com/webpack-contrib/raw-loader) and [`image-minimizer-webpack-plugin`](https://github.com/webpack-contrib/image-minimizer-webpack-plugin) instead:

**webpack.config.js**

```js

const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');

module.exports = {

  module: {

    rules: [

      {

        test: /\.svg$/,

        use: [

          {

            loader: "raw-loader"

          }

        ]

      },

    ],

  },

  plugins: [

    new ImageMinimizerPlugin({

      minimizerOptions: {

        plugins: [

          [

            'imagemin-svgo',

            {

              plugins: [

                // SVGO options is here "https://github.com/svg/svgo#what-it-can-do"

                {

                  removeViewBox: false,

                  removeXMLNS: true,

                },

              ],

            },

          ],

        ],

      },

    }),

  ],

};

```

For optimization svg use [`imagemin-svgo`](https://github.com/imagemin/imagemin-svgo).



  

  

    

  

  
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