vite-plugin-svg-sprite 0.3.2 → 0.4.0

package/README.md

@@ -1,4 +1,5 @@
 # vite-plugin-svg-sprite
+
 SVG sprite plugin for [Vite](https://github.com/vitejs/vite)
 
 ## install
@@ -7,7 +8,8 @@ npm i vite-plugin-svg-sprite -D
 ```
 
 ## Usage
-vite.config.js:
+
+Add the plugin to your `vite.config.js`:
 
 ```javascript
 import createSvgSpritePlugin from 'vite-plugin-svg-sprite';
@@ -21,8 +23,9 @@ const config = {
 }
 ```
 
-app code:
-```javascript
+Then use it like that in your app code:
+
+```jsx
 import appIconId from './path/to/icons/app.svg';
 
 // react or vue component, as you want
@@ -37,6 +40,29 @@ export default function App() {
 }
 ```
 
+You can also access the `width`/`height` attributes of the SVG with the `size` export:
+
+```jsx 
+import appIconId, { size } from './path/to/icons/app.svg';
+
+// react or vue component, as you want
+export default function App() {
+  return (
+    <svg {...size}>
+      <use
+        xlinkHref={`#${appIconId}`}
+      />
+    </svg>
+  );
+}
+```
+
+If you're using TypeScript, add the following line to your `vite-env.d.ts`:
+```diff
+/// <reference types="vite/client" />
++ /// <reference types="vite-plugin-svg-sprite/client" />
+```
+
 ## options
 
 ```javascript

package/{es → cjs}/index.d.ts

