vite-plugin-svgr 3.2.0 → 4.0.0

package/README.md

@@ -16,10 +16,10 @@ export default {
 };
 ```
 
-Then SVG files can be imported as React components, just like [create-react-app](https://create-react-app.dev/docs/adding-images-fonts-and-files#adding-svgs) does:
+Then SVG files can be imported as React components:
 
 ```js
-import { ReactComponent as Logo } from "./logo.svg";
+import Logo from "./logo.svg?react";
 ```
 
 If you are using TypeScript, there is also a declaration helper for better type inference:
@@ -32,10 +32,6 @@ If you are using TypeScript, there is also a declaration helper for better type
 
 ```js
 svgr({
-  // Set it to `true` to export React component as default.
-  // Notice that it will override the default behavior of Vite.
-  exportAsDefault: false,
-
   // svgr options: https://react-svgr.com/docs/options/
   svgrOptions: {
     // ...
@@ -46,8 +42,8 @@ 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.
-  include: "**/*.svg",
+  // 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.
+  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.
   exclude: "",

package/client.d.ts

@@ -1,10 +1,12 @@
 // https://github.com/facebook/create-react-app/blob/0ee4765c39f820e5f4820abf4bf2e47b3324da7f/packages/react-scripts/lib/react-app.d.ts#L47-L56
 // https://github.com/pd4d10/vite-plugin-svgr/pull/56 for preact compatiblility
 
-declare module "*.svg" {
+declare module "*.svg?react" {
   import * as React from "react";
 
-  export const ReactComponent: React.FunctionComponent<
+  const ReactComponent: React.FunctionComponent<
     React.ComponentProps<"svg"> & { title?: string }
   >;
+
+  export default ReactComponent;
 }

package/dist/index.cjs

@@ -29,19 +29,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const pluginutils_1 = require("@rollup/pluginutils");
 const fs_1 = __importDefault(require("fs"));
 const vite_1 = require("vite");
-function viteSvgr({ exportAsDefault, svgrOptions, esbuildOptions, include = "**/*.svg", exclude, } = {}) {
+function vitePluginSvgr({ svgrOptions, esbuildOptions, include = "**/*.svg?react", exclude, } = {}) {
     const filter = (0, pluginutils_1.createFilter)(include, exclude);
+    const postfixRE = /[?#].*$/s;
     return {
         name: "vite-plugin-svgr",
         async transform(code, 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")));
-                const svgCode = await fs_1.default.promises.readFile(id.replace(/\?.*$/, ""), "utf8");
+                const filePath = id.replace(postfixRE, "");
+                const svgCode = await fs_1.default.promises.readFile(filePath, "utf8");
                 const componentCode = await transform(svgCode, svgrOptions, {
-                    filePath: id,
+                    filePath,
                     caller: {
-                        previousExport: exportAsDefault ? null : code,
                         defaultPlugins: [jsx],
                     },
                 });
@@ -57,4 +58,4 @@ function viteSvgr({ exportAsDefault, svgrOptions, esbuildOptions, include = "**/
         },
     };
 }
-exports.default = viteSvgr;
+exports.default = vitePluginSvgr;

package/dist/index.d.ts

@@ -2,17 +2,10 @@ import { FilterPattern } from "@rollup/pluginutils";
 import type { Config } from "@svgr/core";
 import type { Plugin } from "vite";
 import { transformWithEsbuild } from "vite";
-export interface ViteSvgrOptions {
-    /**
-     * Export React component as default. Notice that it will overrides
-     * the default behavior of Vite, which exports the URL as default
-     *
-     * @default false
-     */
-    exportAsDefault?: boolean;
+export interface VitePluginSvgrOptions {
     svgrOptions?: Config;
     esbuildOptions?: Parameters<typeof transformWithEsbuild>[2];
     exclude?: FilterPattern;
     include?: FilterPattern;
 }
-export default function viteSvgr({ exportAsDefault, svgrOptions, esbuildOptions, include, exclude, }?: ViteSvgrOptions): Plugin;
+export default function vitePluginSvgr({ svgrOptions, esbuildOptions, include, exclude, }?: VitePluginSvgrOptions): Plugin;

package/dist/index.js

@@ -1,19 +1,20 @@
 import { createFilter } from "@rollup/pluginutils";
 import fs from "fs";
 import { transformWithEsbuild } from "vite";
-export default function viteSvgr({ exportAsDefault, svgrOptions, esbuildOptions, include = "**/*.svg", exclude, } = {}) {
+export default function vitePluginSvgr({ svgrOptions, esbuildOptions, include = "**/*.svg?react", exclude, } = {}) {
     const filter = createFilter(include, exclude);
+    const postfixRE = /[?#].*$/s;
     return {
         name: "vite-plugin-svgr",
         async transform(code, id) {
             if (filter(id)) {
                 const { transform } = await import("@svgr/core");
                 const { default: jsx } = await import("@svgr/plugin-jsx");
-                const svgCode = await fs.promises.readFile(id.replace(/\?.*$/, ""), "utf8");
+                const filePath = id.replace(postfixRE, "");
+                const svgCode = await fs.promises.readFile(filePath, "utf8");
                 const componentCode = await transform(svgCode, svgrOptions, {
-                    filePath: id,
+                    filePath,
                     caller: {
-                        previousExport: exportAsDefault ? null : code,
                         defaultPlugins: [jsx],
                     },
                 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-svgr",
-  "version": "3.2.0",
+  "version": "4.0.0",
   "description": "Vite plugin to transform SVGs into React components",
   "type": "module",
   "main": "./dist/index.js",
@@ -32,17 +32,16 @@
   "author": "Rongjian Zhang",
   "license": "MIT",
   "devDependencies": {
-    "@types/node": "^18.16.0",
-    "typescript": "^5.0.4",
-    "vite": "^4.3.2"
+    "@types/node": "^20.6.2",
+    "typescript": "^5.2.2"
   },
   "peerDependencies": {
     "vite": "^2.6.0 || 3 || 4"
   },
   "dependencies": {
-    "@rollup/pluginutils": "^5.0.2",
-    "@svgr/core": "^7.0.0",
-    "@svgr/plugin-jsx": "^7.0.0"
+    "@rollup/pluginutils": "^5.0.4",
+    "@svgr/core": "^8.1.0",
+    "@svgr/plugin-jsx": "^8.1.0"
   },
-  "packageManager": "pnpm@8.4.0"
+  "packageManager": "pnpm@8.7.6"
 }