feat: initial version

README.md

@@ -1,2 +1,19 @@
 # vite-plugin-svgr
-Vite plugin to transform SVGs into React components
+
+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'
+
+export default {
+  // ...
+  plugins: [svgr()],
+}
+```
+
+## License
+
+MIT

package.json

@@ -4,7 +4,9 @@
   "description": "Vite plugin to transform SVGs into React components",
   "main": "lib/index.js",
   "scripts": {
-    "dev": "tsc --watch"
+    "dev": "tsc --watch",
+    "build": "tsc",
+    "prepublish": "npm run build"
   },
   "repository": {
     "type": "git",
@@ -23,6 +25,14 @@
   },
   "homepage": "https://github.com/pd4d10/vite-plugin-svgr#readme",
   "devDependencies": {
-    "typescript": "^4.1.3"
+    "typescript": "^4.1.3",
+    "vite": "^2.0.0-beta.15",
+    "@types/node": "^14.14.20"
+  },
+  "peerDependencies": {
+    "vite": "^2.0.0-beta.1"
+  },
+  "dependencies": {
+    "@svgr/core": "^5.5.0"
   }
 }

src/index.ts

@@ -1 +1,38 @@
-console.log('hello')
+import fs from 'fs'
+import type { Plugin } from 'vite'
+import type * as E from 'esbuild'
+
+export = function svgrPlugin(): Plugin {
+  // TODO: options
+  return {
+    name: 'vite:svgr',
+    async transform(code, id) {
+      if (id.endsWith('.svg')) {
+        const svgr = require('@svgr/core').default
+        const esbuild = require('esbuild') as typeof E
+
+        const svg = await fs.promises.readFile(id, 'utf8')
+
+        const componentCode = await svgr(
+          svg,
+          {},
+          { componentName: 'ReactComponent' }
+        ).then((res: string) => {
+          return res.replace(
+            'export default ReactComponent',
+            `export { ReactComponent }`
+          )
+        })
+
+        const res = await esbuild.transform(componentCode + '\n' + code, {
+          loader: 'jsx',
+        })
+
+        return {
+          code: res.code,
+          map: res.map,
+        }
+      }
+    },
+  }
+}