svg-symbol-sprite-loader
svg-symbol-sprite-loader copied to clipboard
Bug: the package `svg-symbol-sprite-loader` on his version 5 not working with the configuration `html-webpack-plugin`
Summary
Hi!
I am using the svg-symbol-sprite-loader
package in version 4.0.0 with the next configuration in the vue.config.js
file.
Reference: https://stefan-dietz.eu/vue-svg-symbol-sprites.html
package.json
file
{
...
"dependencies": {
"core-js": "^3.20.2",
"svg-symbol-sprite-loader": "^5.1.0",
"vue": "^2.6.14",
"vue-router": "^3.5.3"
},
...
}
vue.config.js
file
const path = require('path');
const SVGSymbolSprite = require('svg-symbol-sprite-loader');
// Define the resolve method to obtain the absolute path of the file
const resolve = dir => path.join(__dirname, dir);
module.exports = {
// A function that recives a ChainableConfig instance based on webpack chain
// Allows more fine-grained modifications to the internal webpack configuration
chainWebpack: config => {
// Create and insert sprite before the html body
config.plugin('svg-symbol-sprite-loader').after('html').
use(SVGSymbolSprite.Plugin).
end();
// Configure svg default rultes to exclude svg file proccessing in icons directory
config.module.rule('svg').exclude.add(resolve('src/assets/images/icons/svg')).end();
// New icons rule, set svg sprite loader to process svg files in the 'src/assets/images/icons/svg' folder
config.module.
rule('svg-sprite').
uses.clear().
end().
test(/\.svg$/u).
include.add(resolve('src/assets/images/icons/svg')).
end().
use('svg-symbol-sprite-loader').
loader('svg-symbol-sprite-loader').
options({
symbolId: filePath => `icon-${path.basename(filePath, '.svg')}`
}).
end();
}
};
The above code works 🚀 , but when I migrated the svg-symbol-sprite-loader
package to its 5.0.0 version, I can no longer use that configuration.
It requires me to use the html-webpack-plugin
package for configuration.
Reference: https://www.npmjs.com/package/svg-symbol-sprite-loader#user-content-complete
Reproduction Steps
- Run on the terminal the next commands:
npm i svg-symbol-sprite-loader@">=5.0.0"
- Create configuration with
html-webpack-plugin
on thevue.config.js
file
how can I make the configuration in the vue.config.js
file?