svg-symbol-sprite-loader icon indicating copy to clipboard operation
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`

Open beatrizsmerino opened this issue 3 years ago • 0 comments

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 image

Reproduction Steps

  1. Run on the terminal the next commands: npm i svg-symbol-sprite-loader@">=5.0.0"
  2. Create configuration with html-webpack-plugin on the vue.config.js file

how can I make the configuration in the vue.config.js file?

beatrizsmerino avatar Jan 07 '22 16:01 beatrizsmerino