Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug: the package svg-symbol-sprite-loader on his version 5 not working with the configuration html-webpack-plugin #180

Open
beatrizsmerino opened this issue Jan 7, 2022 · 0 comments

Comments

@beatrizsmerino
Copy link

beatrizsmerino commented Jan 7, 2022

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant