vite-plugin-svgr 3.3.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,7 +29,7 @@ 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 {
@@ -43,7 +43,6 @@ function viteSvgr({ exportAsDefault, svgrOptions, esbuildOptions, include = "**/
                 const componentCode = await transform(svgCode, svgrOptions, {
                     filePath,
                     caller: {
-                        previousExport: exportAsDefault ? null : code,
                         defaultPlugins: [jsx],
                     },
                 });
@@ -59,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,7 +1,7 @@
 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 {
@@ -15,7 +15,6 @@ export default function viteSvgr({ exportAsDefault, svgrOptions, esbuildOptions,
                 const componentCode = await transform(svgCode, svgrOptions, {
                     filePath,
                     caller: {
-                        previousExport: exportAsDefault ? null : code,
                         defaultPlugins: [jsx],
                     },
                 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-svgr",
-  "version": "3.3.0",
+  "version": "4.0.0",
   "description": "Vite plugin to transform SVGs into React components",
   "type": "module",
   "main": "./dist/index.js",