Include SVG Transform Loader to handle fill and stroke with SVGs in SASS

[RichKenyon]

First off, Thanks for offering this project to the community. I've used wd_s on multiple projects over the past three years. The framework has sped up our development process and the build tools make enforcing our coding standards across multiple developers extremely efficient.

I frequently want to use the same SVG icon as a background in multiple template locations, often requiring different fill colors. Limitations in CSS prevent me from modifying the fill property of a background image. So, I'm typically stuck generating multiple color combinations of the same SVG file or creating a custom icon font.

I've recently discovered svg-transform-loader, a tool that handles stroke and fill properties of SVG files from within SASS.

Incorporating it into wd_s is extremely easy. After installing via NPM, I modify a few lines in my webpack.config:

{
	test: /\.svg$/,
	type: 'asset/inline',
	use: 'svg-transform-loader', // Add svg-transform-loader
},
{  
	test: /\.(sa|sc|c)ss$/,
	exclude: '/node_modules',
	use: [
		MiniCssExtractPlugin.loader,
		{
			loader: 'css-loader',
			options: {
				importLoaders: 1, // This option should be set to work with encode-query loader
			},
		},
		'postcss-loader',
		'svg-transform-loader/encode-query',
		'sass-loader',
	],
},

Finally, I can modify any SVG's fill and stroke properties from within my SASS files:

background: url(../images/icons/icon.svg**?fill=#fff**) 50% 50% no-repeat;

I'd appreciate any feedback. Is this helpful/useful and worth considering for core? Have others found a better approach?

[coreymcollins]

Hey @RichKenyon – thanks for using the theme over the years! Glad you've been enjoying it.

I think this sounds pretty solid and would be good to run through its paces.

I believe in the past we've created a secondary SVG image directory that doesn't get run through any of the sprite mapping processes, but obviously that creates some duplicate work as you've got to worry about multiple SVG directories.

Would you be open to throwing together a PR that we can test and possibly merge in? I'd be curious if this affects the _s_display_svg function at all and if we'd need to make any adjustments there.

Thanks!

[RichKenyon]

Hi @coreymcollins!

I'll create a PR. I'm on deadline for a project this week but next week is looking good.