vite-plugin-svg-sprite 0.5.2 → 0.6.1

package/README.md

@@ -1,15 +1,22 @@
 # vite-plugin-svg-sprite
 
-SVG sprite plugin for [Vite](https://github.com/vitejs/vite)
+> A Vite plugin for importing SVG files as SVG sprite symbols or components.
 
-## install
-```
-npm i vite-plugin-svg-sprite -D
+## Installation
+
+You can install the plugin using npm, pnpm, or yarn:
+
+```bash
+npm install vite-plugin-svg-sprite --save-dev
+# or
+pnpm add vite-plugin-svg-sprite --save-dev
+# or
+yarn add vite-plugin-svg-sprite --dev
 ```
 
-## Usage
+## How to Use
 
-Add the plugin to your `vite.config.js`:
+To use the plugin, import and configure it in your Vite configuration file (`vite.config.js|ts`):
 
 ```javascript
 import createSvgSpritePlugin from 'vite-plugin-svg-sprite';
@@ -17,66 +24,70 @@ import createSvgSpritePlugin from 'vite-plugin-svg-sprite';
 const config = {
   plugins: [
     createSvgSpritePlugin({
-      symbolId: 'icon-[name]-[hash]',
+      exportType: 'vanilla', // or 'react' or 'vue'
+      include: '**/icons/*.svg'
     }),
   ],
 }
 ```
 
-Then use it like that in your app code:
+### React
 
-```jsx
-import appIconId from './path/to/icons/app.svg';
+For React projects, set the `exportType` to `'react'` to import SVGs as components:
 
-// react or vue component, as you want
-export default function App() {
-  return (
-    <svg>
-      <use
-        xlinkHref={`#${appIconId}`}
-      />
-    </svg>
-  );
-}
+```javascript
+import IconFoo from './icons/foo.svg';
+
+<IconFoo />
 ```
 
-You can also access the `width`/`height` attributes of the SVG with the `size` export:
+This may seem similar to `svgr` but internally they are different.
 
-```jsx 
-import appIconId, { size } from './path/to/icons/app.svg';
+`vite-plugin-svg-sprite` usually has a better render performance.
 
-// react or vue component, as you want
-export default function App() {
-  return (
-    <svg {...size}>
-      <use
-        xlinkHref={`#${appIconId}`}
-      />
-    </svg>
-  );
-}
-```
+### Vue
 
-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" />
+For Vue projects, set the `exportType` to `'vue'` to import SVGs as components:
+
+```javascript
+import IconFoo from './icons/foo.svg';
+
+<IconFoo />
 ```
 
-## options
+### Non-React / Non-Vue
+
+For users not using React or Vue, set the `exportType` to `'vanilla'`. The imported value will be the `symbolId`, which can be used with SVG `<use>`:
 
 ```javascript
