SVGO Documentation outdated

[derweili]

The svgo library got a major update on 19 February.
The Docs https://github.com/swashata/wp-webpack-script/blob/master/site/docs/tutorials/using-various-svg-loader.md only work with

"svgo": "^1.3.2",
"svgo-loader": "^2.2.2"

When using the latest svgo version the build process returns following error Error: Plugin name should be specified.

I haven't figured out what needs to be changed in the config yet, downgrading to the version mentioned above does work as a hotfix.

[swashata]

I do use svgo in my project. I will take a look and get back to you. Thank you for the info.

[sethrubenstein]

Running into the same issue.

[swashata]

Hello,

It turns out I use @svgr/webpack because my projects are react specific. But I took a look at the svg-loader documentation. It says the loader should be

loader: 'svgo-loader',
options: {
  configFile: './scripts/svgo.config.js'
}

So I am thinking, maybe try this and let me know how this works out

const {
	getFileLoaderOptions,
	issuerForNonStyleFiles,
	issuerForStyleFiles,
	babelLoader,
	fileLoader,
} = require('@wpackio/scripts');

module.exports = {
	// ...
	files: [
		{
			name: 'app',
			entry: {
				main: ['./src/app/index.js'],
				// stuff
			},
			// Extra webpack config to be dynamically created
			webpackConfig: (config, merge, appDir, isDev) => {
				const svgoLoader = {
					loader: 'svgo-loader',
-					options: {
-						plugins: [
-							{ removeTitle: true },
-							{ convertColors: { shorthex: false } },
-							{ convertPathData: false },
-						],
-					},
				};
				// create module rules
				const configWithSvg = {
					module: {
						rules: [
							// SVGO Loader
							// https://github.com/rpominov/svgo-loader
							// This rule handles SVG for javascript files
							{
								test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
								use: [
									{
										loader: fileLoader,
										options: getFileLoaderOptions(
											appDir,
											isDev,
											false
										),
									},
									svgoLoader,
								],
								issuer: issuerForNonStyleFiles,
							},
							// This rule handles SVG for style files
							{
								test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
								use: [
									{
										loader: fileLoader,
										options: getFileLoaderOptions(
											appDir,
											isDev,
											true
										),
									},
									svgoLoader,
								],
								issuer: issuerForStyleFiles,
							},
						],
					},
				};
				// merge the new module.rules with webpack-merge api
				return merge(config, configWithSvg);
			},
		},
	],
	// ...
};

and add a svgo.config.js to the root of your project.

[robsonsobral]

Actually, svgo.config.js isn't required. The configurations just need to be directly inside options property, instead of an array within plugin property.

The following sample works:

options: {
  { removeTitle: true },
  { convertColors: { shorthex: false } },
  { convertPathData: false },
},

[swashata]

Thank you @robsonsobral, do you mind sending in a PR to update the docs?

[robsonsobral]

Sure! I'm glad to help!

---

By the way, I'm still learning on how to make WPack to fully work.

[sethrubenstein]

Thanks all!

[swashata]

@robsonsobral you can edit this file https://github.com/swashata/wp-webpack-script/blob/master/site/docs/tutorials/using-various-svg-loader.md and send a PR. Once I merge it, it will automatically update the site.

[robsonsobral]

Done, @swashata . However, I think you have confused the other issue I opened with this one. ;-)

[robbertvancaem]

I just tried the configuration as proposed above, which didn't work for me. The configuration below however, does seem to work:

const svgoLoader = {
  loader: "svgo-loader",
  options: {
      removeTitle: true,
      convertColors: { shorthex: false },
      convertPathData: false ,
  },
};

[swashata]

Thank you @robbertvancaem for the update. @robsonsobral could you please confirm this? We may need to update the docs.