vite-plugin-svgr 4.0.0 → 4.2.0

package/README.md

@@ -4,6 +4,19 @@
 
 Vite plugin to transform SVGs into React components. Uses [svgr](https://github.com/gregberge/svgr) under the hood.
 
+## Installation
+
+```sh
+# npm
+npm install --save-dev vite-plugin-svgr
+
+# yarn
+yarn add -D vite-plugin-svgr
+
+# pnpm
+pnpm add -D vite-plugin-svgr
+```
+
 ## Usage
 
 ```js
@@ -42,7 +55,7 @@ svgr({
     // ...
   },
 
-  // A minimatch pattern, or array of patterns, which specifies the files in the build the plugin should include. By default all svg files will be included.
+  // A minimatch pattern, or array of patterns, which specifies the files in the build the plugin should include.
   include: "**/*.svg?react",
 
   //  A minimatch pattern, or array of patterns, which specifies the files in the build the plugin should ignore. By default no files are ignored.
@@ -50,6 +63,20 @@ svgr({
 });
 ```
 
+If you want to enable SVGO you can install `@svgr/plugin-svgo` and use following options to enable and configure it:
+
+```js
+svgr({
+  svgrOptions: {
+    plugins: ["@svgr/plugin-svgo", "@svgr/plugin-jsx"],
+    svgoConfig: {
+      floatPrecision: 2,
+    },
+  },
+  // ...
+});
+```
+
 ## License
 
 MIT

package/dist/index.cjs

@@ -34,7 +34,8 @@ function vitePluginSvgr({ svgrOptions, esbuildOptions, include = "**/*.svg?react
     const postfixRE = /[?#].*$/s;
     return {
         name: "vite-plugin-svgr",
-        async transform(code, id) {
+        enforce: "pre",
+        async load(id) {
             if (filter(id)) {
                 const { transform } = await Promise.resolve().then(() => __importStar(require("@svgr/core")));
                 const { default: jsx } = await Promise.resolve().then(() => __importStar(require("@svgr/plugin-jsx")));

package/dist/index.js

@@ -6,7 +6,8 @@ export default function vitePluginSvgr({ svgrOptions, esbuildOptions, include =
     const postfixRE = /[?#].*$/s;
     return {
         name: "vite-plugin-svgr",
-        async transform(code, id) {
+        enforce: "pre",
+        async load(id) {
             if (filter(id)) {
                 const { transform } = await import("@svgr/core");
                 const { default: jsx } = await import("@svgr/plugin-jsx");

package/dist/index.mjs

@@ -0,0 +1,38 @@
+import fs from "fs";
+import { transformWithEsbuild } from "vite";
+import { createFilter } from "@rollup/pluginutils";
+function viteSvgr({
+  exportAsDefault,
+  svgrOptions,
+  esbuildOptions,
+  include = "**/*.svg",
+  exclude
+} = {}) {
+  const filter = createFilter(include, exclude);
+  return {
+    name: "vite-plugin-svgr",
+    async transform(code, id) {
+      if (filter(id)) {
+        const { transform } = await import("@svgr/core");
+        const svgCode = await fs.promises.readFile(id, "utf8");
+        const componentCode = await transform(svgCode, svgrOptions, {
+          filePath: id,
+          caller: {
+            previousExport: exportAsDefault ? null : code
+          }
+        });
+        const res = await transformWithEsbuild(componentCode, id, {
+          loader: "jsx",
+          ...esbuildOptions
+        });
+        return {
+          code: res.code,
+          map: null
+        };
+      }
+    }
+  };
+}
+export {
+  viteSvgr as default
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-svgr",
-  "version": "4.0.0",
+  "version": "4.2.0",
   "description": "Vite plugin to transform SVGs into React components",
   "type": "module",
   "main": "./dist/index.js",
@@ -32,14 +32,14 @@
   "author": "Rongjian Zhang",
   "license": "MIT",
   "devDependencies": {
-    "@types/node": "^20.6.2",
+    "@types/node": "^20.9.1",
     "typescript": "^5.2.2"
   },
   "peerDependencies": {
-    "vite": "^2.6.0 || 3 || 4"
+    "vite": "^2.6.0 || 3 || 4 || 5"
   },
   "dependencies": {
-    "@rollup/pluginutils": "^5.0.4",
+    "@rollup/pluginutils": "^5.0.5",
     "@svgr/core": "^8.1.0",
     "@svgr/plugin-jsx": "^8.1.0"
   },