JarCasting
! 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 and image-minimizer-webpack-plugin instead:
webpack.config.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.
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 |