-const plugin = createSvgSpritePlugin(options);
+import IconFoo from './icons/foo.svg';
+const html = `
+  <svg>
+    <use xlink:href="#${IconFoo}" />
+  </svg>
+`;
 ```
 
-### `options.symbolId: string`
+### TypeScript Users
+
+To get proper type hints in TypeScript, include the appropriate type definitions in your `tsconfig.json`:
+
+```json
+"types": [
+  // or "vite-plugin-svg-sprite/typings/react" | "vite-plugin-svg-sprite/typings/vue"
+  "vite-plugin-svg-sprite/typings/vanilla"
+],
+```
 
-For generating the `id` attribute of `<symbol>` element. Defaults to `[name]`
+## API Configuration Options
 
-### `options.include: string | string[]`
+- **symbolId**: (`string`, optional) Controls the generated symbol ID. Default is `'icon-[name]'`.
 
-Match files that will be transformed. Defaults to `'**.svg'`. See [micromatch](https://github.com/micromatch/micromatch) for the syntax document.
+- **exportType**: (`'vanilla' | 'react' | 'vue'`, optional) Determines the type of the exported value. Default is `'vanilla'`. 
+  - If set to `'vanilla'`, the value will be the `symbolId`.
+  - If set to `'react'`, the value will be a React component.
+  - If set to `'vue'`, the value will be a Vue component.
 
-### `options.svgo: boolean | SvgoOptions`
+- **svgo**: (object, optional) Configuration for SVGO, refer to the [SVGO documentation](https://github.com/svg/svgo) for details.
 
-Enable [SVGO](https://github.com/svg/svgo) for optimizing SVG. Defaults to `true`.
+- **include**: (string | string[], optional) Paths to match SVG files that should be processed. Default is `'**/icons/*.svg'`, following [micromatch](https://github.com/micromatch/micromatch) rules.

package/cjs/index.d.ts

@@ -1,10 +1,12 @@
 import { Config as SvgoOptimizeOptions } from 'svgo';
 import { Plugin } from 'vite';
+declare const exportTypes: readonly ["vanilla", "react", "vue"];
 export type { SvgoOptimizeOptions };
 export interface SvgSpriteOptions {
     include?: string[] | string;
     symbolId?: string;
-    svgo?: boolean | SvgoOptimizeOptions;
+    svgo?: SvgoOptimizeOptions;
+    exportType?: (typeof exportTypes)[number];
     moduleSideEffects?: boolean;
 }
 declare const _default: (options?: SvgSpriteOptions) => Plugin<any>;

package/cjs/index.js

@@ -3,17 +3,21 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const path_1 = __importDefault(require("path"));
-const fs_1 = __importDefault(require("fs"));
-const crypto_1 = __importDefault(require("crypto"));
+const node_path_1 = __importDefault(require("node:path"));
+const node_fs_1 = __importDefault(require("node:fs"));
+const node_crypto_1 = __importDefault(require("node: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 svg_to_symbol_js_1 = require("./svg-to-symbol.js");
 const { stringify } = JSON;
+const exportTypes = ['vanilla', 'react', 'vue'];
+function getHash(content) {
+    const h = node_crypto_1.default.createHash('sha256');
+    h.update(content);
+    return h.digest('hex');
+}
 exports.default = (options) => {
     var _a;
-    const svgCompiler = new svg_baker_1.default();
     const match = (_a = options === null || options === void 0 ? void 0 : options.include) !== null && _a !== void 0 ? _a : '**.svg';
     const svgoOptions = options === null || options === void 0 ? void 0 : options.svgo;
     const plugin = {
@@ -25,37 +29,46 @@ exports.default = (options) => {
             })) {
                 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 code = await node_fs_1.default.promises.readFile(filepath, 'utf-8');
+            const hash = getHash(code).slice(0, 8);
+            const { name } = node_path_1.default.parse(filepath);
+            const optimizedSvg = (0, svgo_1.optimize)(code, {
+                ...svgoOptions,
+                plugins: [
+                    {
+                        name: 'prefixIds',
+                        params: {
+                            prefix: hash,
+                        },
+                    },
+                    ...(_a = svgoOptions === null || svgoOptions === void 0 ? void 0 : svgoOptions.plugins) !== null && _a !== void 0 ? _a : [],
+                ],
+            }).data;
+            const symbolId = ((_b = options === null || options === void 0 ? void 0 : options.symbolId) !== null && _b !== void 0 ? _b : 'icon-[name]').replace(/\[hash\]/g, hash).replace(/\[name\]/g, name);
+            const symbolResults = (0, svg_to_symbol_js_1.svgToSymbol)(optimizedSvg, symbolId);
+            if (!symbolResults) {
+                throw new Error(`invalid svg file: ${filepath}`);
             }
-            const { name } = path_1.default.parse(filepath);
-            if (svgoOptions !== false) {
-                const result = ((0, svgo_1.optimize)(code, svgoOptions === true ? undefined : svgoOptions));
-                code = result.data;
+            const { symbolXml, attributes } = symbolResults;
+            let exportType = options === null || options === void 0 ? void 0 : options.exportType;
+            if (!exportType || !exportTypes.includes(exportType)) {
+                exportType = 'vanilla';
             }
-            let id = name;
-            if (options === null || options === void 0 ? void 0 : options.symbolId) {
-                id = options.symbolId;
-                if (id.includes('[hash]')) {
-                    const hash = crypto_1.default.createHash('sha256');
-                    hash.update(code);
-                    id = id.replace(/\[hash\]/g, hash.digest('hex').slice(0, 6));
-                }
-                id = id.replace(/\[name\]/g, name);
-            }
-            const symbol = await svgCompiler.addSymbol({
-                id,
-                content: code,
-                path: filepath,
-            });
             const codeToReturn = `
