vite-plugin-svgr 0.3.0 → 0.6.0

package/README.md

@@ -1,24 +1,25 @@
 # vite-plugin-svgr
 
-Vite plugin to transform SVGs into React components. Uses [svgr](https://github.com/gregberge/svgr) under the hood.
-
-## Prerequisites:
-
-add `vite-plugin-svgr/client` to `compilerOptions.types` of your `tsconfig`
+[![npm](https://img.shields.io/npm/v/vite-plugin-svgr.svg)](https://www.npmjs.com/package/vite-plugin-svgr)
 
-```js
-"types": ["vite-plugin-svgr/client"]
-```
+Vite plugin to transform SVGs into React components. Uses [svgr](https://github.com/gregberge/svgr) under the hood.
 
 ## Usage
 
 ```js
 // vite.config.js
-import svgr from 'vite-plugin-svgr'
+import svgrPlugin from 'vite-plugin-svgr'
 
 export default {
   // ...
-  plugins: [svgr()],
+  plugins: [
+    svgrPlugin({
+      svgrOptions: {
+        icon: true,
+        // ...svgr options (https://react-svgr.com/docs/options/)
+      },
+    }),
+  ],
 }
 ```
 
@@ -28,6 +29,18 @@ Then SVG files can be imported as React components, just like [create-react-app]
 import { ReactComponent as Logo } from './logo.svg'
 ```
 
+If you are using TypeScript, `vite-plugin-svgr/client` can be added to `tsconfig.json`:
+
+```json
+{
+  // ...
+  "compilerOptions": {
+    // ...
+    "types": ["vite-plugin-svgr/client"]
+  }
+}
+```
+
 ## License
 
 MIT

package/client.d.ts

@@ -6,7 +6,4 @@ declare module '*.svg' {
   export const ReactComponent: React.FunctionComponent<
     React.SVGProps<SVGSVGElement> & { title?: string }
   >
-
-  const src: string
-  export default src
 }

package/lib/index.d.ts

@@ -1,3 +1,7 @@
+import type { Config } from '@svgr/core';
 import type { Plugin } from 'vite';
-declare const _default: () => Plugin;
+declare type Options = {
+    svgrOptions?: Config;
+};
+declare const _default: (options?: Options) => Plugin;
 export = _default;

package/lib/index.js

@@ -1,26 +1,45 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 const fs_1 = __importDefault(require("fs"));
-module.exports = function svgrPlugin() {
-    // TODO: options
+const vite_1 = require("vite");
+module.exports = function svgrPlugin(options = {}) {
+    const { svgrOptions = {} } = options;
     return {
         name: 'vite:svgr',
         async transform(code, id) {
             if (id.endsWith('.svg')) {
-                const svgr = require('@svgr/core').default;
-                const esbuild = require('esbuild');
-                const svg = await fs_1.default.promises.readFile(id, 'utf8');
-                const componentCode = await svgr(svg, {}, { componentName: 'ReactComponent' }).then((res) => {
+                const { transform: convert } = await Promise.resolve().then(() => __importStar(require('@svgr/core')));
+                const svgCode = await fs_1.default.promises.readFile(id, 'utf8');
+                const componentCode = await convert(svgCode, svgrOptions, {
+                    componentName: 'ReactComponent',
+                }).then((res) => {
                     return res.replace('export default ReactComponent', `export { ReactComponent }`);
                 });
-                const res = await esbuild.transform(componentCode + '\n' + code, {
-                    loader: 'jsx',
-                });
+                const res = await (0, vite_1.transformWithEsbuild)(componentCode + '\n' + code, id, { loader: 'jsx' });
                 return {
                     code: res.code,
-                    // map: res.map, // TODO:
+                    map: null, // TODO:
                 };
             }
         },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-svgr",
-  "version": "0.3.0",
+  "version": "0.6.0",
   "description": "Vite plugin to transform SVGs into React components",
   "main": "lib/index.js",
   "scripts": {
@@ -8,32 +8,26 @@
     "build": "tsc",
     "prepublish": "npm run build"
   },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/pd4d10/vite-plugin-svgr.git"
-  },
+  "repository": "pd4d10/vite-plugin-svgr",
   "files": [
     "lib",
     "client.d.ts"
   ],
   "keywords": [
-    "vite"
+    "vite",
+    "vite-plugin"
   ],
   "author": "Rongjian Zhang",
   "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/pd4d10/vite-plugin-svgr/issues"
-  },
-  "homepage": "https://github.com/pd4d10/vite-plugin-svgr#readme",
   "devDependencies": {
-    "@types/node": "^15.12.2",
-    "typescript": "^4.3.2",
-    "vite": "^2.3.7"
+    "@types/node": "^16.11.6",
+    "typescript": "^4.4.4",
+    "vite": "^2.6.13"
   },
   "peerDependencies": {
-    "vite": "^2.0.0"
+    "vite": "^2.6.0"
   },
   "dependencies": {
-    "@svgr/core": "^5.5.0"
+    "@svgr/core": "^6.0.0-alpha.3"
   }
 }