✨ support nodejs svgo (#11)

* ✨  support nodejs svgo

💚  auth with npm token

* 🐛  await optimize

* 📝  remove ignore

* 📝  svgo impl

.changeset/fresh-vans-press.md

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

.github/workflows/snapshot-release.yml

@@ -45,6 +45,13 @@ jobs:
       - name: Install
         run: |
           pnpm install --frozen-lockfile=false
+      - name: Creating .npmrc
+        run: |
+          cat << EOF > "$HOME/.npmrc"
+            //registry.npmjs.org/:_authToken=$NPM_TOKEN
+          EOF
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
       - name: create and publish versions
         run: |
           pnpm ci:snapshot

README.md

@@ -10,6 +10,73 @@ Use [svgr-rs](https://github.com/svg-rust/svgr-rs) with vite and webpack.
 pnpm i @svgr-rs/svgrs-plugin -D
 ```
 
+## options
+
+> [!NOTE]  
+Common options, both work with `vite` and `webpack`. Check more supported options from [svg-rust/svgr-rs](https://github.com/svg-rust/svgr-rs). 
+
+**Extra options for plugins:**
+
+`svgoImplementation`
+
+> [!NOTE]  
+Use different version `svgo` to optimize svg. Only work when `options.svgo` is enabled.
+
+- type check below example code for details
+
+```ts
+import Svgo from 'svgo'
+
+function getInfo(state: { filePath?: string }) {
+  return state.filePath
+    ? {
+        input: 'file',
+        path: state.filePath,
+      }
+    : {
+        input: 'string',
+      }
+}
+
+export const svgo = () => {
+  let svgo: any
+  return {
+    async optimize(code: string, { path, ...config }: any) {
+      if (!svgo) {
+        svgo = new Svgo(config)
+      }
+      return svgo.optimize(code, getInfo({ filePath: path }))
+    },
+  }
+}
+
+// example for webpack config
+{
+  loader: require.resolve('@svgr-rs/svgrs-plugin/webpack'),
+  options: {
+    ref: true,
+    exportType: 'default',
+    jsxRuntime: 'automatic',
+    icon: false,
+    svgo: true,
+    svgoImplementation: svgo(),
+    svgoConfig: {
+      plugins: [
+        { prefixIds: true },
+        { removeDimensions: false },
+        { removeViewBox: true },
+      ],
+    },
+  },
+},
+```
+
+
+`svgoConfig`
+
+- type check `svgo` config for more details
+
+
 ## usage
 
 ### `vite`

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)
   }
 }