-        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)} };
+        import addSymbol from 'vite-plugin-svg-sprite/runtime/inject.js';
+        import { adapter } from 'vite-plugin-svg-sprite/runtime/adapters/${exportType}.js';
+        const id = ${stringify(symbolId)};
+        const name = ${stringify(name)};
+        const symbolXml = ${stringify(symbolXml)};
+        const { dispose } = addSymbol(symbolXml, id);
+        
+        export default adapter(id, name);
+        export const attributes = ${stringify(attributes)}
+
+        if (import.meta.hot) {
+          import.meta.hot.dispose(dispose);
+          import.meta.hot.accept();
+        }
       `;
             return {
                 code: codeToReturn,

package/cjs/package.json

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

package/cjs/runtime/adapters/react.d.ts

@@ -0,0 +1,2 @@
+import { type Adapter } from '../types.js';
+export declare const adapter: Adapter;

package/cjs/runtime/adapters/react.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.adapter = void 0;
+const react_1 = require("react");
+const utils_js_1 = require("../utils.js");
+const adapter = (id, name) => {
+    const Icon = (0, react_1.memo)((props) => ((0, react_1.createElement)('svg', {
+        width: '1em',
+        height: '1em',
+        ...props,
+    }, (0, react_1.createElement)('use', { xlinkHref: `#${id}` }))));
+    Icon.displayName = `Icon${(0, utils_js_1.capitalizeFirstLetter)(name)}`;
+    return Icon;
+};
+exports.adapter = adapter;

package/cjs/runtime/adapters/vanilla.d.ts

@@ -0,0 +1,2 @@
+import { type Adapter } from '../types.js';
+export declare const adapter: Adapter;

package/cjs/runtime/adapters/vanilla.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.adapter = void 0;
+const adapter = (id) => id;
+exports.adapter = adapter;

package/cjs/runtime/adapters/vue.d.ts

@@ -0,0 +1,2 @@
+import { type Adapter } from '../types.js';
+export declare const adapter: Adapter;

package/cjs/runtime/adapters/vue.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.adapter = void 0;
+const vue_1 = require("vue");
+const utils_js_1 = require("../utils.js");
+const adapter = (id, name) => (0, vue_1.defineComponent)({
+    name: `Icon${(0, utils_js_1.capitalizeFirstLetter)(name)}`,
+    setup(props, { attrs }) {
+        return () => (0, vue_1.h)('svg', {
+            width: '1em',
+            height: '1em',
+            ...attrs,
+        }, [
+            (0, vue_1.h)('use', { 'xlink:href': `#${id}` }),
+        ]);
+    },
+});
+exports.adapter = adapter;

package/cjs/runtime/inject.d.ts

@@ -0,0 +1,3 @@
+type AddSymbol = (symbol: string, id: string) => () => void;
+declare const _default: AddSymbol;
+export default _default;

package/cjs/{runtime.js → runtime/inject.js}

