vite-plugin-svgr 4.1.0 → 4.3.0

package/README.md

@@ -5,6 +5,7 @@
 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
@@ -34,7 +35,7 @@ Then SVG files can be imported as React components:
 import Logo from "./logo.svg?react";
 ```
 
-If you are using TypeScript, there is also a declaration helper for better type inference:
+If you are using TypeScript, there is also a declaration helper for better type inference. Add the following to `vite-env.d.ts`:
 
 ```ts
 /// <reference types="vite-plugin-svgr/client" />
@@ -54,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.
@@ -62,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/client.d.ts

@@ -5,7 +5,7 @@ declare module "*.svg?react" {
   import * as React from "react";
 
   const ReactComponent: React.FunctionComponent<
-    React.ComponentProps<"svg"> & { title?: string }
+    React.ComponentProps<"svg"> & { title?: string, titleId?: string, desc?: string, descId?: string }
   >;
 
   export default ReactComponent;

package/codemods/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "codemods",
+  "version": "0.0.0",
+  "type": "commonjs",
+  "exports": {
+    "./package.json": "./package.json"
+  }
+}

package/codemods/readme.md

@@ -0,0 +1,31 @@
+# Codemod
+
+## V4
+
+convert named export to default
+
+If you want to run it against `.js` or `.jsx` files, please use the command below:
+
+```
+npx jscodeshift@latest ./path/to/src/ \
+  --extensions=js,jsx \
+  --transform=./node_modules/vite-plugin-svgr/codemods/src/v4/default-export/default-export.js
+```
+
+If you want to run it against `.ts` or `.tsx` files, please use the command below:
+
+```
+npx jscodeshift@latest ./path/to/src/ \
+  --extensions=ts,tsx \
+  --parser=tsx \
+  --transform=./node_modules/vite-plugin-svgr/codemods/src/v4/default-export/default-export.js
+```
+
+**Note:** Applying the codemod might break your code formatting, so please don't forget to run `prettier` and/or `eslint` after you've applied the codemod!
+
+Above codemod will convert as imports as bellow
+
+```diff
+- import { ReactComponent as NoticeModeIconActive2 } from 'assets/icon.svg';
++ import NoticeModeIconActive2 from 'assets/icon.svg?react';
+```

package/codemods/src/v4/default-export/default-export.js

@@ -0,0 +1,33 @@
+module.exports = function (file, api) {
+  const jscodeshift = api.jscodeshift;
+  const root = jscodeshift(file.source);
+
+  root.find(jscodeshift.ImportDeclaration).forEach((path) => {
+    const importPath = path.node.source.value;
+
+    if (importPath.endsWith(".svg")) {
+      const hasDefaultSpecifier = path.node.specifiers.some((specifier) =>
+        jscodeshift.ImportDefaultSpecifier.check(specifier),
+      );
+
+      // Skip transformation if there is a default import specifier
+      if (!hasDefaultSpecifier) {
+        const updatedImportPath = `${importPath}?react`;
+
+        path.node.specifiers.forEach((specifier) => {
+          if (jscodeshift.ImportSpecifier.check(specifier)) {
+            // Convert named import to default import
+            const newSpecifier = jscodeshift.importDefaultSpecifier(
+              jscodeshift.identifier(specifier.local.name),
+            );
+            specifier.type = "ImportDefaultSpecifier";
+            specifier.local = newSpecifier.local;
+          }
+        });
+
+        path.node.source = jscodeshift.literal(updatedImportPath);
+      }
+    }
+  });
+  return root.toSource();
+};

package/dist/index.cjs

@@ -26,6 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = vitePluginSvgr;
 const pluginutils_1 = require("@rollup/pluginutils");
 const fs_1 = __importDefault(require("fs"));
 const vite_1 = require("vite");
@@ -34,7 +35,7 @@ function vitePluginSvgr({ svgrOptions, esbuildOptions, include = "**/*.svg?react
     const postfixRE = /[?#].*$/s;
     return {
         name: "vite-plugin-svgr",
-        enforce: "pre",
+        enforce: "pre", // to override `vite:asset`'s behavior
         async load(id) {
             if (filter(id)) {
                 const { transform } = await Promise.resolve().then(() => __importStar(require("@svgr/core")));
@@ -59,4 +60,3 @@ function vitePluginSvgr({ svgrOptions, esbuildOptions, include = "**/*.svg?react
         },
     };
 }
-exports.default = vitePluginSvgr;

package/dist/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-svgr",
-  "version": "4.1.0",
+  "version": "4.3.0",
   "description": "Vite plugin to transform SVGs into React components",
   "type": "module",
   "main": "./dist/index.js",
@@ -23,7 +23,8 @@
   "repository": "pd4d10/vite-plugin-svgr",
   "files": [
     "dist",
-    "client.d.ts"
+    "client.d.ts",
+    "codemods"
   ],
   "keywords": [
     "vite",
@@ -32,16 +33,16 @@
   "author": "Rongjian Zhang",
   "license": "MIT",
   "devDependencies": {
-    "@types/node": "^20.7.2",
-    "typescript": "^5.2.2"
+    "@types/node": "^22.8.6",
+    "typescript": "^5.6.3"
   },
   "peerDependencies": {
-    "vite": "^2.6.0 || 3 || 4"
+    "vite": ">=2.6.0"
   },
   "dependencies": {
-    "@rollup/pluginutils": "^5.0.4",
+    "@rollup/pluginutils": "^5.1.3",
     "@svgr/core": "^8.1.0",
     "@svgr/plugin-jsx": "^8.1.0"
   },
-  "packageManager": "pnpm@8.7.6"
+  "packageManager": "pnpm@9.12.3+sha512.cce0f9de9c5a7c95bef944169cc5dfe8741abfb145078c0d508b868056848a87c81e626246cb60967cbd7fd29a6c062ef73ff840d96b3c86c40ac92cf4a813ee"
 }

package/dist/index.mjs

@@ -1,38 +0,0 @@
-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
-};