wp-webpack-script
wp-webpack-script copied to clipboard
SVGO Documentation outdated
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.
I do use svgo in my project. I will take a look and get back to you. Thank you for the info.
Running into the same issue.
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.
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 },
},
Thank you @robsonsobral, do you mind sending in a PR to update the docs?
Sure! I'm glad to help!
By the way, I'm still learning on how to make WPack to fully work.
Thanks all!
@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.
Done, @swashata . However, I think you have confused the other issue I opened with this one. ;-)
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 ,
},
};
Thank you @robbertvancaem for the update. @robsonsobral could you please confirm this? We may need to update the docs.
"Five years later", yes, I confirm!
Haha, no worries. I will keep this open for now and will update the docs when I get a chance.