@@ -2,13 +2,19 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 function createAddSymbol() {
     if (typeof window === 'undefined' || typeof document === 'undefined') {
-        return () => { };
+        return () => () => { };
     }
-    const idSet = window._SVG_SPRITE_IDS_ = window._SVG_SPRITE_IDS_ || [];
+    const idSet = (
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    window._SVG_SPRITE_IDS_ = window._SVG_SPRITE_IDS_ || new Set());
     const root = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
     root.style.position = 'absolute';
     root.style.width = '0';
     root.style.height = '0';
+    root.style.overflow = 'hidden';
+    root.ariaHidden = 'true';
+    // DO NOT SET THIS
+    // root.style.visibility = 'hidden';
     function insertRoot() {
         document.body.insertBefore(root, document.body.firstChild);
     }
@@ -19,11 +25,16 @@ function createAddSymbol() {
         insertRoot();
     }
     return function addSymbol(symbol, id) {
-        if (idSet.indexOf(id) > -1 || document.getElementById(id)) {
-            console.warn(`Icon #${id} was duplicately registered. It must be globally unique.`);
+        if (idSet.has(id) || document.getElementById(id)) {
+            console.warn(`Icon #${id} was repeatedly registered. It must be globally unique.`);
         }
-        idSet.push(id);
+        idSet.add(id);
         root.insertAdjacentHTML('beforeend', symbol);
+        const el = root.lastChild;
+        return function dispose() {
+            idSet.delete(id);
+            el === null || el === void 0 ? void 0 : el.remove();
+        };
     };
 }
 exports.default = createAddSymbol();

package/cjs/runtime/types.d.ts

@@ -0,0 +1 @@
+export type Adapter = (id: string, name: string) => unknown;

package/cjs/runtime/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/cjs/runtime/utils.d.ts

@@ -0,0 +1 @@
+export declare function capitalizeFirstLetter(text: string): string;

package/cjs/runtime/utils.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.capitalizeFirstLetter = capitalizeFirstLetter;
+function capitalizeFirstLetter(text) {
+    return text.charAt(0).toUpperCase() + text.slice(1);
+}

package/cjs/svg-to-symbol.d.ts

@@ -0,0 +1,8 @@
+export declare function svgToSymbol(xml: string, id: string): {
+    symbolXml: string;
+    attributes: {
+        width: string | null;
+        height: string | null;
+        viewBox: string | null;
+    };
+} | null;

package/cjs/svg-to-symbol.js

@@ -0,0 +1,54 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.svgToSymbol = svgToSymbol;
+const xmldom_1 = require("@xmldom/xmldom");
+const micromatch_1 = __importDefault(require("micromatch"));
+const preserveAttrs = [
+    'viewBox',
+    'preserveAspectRatio',
+    'class',
+    'overflow',
+    'stroke?(-*)',
+    'fill?(-*)',
+    'xmlns?(:*)',
+    'role',
+    'aria-*',
+];
+function findSvgNode(doc) {
+    return Array.from(doc.childNodes).find((node) => node.nodeType === doc.ELEMENT_NODE && node.tagName === 'svg');
+}
+function svgToSymbol(xml, id) {
+    const domParser = new xmldom_1.DOMParser();
+    const doc = domParser.parseFromString(xml.trim(), 'text/xml');
+    const svg = findSvgNode(doc);
+    if (!svg) {
+        return null;
+    }
+    const symbol = doc.createElement('symbol');
+    symbol.setAttribute('id', id);
+    Array.from(svg.attributes).forEach((attr) => {
+        if (micromatch_1.default.isMatch(attr.name, preserveAttrs)) {
+            symbol.setAttribute(attr.name, attr.value);
+        }
+    });
+    Array.from(svg.childNodes).forEach((node) => {
+        symbol.appendChild(node);
+    });
+    const width = svg.getAttribute('width');
+    const height = svg.getAttribute('height');
+    if (!symbol.hasAttribute('viewBox') && width && height) {
+        symbol.setAttribute('viewBox', `0 0 ${width} ${height}`);
+    }
+    const serializer = new xmldom_1.XMLSerializer();
+    return {
+        symbolXml: serializer.serializeToString(symbol),
+        attributes: {
+            width,
+            height,
+            viewBox: svg.getAttribute('viewBox'),
+        },
+    };
+}

package/esm/index.d.ts

@@ -1,10 +1,12 @@
 import { Config as SvgoOptimizeOptions } from 'svgo';
 import { Plugin } from 'vite';
+declare const exportTypes: readonly ["vanilla", "react", "vue"];
 export type { SvgoOptimizeOptions };
 export interface SvgSpriteOptions {
     include?: string[] | string;
     symbolId?: string;
-    svgo?: boolean | SvgoOptimizeOptions;
+    svgo?: SvgoOptimizeOptions;
+    exportType?: (typeof exportTypes)[number];
     moduleSideEffects?: boolean;
 }
 declare const _default: (options?: SvgSpriteOptions) => Plugin<any>;

package/esm/index.js

@@ -1,14 +1,18 @@
-import p from 'path';
-import fs from 'fs';
-import crypto from 'crypto';
+import p from 'node:path';
+import fs from 'node:fs';
+import crypto from 'node:crypto';
 import micromatch from 'micromatch';
-import SVGCompiler from 'svg-baker';
-import { parse } from 'svg-parser';
 import { optimize } from 'svgo';
+import { svgToSymbol } from './svg-to-symbol.js';
 const { stringify } = JSON;
+const exportTypes = ['vanilla', 'react', 'vue'];
+function getHash(content) {
+    const h = crypto.createHash('sha256');
+    h.update(content);
+    return h.digest('hex');
+}
 export default (options) => {
     var _a;
-    const svgCompiler = new SVGCompiler();
     const match = (_a = options === null || options === void 0 ? void 0 : options.include) !== null && _a !== void 0 ? _a : '**.svg';
     const svgoOptions = options === null || options === void 0 ? void 0 : options.svgo;
     const plugin = {
@@ -20,37 +24,46 @@ export default (options) => {
             })) {
                 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 code = await fs.promises.readFile(filepath, 'utf-8');
+            const hash = getHash(code).slice(0, 8);
             const { name } = p.parse(filepath);
-            if (svgoOptions !== false) {
-                const result = (optimize(code, svgoOptions === true ? undefined : svgoOptions));
-                code = result.data;
+            const optimizedSvg = optimize(code, {
+                ...svgoOptions,
+                plugins: [
+                    {
+                        name: 'prefixIds',
+                        params: {
+                            prefix: hash,
+                        },
+                    },
+                    ...(_a = svgoOptions === null || svgoOptions === void 0 ? void 0 : svgoOptions.plugins) !== null && _a !== void 0 ? _a : [],
+                ],
+            }).data;
+            const symbolId = ((_b = options === null || options === void 0 ? void 0 : options.symbolId) !== null && _b !== void 0 ? _b : 'icon-[name]').replace(/\[hash\]/g, hash).replace(/\[name\]/g, name);
+            const symbolResults = svgToSymbol(optimizedSvg, symbolId);
+            if (!symbolResults) {
+                throw new Error(`invalid svg file: ${filepath}`);
             }
-            let id = name;
-            if (options === null || options === void 0 ? void 0 : options.symbolId) {
-                id = options.symbolId;
-                if (id.includes('[hash]')) {
-                    const hash = crypto.createHash('sha256');
-                    hash.update(code);
-                    id = id.replace(/\[hash\]/g, hash.digest('hex').slice(0, 6));
-                }
-                id = id.replace(/\[name\]/g, name);
+            const { symbolXml, attributes } = symbolResults;
+            let exportType = options === null || options === void 0 ? void 0 : options.exportType;
+            if (!exportType || !exportTypes.includes(exportType)) {
+                exportType = 'vanilla';
             }
-            const symbol = await svgCompiler.addSymbol({
-                id,
-                content: code,
-                path: filepath,
-            });
             const codeToReturn = `
-        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)} };
+        import addSymbol from 'vite-plugin-svg-sprite/runtime/inject.js';
+        import { adapter } from 'vite-plugin-svg-sprite/runtime/adapters/${exportType}.js';
+        const id = ${stringify(symbolId)};
+        const name = ${stringify(name)};
+        const symbolXml = ${stringify(symbolXml)};
+        const { dispose } = addSymbol(symbolXml, id);
+        
+        export default adapter(id, name);
+        export const attributes = ${stringify(attributes)}
+
+        if (import.meta.hot) {
+          import.meta.hot.dispose(dispose);
+          import.meta.hot.accept();
+        }
       `;
             return {
                 code: codeToReturn,

package/esm/runtime/adapters/react.d.ts

@@ -0,0 +1,2 @@
+import { type Adapter } from '../types.js';
+export declare const adapter: Adapter;

package/esm/runtime/adapters/react.js

@@ -0,0 +1,11 @@
+import { memo, createElement } from 'react';
+import { capitalizeFirstLetter } from '../utils.js';
+export const adapter = (id, name) => {
+    const Icon = memo((props) => (createElement('svg', {
+        width: '1em',
+        height: '1em',
+        ...props,
+    }, createElement('use', { xlinkHref: `#${id}` }))));
+    Icon.displayName = `Icon${capitalizeFirstLetter(name)}`;
+    return Icon;
+};

package/esm/runtime/adapters/vanilla.d.ts

@@ -0,0 +1,2 @@
+import { type Adapter } from '../types.js';
+export declare const adapter: Adapter;

package/esm/runtime/adapters/vanilla.js

@@ -0,0 +1 @@
+export const adapter = (id) => id;

package/esm/runtime/adapters/vue.d.ts

@@ -0,0 +1,2 @@
+import { type Adapter } from '../types.js';
+export declare const adapter: Adapter;

package/esm/runtime/adapters/vue.js

@@ -0,0 +1,14 @@
+import { defineComponent, h } from 'vue';
+import { capitalizeFirstLetter } from '../utils.js';
+export const adapter = (id, name) => defineComponent({
+    name: `Icon${capitalizeFirstLetter(name)}`,
+    setup(props, { attrs }) {
+        return () => h('svg', {
+            width: '1em',
+            height: '1em',
+            ...attrs,
+        }, [
+            h('use', { 'xlink:href': `#${id}` }),
+        ]);
+    },
+});

package/esm/runtime/inject.d.ts

@@ -0,0 +1,3 @@
+type AddSymbol = (symbol: string, id: string) => () => void;
+declare const _default: AddSymbol;
+export default _default;

package/esm/{runtime.js → runtime/inject.js}

@@ -1,12 +1,18 @@
 function createAddSymbol() {
     if (typeof window === 'undefined' || typeof document === 'undefined') {
-        return () => { };
+        return () => () => { };
     }
-    const idSet = window._SVG_SPRITE_IDS_ = window._SVG_SPRITE_IDS_ || [];
+    const idSet = (
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    window._SVG_SPRITE_IDS_ = window._SVG_SPRITE_IDS_ || new Set());
     const root = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
     root.style.position = 'absolute';
     root.style.width = '0';
     root.style.height = '0';
+    root.style.overflow = 'hidden';
+    root.ariaHidden = 'true';
+    // DO NOT SET THIS
+    // root.style.visibility = 'hidden';
     function insertRoot() {
         document.body.insertBefore(root, document.body.firstChild);
     }
@@ -17,11 +23,16 @@ function createAddSymbol() {
         insertRoot();
     }
     return function addSymbol(symbol, id) {
-        if (idSet.indexOf(id) > -1 || document.getElementById(id)) {
-            console.warn(`Icon #${id} was duplicately registered. It must be globally unique.`);
+        if (idSet.has(id) || document.getElementById(id)) {
+            console.warn(`Icon #${id} was repeatedly registered. It must be globally unique.`);
         }
-        idSet.push(id);
+        idSet.add(id);
         root.insertAdjacentHTML('beforeend', symbol);
+        const el = root.lastChild;
+        return function dispose() {
+            idSet.delete(id);
+            el === null || el === void 0 ? void 0 : el.remove();
+        };
     };
 }
 export default createAddSymbol();

package/esm/runtime/types.d.ts

@@ -0,0 +1 @@
+export type Adapter = (id: string, name: string) => unknown;

package/esm/runtime/types.js

@@ -0,0 +1 @@
+export {};

package/esm/runtime/utils.d.ts

@@ -0,0 +1 @@
+export declare function capitalizeFirstLetter(text: string): string;

package/esm/runtime/utils.js

@@ -0,0 +1,3 @@
+export function capitalizeFirstLetter(text) {
+    return text.charAt(0).toUpperCase() + text.slice(1);
+}

package/esm/svg-to-symbol.d.ts

@@ -0,0 +1,8 @@
+export declare function svgToSymbol(xml: string, id: string): {
+    symbolXml: string;
+    attributes: {
+        width: string | null;
+        height: string | null;
+        viewBox: string | null;
+    };
+} | null;

package/esm/svg-to-symbol.js

@@ -0,0 +1,48 @@
+import { DOMParser, XMLSerializer, } from '@xmldom/xmldom';
+import micromatch from 'micromatch';
+const preserveAttrs = [
+    'viewBox',
+    'preserveAspectRatio',
+    'class',
+    'overflow',
+    'stroke?(-*)',
+    'fill?(-*)',
+    'xmlns?(:*)',
+    'role',
+    'aria-*',
+];
+function findSvgNode(doc) {
+    return Array.from(doc.childNodes).find((node) => node.nodeType === doc.ELEMENT_NODE && node.tagName === 'svg');
+}
+export function svgToSymbol(xml, id) {
+    const domParser = new DOMParser();
+    const doc = domParser.parseFromString(xml.trim(), 'text/xml');
+    const svg = findSvgNode(doc);
+    if (!svg) {
+        return null;
+    }
+    const symbol = doc.createElement('symbol');
+    symbol.setAttribute('id', id);
+    Array.from(svg.attributes).forEach((attr) => {
+        if (micromatch.isMatch(attr.name, preserveAttrs)) {
+            symbol.setAttribute(attr.name, attr.value);
+        }
+    });
+    Array.from(svg.childNodes).forEach((node) => {
+        symbol.appendChild(node);
+    });
+    const width = svg.getAttribute('width');
+    const height = svg.getAttribute('height');
+    if (!symbol.hasAttribute('viewBox') && width && height) {
+        symbol.setAttribute('viewBox', `0 0 ${width} ${height}`);
+    }
+    const serializer = new XMLSerializer();
+    return {
+        symbolXml: serializer.serializeToString(symbol),
+        attributes: {
+            width,
+            height,
+            viewBox: svg.getAttribute('viewBox'),
+        },
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-svg-sprite",
-  "version": "0.5.2",
+  "version": "0.6.1",
   "description": "SVG sprite plugin for Vite",
   "type": "module",
   "exports": {
@@ -14,18 +14,9 @@
         "default": "./cjs/index.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"
+    "./runtime/*.js": "./esm/runtime/*.js",
+    "./react": {
+      "types": "./react.d.ts"
     }
   },
   "main": "cjs/index.js",
@@ -33,14 +24,12 @@
   "files": [
     "cjs",
     "esm",
-    "src",
-    "client.d.ts",
-    "index.mjs",
+    "typings",
     "LICENSE"
   ],
   "scripts": {
     "lint": "eslint src",
-    "build": "rm -rf cjs esm && tsc && npx tsc -m commonjs --outDir cjs && cp ./package-cjs.json cjs/package.json",
+    "build": "shx rm -rf cjs esm && tsc && tsc -m commonjs --outDir cjs && shx cp ./package-cjs.json cjs/package.json",
     "prepublishOnly": "npm run build"
   },
   "keywords": [
@@ -56,24 +45,31 @@
   "devDependencies": {
     "@types/micromatch": "^4.0.1",
     "@types/node": "^20.4.2",
-    "@types/svgo": "^3.0.0",
-    "@types/svg-parser": "^2.0.3",
-
-    "@typescript-eslint/eslint-plugin": "^7.7.1",
-    "eslint": "^8.45.0",
-    "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-config-airbnb-typescript": "^18.0.0",
-    "eslint-plugin-import": "^2.22.1",
+    "@types/react": "^18.3.12",
+    "eslint": "^9.17.0",
+    "shx": "^0.3.4",
     "typescript": "^5.1.6",
-    "vite": "^5.0.0"
+    "typescript-eslint": "^8.18.0",
+    "vite": "^6.0.3",
+    "vue": "^3.5.13"
   },
   "dependencies": {
+    "@xmldom/xmldom": "^0.9.4",
     "micromatch": "^4.0.2",
-    "svg-baker": "~1.7.0",
-    "svg-parser": "^2.0.4",
     "svgo": "^3.0.2"
   },
   "peerDependencies": {
-    "vite": "^2 || ^3 || ^4 || ^5"
-  }
+    "react": "17 || 18 || 19",
+    "vite": "2 || 3 || 4 || 5 || 6",
+    "vue": "3"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    }
+  },
+  "packageManager": "pnpm@9.12.3+sha512.cce0f9de9c5a7c95bef944169cc5dfe8741abfb145078c0d508b868056848a87c81e626246cb60967cbd7fd29a6c062ef73ff840d96b3c86c40ac92cf4a813ee"
 }

package/typings/internal.d.ts

@@ -0,0 +1 @@
+declare module 'domready';

package/typings/react.d.ts

@@ -0,0 +1,11 @@
+declare module '*.svg' {
+  import { SVGAttributes, ComponentClass } from 'react';
+
+  const Component: ComponentClass<SVGAttributes<SVGElement>>;
+  export default Component;
+  export const attributes: {
+    width?: string;
+    height?: string;
+    viewBox?: string;
+  };
+}

package/typings/vallina.d.ts

@@ -0,0 +1,9 @@
+declare module '*.svg' {
+  const symbolId: string;
+  export default symbolId;
+  export const attributes: {
+    width?: string;
+    height?: string;
+    viewBox?: string;
+  };
+}

package/typings/vue.d.ts

@@ -0,0 +1,11 @@
+declare module '*.svg' {
+  import { Component } from 'vue';
+
+  const component: Component<SVGAttributes<SVGElement>>;
+  export default component;
+  export const attributes: {
+    width?: string;
+    height?: string;
+    viewBox?: string;
+  };
+}

package/cjs/runtime.d.ts

@@ -1,2 +0,0 @@
-declare const _default: (symbol: string, id: string) => void;
-export default _default;

package/client.d.ts

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

package/esm/runtime.d.ts

@@ -1,2 +0,0 @@
-declare const _default: (symbol: string, id: string) => void;
-export default _default;

package/src/index.ts

@@ -1,85 +0,0 @@
-import p from 'path';
-import fs from 'fs';
-import crypto from 'crypto';
-import micromatch from 'micromatch';
-import SVGCompiler from 'svg-baker';
-import { parse } from 'svg-parser';
-import { optimize, Config as SvgoOptimizeOptions } from 'svgo';
-import { Plugin } from 'vite';
-
-const { stringify } = JSON;
-
-export type { SvgoOptimizeOptions };
-export interface SvgSpriteOptions {
-  include?: string[] | string;
-  symbolId?: string;
-  svgo?: boolean | SvgoOptimizeOptions;
-  moduleSideEffects?: boolean;
-}
-
-export default (options?: SvgSpriteOptions) => {
-  const svgCompiler = new SVGCompiler();
-  const match = options?.include ?? '**.svg';
-  const svgoOptions = options?.svgo;
-
-  const plugin: Plugin = {
-    name: 'svg-sprite',
-
-    async transform(src, filepath) {
-      if (!micromatch.isMatch(filepath, match, {
-        dot: true,
-      })) {
-        return undefined;
-      }
-
-      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));
-        code = result.data;
-      }
-
-      let id = name;
-
-      if (options?.symbolId) {
-        id = options.symbolId;
-
-        if (id.includes('[hash]')) {
-          const hash = crypto.createHash('sha256');
-          hash.update(code);
-          id = id.replace(/\[hash\]/g, hash.digest('hex').slice(0, 6));
-        }
-
-        id = id.replace(/\[name\]/g, name);
-      }
-
-      const symbol = await svgCompiler.addSymbol({
-        id,
-        content: code,
-        path: filepath,
-      });
-
-      const codeToReturn = `
-        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,
-        moduleSideEffects: options?.moduleSideEffects ?? true,
-        map: { mappings: '' },
-      };
-    },
-  };
-
-  return plugin;
-};

package/src/runtime.ts

@@ -1,33 +0,0 @@
-function createAddSymbol() {
-  if (typeof window === 'undefined' || typeof document === 'undefined') {
-    return () => {};
-  }
-
-  const idSet = (window as any)._SVG_SPRITE_IDS_ = (window as any)._SVG_SPRITE_IDS_ || [];
-
-  const root = document.createElementNS('http://www.w3.org/2000/svg', 'svg') as SVGSVGElement;
-  root.style.position = 'absolute';
-  root.style.width = '0';
-  root.style.height = '0';
-
-  function insertRoot() {
-    document.body.insertBefore(root, document.body.firstChild);
-  }
-
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', insertRoot);
-  } else {
-    insertRoot();
-  }
-
-  return function addSymbol(symbol: string, id: string) {
-    if (idSet.indexOf(id) > -1 || document.getElementById(id)) {
-      console.warn(`Icon #${id} was duplicately registered. It must be globally unique.`);
-    }
-    idSet.push(id);
-
-    root.insertAdjacentHTML('beforeend', symbol);
-  };
-}
-
-export default createAddSymbol();