Merge pull request #61 from mrleblanc101/main

Send path to svgo

Author: jpkleemans

cypress/integration/spec.js

@@ -62,4 +62,8 @@ describe('Vite SVG Loader', () => {
         expect($img[0].width).to.equal(355)
       })
   })
+
+  it("it send path to svgo", () => {
+    cy.get("#component svg .test_svg__rectangle").should("exist");
+  });
 })

examples/vue/src/assets/test.svg

@@ -12,7 +12,18 @@ export default defineConfig(({ mode }) => {
   const DEFAULT_IMPORT = env.VITE_SVG_DEFAULT_IMPORT || env.npm_config_svg_default_import
 
   return {
-    plugins: [vue(), viteSvgLoader({ defaultImport: DEFAULT_IMPORT })],
+    plugins: [
+        vue(),
+        viteSvgLoader({
+            defaultImport: DEFAULT_IMPORT,
+            svgoConfig: {
+                plugins: [
+                    'preset-default',
+                    { name: 'prefixIds' },
+                ],
+            }
+        })
+    ],
 
     resolve: {
       alias: {

examples/vue/vite.config.js

@@ -1,6 +1,6 @@
 const fs = require('fs').promises
 const { compileTemplate } = require('@vue/compiler-sfc')
-const { optimize: optimizeSvg } = require('svgo')
+const { optimize } = require('svgo')
 
 module.exports = function svgLoader (options = {}) {
   const { svgoConfig, svgo, defaultImport } = options
@@ -38,7 +38,10 @@ module.exports = function svgLoader (options = {}) {
       }
 
       if (svgo !== false && query !== 'skipsvgo') {
-        svg = optimizeSvg(svg, svgoConfig).data
+        svg = optimize(svg, {
+          ...svgoConfig,
+          path
+        }).data
       }
 
       const { code } = compileTemplate({