Merge pull request #5 from yoriiis/update/svgo

Update SVGO to 2.x
yoriiis · Apr 15, 2022 · 78b98bf · 78b98bf
2 parents b74d0f3 + a3b3e90
commit 78b98bf
Show file tree

Hide file tree

Showing 10 changed files with 521 additions and 121 deletions.
diff --git a/example/dist/sprites-preview.html b/example/dist/sprites-preview.html
@@ -75,7 +75,7 @@ <h2 class="spriteItemName">home.svg</h2>
 											<span class="svgItem-name">video</span>
 										</div>
 
-									<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;"><defs><linearGradient id="a"><stop offset="5%" stop-color="green"/><stop offset="95%" stop-color="gold"/></linearGradient></defs><symbol id="gradient"><rect fill="url(#a)" width="100%" height="100%"/></symbol><symbol id="smiley-love" viewBox="0 0 48 48"><circle class="st0" cx="24" cy="24" r="24" fill="#fbd971"/><path class="st1" d="M24 41.1c-7.6 0-13.7-6.2-13.7-13.7 0-.6.5-1.1 1.1-1.1.6 0 1.1.5 1.1 1.1 0 6.3 5.1 11.4 11.4 11.4s11.4-5.1 11.4-11.4c0-.6.5-1.1 1.1-1.1.6 0 1.1.5 1.1 1.1.2 7.6-5.9 13.7-13.5 13.7z" fill="#d8b11a"/><path d="M14.3 12.2c.5-1.1 1.6-1.9 3-1.9 1.8 0 3.1 1.5 3.2 3.2 0 0 .1.4-.1 1.2-.3 1.1-.9 2-1.7 2.8l-4.4 3.8-4.3-3.8c-.8-.7-1.4-1.7-1.7-2.8-.2-.8-.1-1.2-.1-1.2.2-1.8 1.5-3.2 3.2-3.2 1.4 0 2.4.8 2.9 1.9z" fill="#e64c3c"/><path data-name="Calque 1-2-2" d="M33.6 12.2c.5-1.1 1.6-1.9 3-1.9 1.8 0 3.1 1.5 3.2 3.2 0 0 .1.4-.1 1.2-.3 1.1-.9 2-1.7 2.8l-4.4 3.8-4.3-3.8c-.8-.7-1.4-1.7-1.7-2.8-.2-.8-.1-1.2-.1-1.2.2-1.8 1.5-3.2 3.2-3.2 1.3 0 2.4.8 2.9 1.9z" fill="#e64c3c"/></symbol><symbol id="video" viewBox="0 0 16 16"><path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm3.3 8.5l-4.5 3c-.1 0-.1.1-.2.1s-.2 0-.3-.1c-.2-.1-.3-.3-.3-.5V5c0-.2.1-.4.2-.5.2-.1.3-.1.5 0l4.5 3c.2.1.3.3.3.5s-.1.4-.2.5z" fill="#ff004b"/></symbol></svg>
+									<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;"><defs><linearGradient id="a"><stop offset="5%" stop-color="green"/><stop offset="95%" stop-color="gold"/></linearGradient></defs><symbol id="gradient"><rect fill="url(#a)" width="100%" height="100%"/></symbol><symbol id="smiley-love" viewBox="0 0 48 48"><circle class="st0" cx="24" cy="24" r="24" fill="#fbd971"/><path class="st1" d="M24 41.1c-7.6 0-13.7-6.2-13.7-13.7 0-.6.5-1.1 1.1-1.1.6 0 1.1.5 1.1 1.1 0 6.3 5.1 11.4 11.4 11.4s11.4-5.1 11.4-11.4c0-.6.5-1.1 1.1-1.1.6 0 1.1.5 1.1 1.1.2 7.6-5.9 13.7-13.5 13.7z" fill="#d8b11a"/><path d="M14.3 12.2c.5-1.1 1.6-1.9 3-1.9 1.8 0 3.1 1.5 3.2 3.2 0 0 .1.4-.1 1.2-.3 1.1-.9 2-1.7 2.8l-4.4 3.8-4.3-3.8c-.8-.7-1.4-1.7-1.7-2.8-.2-.8-.1-1.2-.1-1.2.2-1.8 1.5-3.2 3.2-3.2 1.4 0 2.4.8 2.9 1.9z" fill="#e64c3c"/><path data-name="Calque 1-2-2" d="M33.6 12.2c.5-1.1 1.6-1.9 3-1.9 1.8 0 3.1 1.5 3.2 3.2 0 0 .1.4-.1 1.2-.3 1.1-.9 2-1.7 2.8l-4.4 3.8-4.3-3.8c-.8-.7-1.4-1.7-1.7-2.8-.2-.8-.1-1.2-.1-1.2.2-1.8 1.5-3.2 3.2-3.2 1.3 0 2.4.8 2.9 1.9z" fill="#e64c3c"/></symbol><symbol id="video" viewBox="0 0 16 16"><path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm3.3 8.5-4.5 3c-.1 0-.1.1-.2.1s-.2 0-.3-.1c-.2-.1-.3-.3-.3-.5V5c0-.2.1-.4.2-.5.2-.1.3-.1.5 0l4.5 3c.2.1.3.3.3.5s-.1.4-.2.5z" fill="#ff004b"/></symbol></svg>
 								</div>
 							</div>
 
@@ -97,7 +97,7 @@ <h2 class="spriteItemName">news.svg</h2>
 											<span class="svgItem-name">popcorn</span>
 										</div>
 
-									<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;"><defs/><symbol id="smiley-surprised" viewBox="0 0 41 40"><g transform="translate(.216)"><circle cx="20" cy="20" r="20" fill="#ffd93b"/><path d="M40 20c0 11-9 20-20 20-6.3 0-11.9-2.9-15.6-7.4C7.9 35.3 12.2 37 17 37c11 0 20-8.9 20-20 0-4.8-1.7-9.1-4.4-12.6C37.1 8.1 40 13.7 40 20z" fill="#f4c534"/><circle cx="20" cy="31.2" r="3.5" fill="#3e4347"/><path d="M31.3 19.5c0 2.5-2 4.5-4.5 4.5s-4.5-2-4.5-4.5 2-4.5 4.5-4.5 4.5 2 4.5 4.5z" fill="#fff"/><circle cx="26.7" cy="19.5" r="2.1" fill="#3e4347"/><path d="M27.9 19.3c-.2.1-.5 0-.7-.2-.2-.2-.2-.5 0-.7.2-.1.5 0 .7.2.1.3.1.6 0 .7z" fill="#5a5f63"/><path d="M32.4 13.8c.1.7.1 1.5-.1 2.1-.9-2.5-3.4-4-6.1-3.5-1 .2-1.5-1.1-.6-1.6.7-.4 1.4-.7 2.3-.7 2.1 0 4.1 1.6 4.5 3.7z" fill="#e9b02c"/><path d="M8.7 19.5c0 2.5 2 4.5 4.5 4.5s4.5-2 4.5-4.5-2-4.5-4.5-4.5-4.5 2-4.5 4.5z" fill="#fff"/><circle cx="13.3" cy="19.5" r="2.1" fill="#3e4347"/><path d="M12.1 19.3c.2.1.5 0 .7-.2.2-.2.2-.5 0-.7-.2-.1-.5 0-.7.2-.2.3-.1.6 0 .7z" fill="#5a5f63"/><path d="M7.6 13.8c-.1.7-.1 1.5.1 2.1.9-2.5 3.4-4 6.1-3.5 1 .2 1.5-1.1.6-1.6-.7-.4-1.4-.7-2.3-.7-2.1 0-4.1 1.6-4.5 3.7z" fill="#e9b02c"/></g></symbol><symbol id="popcorn" viewBox="0 0 32 32"><path d="M15.4 4.5c-2 0-3.6 1.6-3.6 3.6 0 .5.4.9.9.9s.9-.4.9-.9c0-1 .8-1.8 1.8-1.8s1.8.8 1.8 1.8c0 .5.4.9.9.9s.9-.4.9-.9c0-2-1.6-3.6-3.6-3.6z"/><path d="M29.1 9c0-1.3-.9-2.5-2.1-2.8-.4-2.4-2.4-4.2-4.9-4.2-.6 0-1.2.1-1.8.3C19.4.9 17.9 0 16.1 0c-1.8 0-3.3.9-4.2 2.3-.6-.2-1.2-.3-1.8-.3-2.5 0-4.5 1.8-4.9 4.2C4 6.5 3.1 7.7 3.1 9c0 .7.3 1.4.7 1.9-.5.5-.9 1.3-.9 2.1 0 .2 0 .4.1.6l3.2 16C6.4 31 7.7 32 9.1 32h13.8c1.4 0 2.7-1 2.9-2.4l3.2-16c0-.2.1-.4.1-.6 0-.8-.3-1.5-.8-2 .5-.5.8-1.2.8-2zM9 30c-.5 0-.9-.3-1-.8l-3.2-16V13c0-.5.4-1 1-1H9v.1L10 30H9zm6 0h-3v-.1L11 12h4v18zm5 0h-3V12h4l-1 18zm7-16.8l-3.2 16c-.1.5-.5.8-1 .8H22l1-17.9V12h3c.6 0 1 .5 1 1v.2zM26 10H6c-.6 0-1-.4-1-1s.4-1 1-1c.3 0 .5-.1.7-.3.2-.2.3-.4.3-.7 0-1.7 1.3-3 3-3 .6 0 1.2.2 1.7.5.3.2.6.2.9.1.3-.1.5-.3.6-.6.4-1.2 1.5-2 2.8-2 1.3 0 2.4.8 2.8 2 .1.3.3.5.6.6.3.1.6.1.9-.1.5-.3 1.1-.5 1.7-.5 1.7 0 3 1.3 3 3 0 .3.1.5.3.7.2.2.4.3.7.3.6 0 1 .4 1 1s-.4 1-1 1z"/></symbol></svg>
+									<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;"><defs/><symbol id="smiley-surprised" viewBox="0 0 41 40"><g transform="translate(.216)"><circle cx="20" cy="20" r="20" fill="#ffd93b"/><path d="M40 20c0 11-9 20-20 20-6.3 0-11.9-2.9-15.6-7.4C7.9 35.3 12.2 37 17 37c11 0 20-8.9 20-20 0-4.8-1.7-9.1-4.4-12.6C37.1 8.1 40 13.7 40 20z" fill="#f4c534"/><circle cx="20" cy="31.2" r="3.5" fill="#3e4347"/><path d="M31.3 19.5c0 2.5-2 4.5-4.5 4.5s-4.5-2-4.5-4.5 2-4.5 4.5-4.5 4.5 2 4.5 4.5z" fill="#fff"/><circle cx="26.7" cy="19.5" r="2.1" fill="#3e4347"/><path d="M27.9 19.3c-.2.1-.5 0-.7-.2-.2-.2-.2-.5 0-.7.2-.1.5 0 .7.2.1.3.1.6 0 .7z" fill="#5a5f63"/><path d="M32.4 13.8c.1.7.1 1.5-.1 2.1-.9-2.5-3.4-4-6.1-3.5-1 .2-1.5-1.1-.6-1.6.7-.4 1.4-.7 2.3-.7 2.1 0 4.1 1.6 4.5 3.7z" fill="#e9b02c"/><path d="M8.7 19.5c0 2.5 2 4.5 4.5 4.5s4.5-2 4.5-4.5-2-4.5-4.5-4.5-4.5 2-4.5 4.5z" fill="#fff"/><circle cx="13.3" cy="19.5" r="2.1" fill="#3e4347"/><path d="M12.1 19.3c.2.1.5 0 .7-.2.2-.2.2-.5 0-.7-.2-.1-.5 0-.7.2-.2.3-.1.6 0 .7z" fill="#5a5f63"/><path d="M7.6 13.8c-.1.7-.1 1.5.1 2.1.9-2.5 3.4-4 6.1-3.5 1 .2 1.5-1.1.6-1.6-.7-.4-1.4-.7-2.3-.7-2.1 0-4.1 1.6-4.5 3.7z" fill="#e9b02c"/></g></symbol><symbol id="popcorn" viewBox="0 0 32 32"><path d="M15.4 4.5c-2 0-3.6 1.6-3.6 3.6 0 .5.4.9.9.9s.9-.4.9-.9c0-1 .8-1.8 1.8-1.8s1.8.8 1.8 1.8c0 .5.4.9.9.9s.9-.4.9-.9c0-2-1.6-3.6-3.6-3.6z"/><path d="M29.1 9c0-1.3-.9-2.5-2.1-2.8-.4-2.4-2.4-4.2-4.9-4.2-.6 0-1.2.1-1.8.3C19.4.9 17.9 0 16.1 0c-1.8 0-3.3.9-4.2 2.3-.6-.2-1.2-.3-1.8-.3-2.5 0-4.5 1.8-4.9 4.2C4 6.5 3.1 7.7 3.1 9c0 .7.3 1.4.7 1.9-.5.5-.9 1.3-.9 2.1 0 .2 0 .4.1.6l3.2 16C6.4 31 7.7 32 9.1 32h13.8c1.4 0 2.7-1 2.9-2.4l3.2-16c0-.2.1-.4.1-.6 0-.8-.3-1.5-.8-2 .5-.5.8-1.2.8-2zM9 30c-.5 0-.9-.3-1-.8l-3.2-16V13c0-.5.4-1 1-1H9v.1L10 30H9zm6 0h-3v-.1L11 12h4v18zm5 0h-3V12h4l-1 18zm7-16.8-3.2 16c-.1.5-.5.8-1 .8H22l1-17.9V12h3c.6 0 1 .5 1 1v.2zM26 10H6c-.6 0-1-.4-1-1s.4-1 1-1c.3 0 .5-.1.7-.3.2-.2.3-.4.3-.7 0-1.7 1.3-3 3-3 .6 0 1.2.2 1.7.5.3.2.6.2.9.1.3-.1.5-.3.6-.6.4-1.2 1.5-2 2.8-2 1.3 0 2.4.8 2.8 2 .1.3.3.5.6.6.3.1.6.1.9-.1.5-.3 1.1-.5 1.7-.5 1.7 0 3 1.3 3 3 0 .3.1.5.3.7.2.2.4.3.7.3.6 0 1 .4 1 1s-.4 1-1 1z"/></symbol></svg>
 								</div>
 							</div>
 

diff --git a/...home.6f8598af0dc3818b3596f7504cf4af39.svg → ...home.74f3b7e404fb73ddc4be228eb1356975.svg b/...home.6f8598af0dc3818b3596f7504cf4af39.svg → ...home.74f3b7e404fb73ddc4be228eb1356975.svg
diff --git a/...news.0c22ea4962fb7d3c875433b1bb1fff2f.svg → ...news.f4f0a961a43d85a9323c535204748125.svg b/...news.0c22ea4962fb7d3c875433b1bb1fff2f.svg → ...news.f4f0a961a43d85a9323c535204748125.svg
diff --git a/example/webpack.config.js b/example/webpack.config.js
@@ -46,14 +46,21 @@ module.exports = (env, argv) => {
 					}
 				},
 				svgoConfig: {
+					multipass: true,
 					plugins: [
 						{
-							inlineStyles: {
-								onlyMatchedOnce: false
+							name: 'preset-default',
+							params: {
+								overrides: {
+									inlineStyles: {
+										onlyMatchedOnce: false
+									},
+									removeViewBox: false
+								}
 							}
 						},
 						{
-							removeViewBox: false
+							name: 'convertStyleToAttrs' // Disabled by default since v2.1.0
 						}
 					]
 				}

diff --git a/lib/index.d.ts b/lib/index.d.ts
@@ -15,7 +15,6 @@ declare class SvgSprite {
         generateSpritesManifest: Boolean;
         generateSpritesPreview: Boolean;
     };
-    svgOptimizer: any;
     spritesManifest: SpriteManifest;
     spritesList: Array<Sprites>;
     compilation: any;

diff --git a/lib/index.js b/lib/index.js
@@ -12,7 +12,7 @@ const { RawSource } = webpack.sources;
 const { util } = require('webpack');
 const path = require("path");
 const svgstore = require('svgstore');
-const Svgo = require('svgo');
+const { optimize } = require('svgo');
 const extend = require('extend');
 const templatePreview = require('./preview');
 const PACKAGE_NAME = require('../package.json').name;
@@ -37,7 +37,7 @@ class SvgSprite {
          */
         this.optimizeSvg = async (moduleDependency) => {
             const source = JSON.parse(moduleDependency.originalSource()._value);
-            const svgOptimized = await this.svgOptimizer.optimize(source);
+            const svgOptimized = await optimize(source, Object.assign({}, this.options.svgoConfig));
             return {
                 name: path.basename(moduleDependency.userRequest, '.svg'),
                 content: svgOptimized.data
@@ -55,7 +55,6 @@ class SvgSprite {
             generateSpritesPreview: false
         };
         this.options = extend(true, DEFAULTS, options);
-        this.svgOptimizer = new Svgo(this.options.svgoConfig);
         this.spritesManifest = {};
         this.spritesList = [];
         this.hookCallback = this.hookCallback.bind(this);