✨ support nodejs svgo

.changeset/config.json

@@ -6,5 +6,5 @@
   "access": "public",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": ["vite-template", "webpack-template"]
+  "ignore": ["vite-template", "webpack-template", "vite-template"]
 }

.changeset/red-ways-relax.md

@@ -0,0 +1,5 @@
+---
+"@svgr-rs/svgrs-plugin": patch
+---
+
+support nodejs svgo

examples/webpack/build/webpack.common.config.js

@@ -51,6 +51,12 @@ const common = {
           },
           {
             loader: '@svgr-rs/svgrs-plugin/webpack',
+            // options: {
+            //   svgo: true,
+            //   svgoConfig: {
+            //     plugins: ['preset-default'],
+            //   },
+            // },
           },
         ],
       },

package.json

@@ -81,7 +81,8 @@
   },
   "dependencies": {
     "@rollup/pluginutils": "^5.0.2",
-    "@svgr-rs/core": "^0.0.12"
+    "@svgr-rs/core": "^0.0.12",
+    "svgo": "^3.0.2"
   },
   "devDependencies": {
     "@aiou/eslint-config": "0.10.0",

src/exports/vite.ts

@@ -4,6 +4,8 @@ import { createFilter } from '@rollup/pluginutils'
 import { transform } from '@svgr-rs/core'
 import { transformWithEsbuild } from 'vite'
 
+import { svgo } from '../index'
+
 import type { Config, State } from '@svgr-rs/core'
 import type { ESBuildOptions, Plugin } from 'vite'
 
@@ -47,7 +49,7 @@ export const svgrs = ({
     },
     async transform(code, id) {
       if (filter(cleanUrl(id))) {
-        const raw = await fs.readFile(cleanUrl(id), 'utf-8')
+        let raw = await fs.readFile(cleanUrl(id), 'utf-8')
         const state: State = {
           componentName: namedExport,
           filePath: id,
@@ -59,6 +61,7 @@ export const svgrs = ({
             name: 'svgrs-plugin/vite',
           }
         }
+        raw = await svgo(raw, config, state)
         const svgrsCode = await transform(
           raw,
           { namedExport, exportType, jsxRuntime, icon, ...config },

src/exports/webpack.ts

@@ -8,9 +8,14 @@ import path from 'node:path'
 
 import { transform } from '@svgr-rs/core'
 
+import { svgo } from '../index'
+
 import type { Config, State } from '@svgr-rs/core'
 import type { LoaderContext } from 'webpack'
 
+/**
+ * NOTE: @svgr-rs/svgo not production ready yet. Use svgo instead.
+ */
 async function svgrsLoader(this: LoaderContext<Config>, source: string) {
   this.cacheable && this.cacheable()
   const callback = this.async()
@@ -38,7 +43,7 @@ async function svgrsLoader(this: LoaderContext<Config>, source: string) {
     // NOTE: state.caller will force make svgrs use 'named' export type
     state.caller = {
       previousExport,
-      name: 'svgrs-plugin/vite',
+      name: 'svgrs-plugin/webpack',
     }
   }
   const options: Config = {
@@ -49,11 +54,13 @@ async function svgrsLoader(this: LoaderContext<Config>, source: string) {
     ...config,
   }
   if (!previousExport) {
-    const code = await transform(source, options, state)
+    let code = await svgo(source, config, state)
+    code = await transform(code, options, state)
     callback(null, code)
   } else {
     const content = await fs.readFile(this.resourcePath, 'utf-8')
-    const code = await transform(content, options, state)
+    let code = await svgo(content, config, state)
+    code = await transform(code, options, state)
     callback(null, code)
   }
 }

src/index.ts

@@ -1 +1,35 @@
-// polyfill for rollup-plugin-condition-exports
+/**
+ * Based on @svgr/plugin-svgo
+ * Copyright 2017 Smooth Code
+ */
+
+import type { Config, State } from '@svgr-rs/core'
+
+/**
+ * @todo Load svgo config from config file
+ */
+export const getSvgoConfig = (config: Config): any => {
+  // @ts-expect-error -- ignore
+  if (config.svgoConfig) {
+    // @ts-expect-error -- ignore
+    return config.svgoConfig
+  }
+  return {}
+}
+
+export const svgo = async (code: string, config: Config, state: State) => {
+  if (!config.svgo) {
+    return code
+  }
+  const { optimize } = await import('svgo')
+  const svgoConfig = getSvgoConfig(config)
+  const result = optimize(code, { ...svgoConfig, path: state.filePath })
+
+  // @ts-expect-error -- ignore
+  if (result.modernError) {
+    // @ts-expect-error -- ignore
+    throw result.modernError
+  }
+
+  return result.data
+}