make svgo optional, fix issue with scss warning

README.md

@@ -23,12 +23,15 @@ The plugin outputs can be fully configurable through [options](#🛠-options).
 
 ```shell
 npm i -D @spiriit/vite-plugin-svg-spritemap
+npm i -D svgo #if you need svgo optimization
 
 # yarn
 yarn add -D @spiriit/vite-plugin-svg-spritemap
+yarn add -D svgo #if you need svgo optimization
 
 # pnpm
 pnpm add -D @spiriit/vite-plugin-svg-spritemap
+pnpm add -D svgo #if you need svgo optimization
 ```
 
 ## 👨‍💻 Usage
@@ -298,7 +301,7 @@ The first argument is a glob path (using [fast-glob](https://github.com/mrmlnc/f
 | output         | `boolean` or `object` or `string`   | `true`  | As a string, set the destination of the file (see [output.filename](#output)).<br> For more control, see [output](#output).<br> Set to false to disable output. |
 | styles         | `false` or `object` or `string`     | `false` | File destination like `src/css/spritemap.css` or [styles object](#styles) |
 | prefix         | `string` or `false`  | `sprite-`    | Define the prefix uses for sprite id in `<symbol>`/`<use>`/`<view>`.<br> Set to false to disable the prefix |
-| svgo           | `boolean` or `object`     | `true`  | Take an SVGO Options object.<br> If `true`, it will use the [default SVGO preset](https://github.com/svg/svgo#default-preset), if `false`, it will disable SVGO optimization |
+| svgo           | `boolean` or `object`     | `false` if SVGO not installed, `true` if SVGO is installed  | Take an SVGO Options object.<br> If `true`, it will use the [default SVGO preset](https://github.com/svg/svgo#default-preset), if `false`, it will disable SVGO optimization |
 | injectSVGOnDev | `boolean`  | `false`   | Inject the SVG Spritemap inside the body on dev |
 | idify          | `(name:string, svg:object) => string`   | `name => options.prefix + name` | Function allowing to customize the id of each symbol of the spritemap svg. |
 | route          | `string`   | `__spritemap` | Change the route name allowing you to have multiple instance of the plugin |

demo/_fixtures/scss/style.scss

@@ -1,5 +1,7 @@
-@import './spritemap.scss';
-@import './spritemap-flags.scss';
+@use "sass:map";
+
+@use './spritemap.scss' as *;
+@use './spritemap-flags.scss';
 
 body {
   background-color: #ddd;
@@ -35,8 +37,8 @@ body {
   @each $name, $sprite in $sprites {
     &-#{$name},
     &-#{$name}-mask {
-      width: map-get($sprite, 'width');
-      height: map-get($sprite, 'height');
+      width: map.get($sprite, 'width');
+      height: map.get($sprite, 'height');
     }
   }
 

package.json

@@ -62,6 +62,7 @@
     "prepublishOnly": "pnpm build"
   },
   "peerDependencies": {
+    "svgo": "^3.0.0",
     "vite": "^5.0.0 || ^6.0.0",
     "vue": "^3.0.0"
   },
@@ -74,8 +75,7 @@
     "@xmldom/xmldom": "^0.9.5",
     "fast-glob": "^3.3.2",
     "hash-sum": "^2.0.0",
-    "mini-svg-data-uri": "^1.4.4",
-    "svgo": "^3.3.2"
+    "mini-svg-data-uri": "^1.4.4"
   },
   "devDependencies": {
     "@antfu/eslint-config": "3.11.2",
@@ -89,6 +89,7 @@
     "playwright": "^1.49.0",
     "rollup": "^4.28.0",
     "svg-element-attributes": "^2.1.0",
+    "svgo": "^3.3.2",
     "tsup": "^8.3.5",
     "typescript": "^5.7.2",
     "vite": "^6.0.2",

src/helpers/options.ts

@@ -1,4 +1,5 @@
 import type { Options, OptionsStyles, StylesLang, UserOptions } from '../types'
+import { check } from './svgo'
 
 export function createOptions(options: UserOptions = {}): Options {
   let prefix: Options['prefix'] = 'sprite-'
@@ -26,8 +27,21 @@ export function createOptions(options: UserOptions = {}): Options {
       },
     ],
   }
-  if (typeof options.svgo === 'object' || options.svgo === false)
-    svgo = options.svgo
+
+  const checkSvgo = check()
+  options.svgo = typeof options.svgo === 'undefined' ? checkSvgo : options.svgo
+  if (typeof options.svgo === 'object' || options.svgo === false) {
+    if (!checkSvgo) {
+      console.warn(
+        '[vite-plugin-spritemap]',
+        'Please install the svgo package to use the svgo optimization.',
+      )
+      svgo = false
+    }
+    else {
+      svgo = options.svgo
+    }
+  }
 
   let styles: Options['styles'] = false
   const stylesLang = ['css', 'scss', 'less', 'styl']

src/helpers/svgo.ts

@@ -0,0 +1,19 @@
+export async function getOptimize() {
+  try {
+    const { optimize } = await import('svgo')
+    return optimize
+  }
+  catch {
+    return false
+  }
+}
+
+export function check() {
+  try {
+    import('svgo')
+    return true
+  }
+  catch {
+    return false
+  }
+}

src/styles/template.scss

@@ -1,17 +1,19 @@
+@use "sass:map";
+
 @mixin __mixin__(
   $name,
   $include-size: false,
   $type: 'uri',
   $mode: 'background',
   $route: '__route__'
 ) {
-  $sprite: map-get($__sprites__, $name);
+  $sprite: map.get($__sprites__, $name);
   $url: false;
 
   @if $type == 'fragment' {
     $url: '/#{$route}##{$__prefix__}#{$name}-view';
   } @else if $type == 'uri' {
-    $url: map-get($sprite, uri);
+    $url: map.get($sprite, uri);
   } @else {
     @error 'sprite(): $type must be either "fragment" or "uri"';
   }
@@ -21,10 +23,10 @@
 
     @if $include-size {
       @if $include-size == true {
-        #{$mode}-size: map-get($sprite, width) map-get($sprite, height);
+        #{$mode}-size: map.get($sprite, width) map.get($sprite, height);
       } @else if $include-size == 'box' {
-        width: map-get($sprite, width);
-        height: map-get($sprite, height);
+        width: map.get($sprite, width);
+        height: map.get($sprite, height);
       }
     }
   }

src/svgManager.ts

@@ -5,9 +5,9 @@ import { basename, resolve } from 'node:path'
 import { DOMImplementation, DOMParser, XMLSerializer } from '@xmldom/xmldom'
 import fg from 'fast-glob'
 import hash_sum from 'hash-sum'
-import { optimize } from 'svgo'
 import { calculateY } from './helpers/calculateY'
 import { cleanAttributes } from './helpers/cleanAttributes'
+import { getOptimize } from './helpers/svgo'
 import { Styles } from './styles/styles'
 
 export class SVGManager {
@@ -63,9 +63,12 @@ export class SVGManager {
       return
 
     if (typeof this._options.svgo === 'object') {
-      const optimizedSvg = optimize(svg, this._options.svgo)
-      if ('data' in optimizedSvg)
-        svg = optimizedSvg.data
+      const optimize = await getOptimize()
+      if (optimize) {
+        const optimizedSvg = optimize(svg, this._options.svgo)
+        if ('data' in optimizedSvg)
+          svg = optimizedSvg.data
+      }
     }
 
     this._svgs.set(name, {