vite-plugin-svgr 3.3.0 → 4.1.0

package/README.md

@@ -4,6 +4,18 @@
 
 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
@@ -16,10 +28,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 +44,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 +54,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,12 +29,13 @@ 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) {
+        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")));
@@ -43,7 +44,6 @@ function viteSvgr({ exportAsDefault, svgrOptions, esbuildOptions, include = "**/
                 const componentCode = await transform(svgCode, svgrOptions, {
                     filePath,
                     caller: {
-                        previousExport: exportAsDefault ? null : code,
                         defaultPlugins: [jsx],
                     },
                 });
@@ -59,4 +59,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,12 +1,13 @@
 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) {
+        enforce: "pre",
+        async load(id) {
             if (filter(id)) {
                 const { transform } = await import("@svgr/core");
                 const { default: jsx } = await import("@svgr/plugin-jsx");
@@ -15,7 +16,6 @@ export default function viteSvgr({ exportAsDefault, svgrOptions, esbuildOptions,
                 const componentCode = await transform(svgCode, svgrOptions, {
                     filePath,
                     caller: {
-                        previousExport: exportAsDefault ? null : code,
                         defaultPlugins: [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": "3.3.0",
+  "version": "4.1.0",
   "description": "Vite plugin to transform SVGs into React components",
   "type": "module",
   "main": "./dist/index.js",
@@ -32,7 +32,7 @@
   "author": "Rongjian Zhang",
   "license": "MIT",
   "devDependencies": {
-    "@types/node": "^20.6.2",
+    "@types/node": "^20.7.2",
     "typescript": "^5.2.2"
   },
   "peerDependencies": {