@@ -1,4 +1,4 @@
-import { OptimizeOptions as SvgoOptimizeOptions } from 'svgo';
+import { Config as SvgoOptimizeOptions } from 'svgo';
 import { Plugin } from 'vite';
 export type { SvgoOptimizeOptions };
 export interface SvgSpriteOptions {

package/{lib → cjs}/index.js

@@ -8,6 +8,7 @@ const fs_1 = __importDefault(require("fs"));
 const crypto_1 = __importDefault(require("crypto"));
 const micromatch_1 = __importDefault(require("micromatch"));
 const svg_baker_1 = __importDefault(require("svg-baker"));
+const svg_parser_1 = require("svg-parser");
 const svgo_1 = require("svgo");
 const { stringify } = JSON;
 exports.default = (options) => {
@@ -18,18 +19,21 @@ exports.default = (options) => {
     const plugin = {
         name: 'svg-sprite',
         async transform(src, filepath) {
+            var _a, _b;
             if (!micromatch_1.default.isMatch(filepath, match, {
                 dot: true,
             })) {
                 return undefined;
             }
             let code = await fs_1.default.promises.readFile(filepath, 'utf-8');
+            const root = (0, svg_parser_1.parse)(code);
+            let topLevelAttributes = {};
+            if (((_a = root.children[0]) === null || _a === void 0 ? void 0 : _a.type) === 'element') {
+                topLevelAttributes = (_b = root.children[0].properties) !== null && _b !== void 0 ? _b : {};
+            }
             const { name } = path_1.default.parse(filepath);
             if (svgoOptions !== false) {
                 const result = ((0, svgo_1.optimize)(code, svgoOptions === true ? undefined : svgoOptions));
-                if (result.error != null) {
-                    throw new Error(result.error);
-                }
                 code = result.data;
             }
             let id = name;
@@ -51,6 +55,7 @@ exports.default = (options) => {
         import addSymbol from 'vite-plugin-svg-sprite/runtime';
         addSymbol(${stringify(symbol.render())}, ${stringify(id)});
         export default ${stringify(id)};
+        export const size = { width: ${stringify(topLevelAttributes.width)}, height: ${stringify(topLevelAttributes.height)} };
       `;
             return {
                 code: codeToReturn,

package/cjs/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}

package/client.d.ts

@@ -0,0 +1,9 @@
+declare module "*.svg" {
+  const symbol: string;
+  export default symbol;
+
+  export const size: {
+    width: string | number | undefined,
+    height: string | number | undefined
+  };
+}

package/{lib → esm}/index.d.ts

@@ -1,4 +1,4 @@
-import { OptimizeOptions as SvgoOptimizeOptions } from 'svgo';
+import { Config as SvgoOptimizeOptions } from 'svgo';
 import { Plugin } from 'vite';
 export type { SvgoOptimizeOptions };
 export interface SvgSpriteOptions {

package/{es → esm}/index.js

@@ -3,6 +3,7 @@ import fs from 'fs';
 import crypto from 'crypto';
 import micromatch from 'micromatch';
 import SVGCompiler from 'svg-baker';
+import { parse } from 'svg-parser';
 import { optimize } from 'svgo';
 const { stringify } = JSON;
 export default (options) => {
@@ -13,18 +14,21 @@ export default (options) => {
     const plugin = {
         name: 'svg-sprite',
         async transform(src, filepath) {
+            var _a, _b;
             if (!micromatch.isMatch(filepath, match, {
                 dot: true,
             })) {
                 return undefined;
             }
             let code = await fs.promises.readFile(filepath, 'utf-8');
+            const root = parse(code);
+            let topLevelAttributes = {};
+            if (((_a = root.children[0]) === null || _a === void 0 ? void 0 : _a.type) === 'element') {
+                topLevelAttributes = (_b = root.children[0].properties) !== null && _b !== void 0 ? _b : {};
+            }
             const { name } = p.parse(filepath);
             if (svgoOptions !== false) {
                 const result = (optimize(code, svgoOptions === true ? undefined : svgoOptions));
-                if (result.error != null) {
-                    throw new Error(result.error);
-                }
                 code = result.data;
             }
             let id = name;
@@ -46,6 +50,7 @@ export default (options) => {
         import addSymbol from 'vite-plugin-svg-sprite/runtime';
         addSymbol(${stringify(symbol.render())}, ${stringify(id)});
         export default ${stringify(id)};
+        export const size = { width: ${stringify(topLevelAttributes.width)}, height: ${stringify(topLevelAttributes.height)} };
       `;
             return {
                 code: codeToReturn,

package/package.json

@@ -1,26 +1,46 @@
 {
   "name": "vite-plugin-svg-sprite",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "description": "SVG sprite plugin for Vite",
-  "main": "lib/index.js",
-  "types": "lib/index.d.ts",
+  "type": "module",
   "exports": {
     ".": {
-      "import": "./index.mjs",
-      "require": "./lib/index.js"
+      "import": {
+        "types": "./esm/index.d.ts",
+        "default": "./esm/index.js"
+      },
+      "require": {
+        "types": "./cjs/index.d.ts",
+        "default": "./cjs/index.js"
+      }
     },
-    "./runtime": "./es/runtime.js"
+    "./runtime": {
+      "import": {
+        "types": "./esm/runtime.d.ts",
+        "default": "./esm/runtime.js"
+      },
+      "require": {
+        "types": "./cjs/runtime.d.ts",
+        "default": "./cjs/runtime.js"
+      }
+    },
+    "./client": {
+      "types": "./client.d.ts"
+    }
   },
+  "main": "cjs/index.js",
+  "types": "cjs/index.d.ts",
   "files": [
-    "lib",
-    "es",
+    "cjs",
+    "esm",
     "src",
+    "client.d.ts",
     "index.mjs",
     "LICENSE"
   ],
   "scripts": {
     "lint": "eslint src",
-    "build": "tsc && npx tsc -m es2015 --outDir es",
+    "build": "rm -rf cjs esm && tsc && npx tsc -m commonjs --outDir cjs && cp ./package-cjs.json cjs/package.json",
     "prepublish": "npm run build"
   },
   "keywords": [
@@ -35,19 +55,23 @@
   "license": "MIT",
   "devDependencies": {
     "@types/micromatch": "^4.0.1",
-    "@types/node": "^14.14.21",
-    "@types/svgo": "^2.6.4",
-    "@typescript-eslint/eslint-plugin": "^4.8.2",
-    "eslint": "^7.14.0",
-    "eslint-config-airbnb-typescript": "^12.0.0",
+    "@types/node": "^20.4.2",
+    "@types/svgo": "^3.0.0",
+    "@types/svg-parser": "^2.0.3",
+
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "eslint": "^8.45.0",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-config-airbnb-typescript": "^17.1.0",
     "eslint-plugin-import": "^2.22.1",
-    "typescript": "^4.1.2",
+    "typescript": "^5.1.6",
     "vite": "^4.0.0"
   },
   "dependencies": {
     "micromatch": "^4.0.2",
     "svg-baker": "~1.7.0",
-    "svgo": "^2.8.0"
+    "svg-parser": "^2.0.4",
+    "svgo": "^3.0.2"
   },
   "peerDependencies": {
     "vite": "^2 || ^3 || ^4"

package/src/index.ts

@@ -3,7 +3,8 @@ import fs from 'fs';
 import crypto from 'crypto';
 import micromatch from 'micromatch';
 import SVGCompiler from 'svg-baker';
-import { optimize, OptimizeOptions as SvgoOptimizeOptions } from 'svgo';
+import { parse } from 'svg-parser';
+import { optimize, Config as SvgoOptimizeOptions } from 'svgo';
 import { Plugin } from 'vite';
 
 const { stringify } = JSON;
@@ -31,12 +32,16 @@ export default (options?: SvgSpriteOptions) => {
       }
 
       let code = await fs.promises.readFile(filepath, 'utf-8');
+
+      const root = parse(code);
+      let topLevelAttributes: Record<string, string | number> = {};
+      if (root.children[0]?.type === 'element') {
+        topLevelAttributes = root.children[0].properties ?? {};
+      }
+
       const { name } = p.parse(filepath);
       if (svgoOptions !== false) {
         const result = (optimize(code, svgoOptions === true ? undefined : svgoOptions));
-        if (result.error != null) {
-          throw new Error(result.error);
-        }
         code = result.data;
       }
 
@@ -64,12 +69,13 @@ export default (options?: SvgSpriteOptions) => {
         import addSymbol from 'vite-plugin-svg-sprite/runtime';
         addSymbol(${stringify(symbol.render())}, ${stringify(id)});
         export default ${stringify(id)};
+        export const size = { width: ${stringify(topLevelAttributes.width)}, height: ${stringify(topLevelAttributes.height)} };
       `;
 
       return {
         code: codeToReturn,
         map: { mappings: '' },
-      }
+      };
     },
   };
 

package/index.mjs

@@ -1,3 +0,0 @@
-import plugin from './lib/index.js';
-
-export default plugin.default || plugin;