vite-plugin-svg-sprite 0.6.2 → 0.6.3

package/README.md

@@ -63,7 +63,7 @@ For users not using React or Vue, set the `exportType` to `'vanilla'`. The impor
 import IconFoo from './icons/foo.svg';
 const html = `
   <svg>
-    <use xlink:href="#${IconFoo}" />
+    <use href="#${IconFoo}" />
   </svg>
 `;
 ```
@@ -83,7 +83,7 @@ To get proper type hints in TypeScript, include the appropriate type definitions
 
 - **symbolId**: (`string`, optional) Controls the generated symbol ID. Default is `'icon-[name]'`.
 
-- **exportType**: (`'vanilla' | 'react' | 'vue'`, optional) Determines the type of the exported value. Default is `'vanilla'`. 
+- **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.

package/cjs/index.d.ts

@@ -1,13 +1,31 @@
 import { Config as SvgoOptimizeOptions } from 'svgo';
 import { Plugin } from 'vite';
 declare const exportTypes: readonly ["vanilla", "react", "vue"];
+export interface DefaultExportType {
+    exportType?: (typeof exportTypes)[number];
+}
+interface AdapterOptions {
+    id: string;
+    name: string;
+    symbolXml: string;
+    attributes: {
+        width?: string | null;
+        height?: string | null;
+        viewBox?: string | null;
+    };
+}
+export interface CustomExportType {
+    exportType: 'custom';
+    adapter: (options: AdapterOptions) => unknown;
+}
+type ExportType = DefaultExportType | CustomExportType;
 export type { SvgoOptimizeOptions };
-export interface SvgSpriteOptions {
+export interface BaseSvgSpriteOptions {
     include?: string[] | string;
     symbolId?: string;
     svgo?: SvgoOptimizeOptions;
-    exportType?: (typeof exportTypes)[number];
     moduleSideEffects?: boolean;
 }
+type SvgSpriteOptions = BaseSvgSpriteOptions & ExportType;
 declare const _default: (options?: SvgSpriteOptions) => Plugin<any>;
 export default _default;

package/cjs/index.js

@@ -16,10 +16,49 @@ function getHash(content) {
     h.update(content);
     return h.digest('hex');
 }
+function prepareTemplate(props) {
+    return (options) => {
+        var _a;
+        return `
+      import addSymbol from 'vite-plugin-svg-sprite/runtime/inject.js';
+      ${(_a = props.adapterImport) !== null && _a !== void 0 ? _a : ''}
+
+      const id = ${stringify(options.id)};
+      const name = ${stringify(options.name)};
+      const symbolXml = ${stringify(options.symbolXml)};
+      const { dispose } = addSymbol(symbolXml, id);
+      
+      export default ${props.adapter};
+      export const attributes = ${stringify(options.attributes)}
+
+      if (import.meta.hot) {
+        import.meta.hot.dispose(dispose);
+        import.meta.hot.accept();
+      }
+    `;
+    };
+}
+function getModuleTemplate(type = {}) {
+    if (type.exportType === 'custom') {
+        if (!type.adapter) {
+            throw new Error('Export type is set to "custom", but adapter is not provided. Please add "adapter" option in config.');
+        }
+        return prepareTemplate({ adapter: type.adapter.toString() });
+    }
+    const { exportType = 'vanilla' } = type;
+    if (!exportTypes.includes(exportType)) {
+        throw new Error('Unknown export type, supported types: "custom", "react", "vanilla", "vue".');
+    }
+    return prepareTemplate({
+        adapterImport: `import { adapter } from 'vite-plugin-svg-sprite/runtime/adapters/${exportType}.js';`,
+        adapter: 'adapter(id, name)'
+    });
+}
 exports.default = (options) => {
     var _a;
     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 moduleTemplate = getModuleTemplate(options);
     const plugin = {
         name: 'svg-sprite',
         async transform(src, filepath) {
@@ -50,28 +89,8 @@ exports.default = (options) => {
                 throw new Error(`invalid svg file: ${filepath}`);
             }
             const { symbolXml, attributes } = symbolResults;
-            let exportType = options === null || options === void 0 ? void 0 : options.exportType;
-            if (!exportType || !exportTypes.includes(exportType)) {
-                exportType = 'vanilla';
-            }
-            const codeToReturn = `
-        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,
+                code: moduleTemplate({ id: symbolId, name, symbolXml, attributes }),
                 moduleSideEffects: (_c = options === null || options === void 0 ? void 0 : options.moduleSideEffects) !== null && _c !== void 0 ? _c : true,
                 map: { mappings: '' },
             };

package/cjs/runtime/adapters/react.js

@@ -8,7 +8,7 @@ const adapter = (id, name) => {
         width: '1em',
         height: '1em',
         ...props,
-    }, (0, react_1.createElement)('use', { xlinkHref: `#${id}` }))));
+    }, (0, react_1.createElement)('use', { href: `#${id}` }))));
     Icon.displayName = `Icon${(0, utils_js_1.capitalizeFirstLetter)(name)}`;
     return Icon;
 };

package/cjs/runtime/adapters/vue.js

@@ -11,7 +11,7 @@ const adapter = (id, name) => (0, vue_1.defineComponent)({
             height: '1em',
             ...attrs,
         }, [
-            (0, vue_1.h)('use', { 'xlink:href': `#${id}` }),
+            (0, vue_1.h)('use', { href: `#${id}` }),
         ]);
     },
 });

package/esm/index.d.ts

@@ -1,13 +1,31 @@
 import { Config as SvgoOptimizeOptions } from 'svgo';
 import { Plugin } from 'vite';
 declare const exportTypes: readonly ["vanilla", "react", "vue"];
+export interface DefaultExportType {
+    exportType?: (typeof exportTypes)[number];
+}
+interface AdapterOptions {
+    id: string;
+    name: string;
+    symbolXml: string;
+    attributes: {
+        width?: string | null;
+        height?: string | null;
+        viewBox?: string | null;
+    };
+}
+export interface CustomExportType {
+    exportType: 'custom';
+    adapter: (options: AdapterOptions) => unknown;
+}
+type ExportType = DefaultExportType | CustomExportType;
 export type { SvgoOptimizeOptions };
-export interface SvgSpriteOptions {
+export interface BaseSvgSpriteOptions {
     include?: string[] | string;
     symbolId?: string;
     svgo?: SvgoOptimizeOptions;
-    exportType?: (typeof exportTypes)[number];
     moduleSideEffects?: boolean;
 }
+type SvgSpriteOptions = BaseSvgSpriteOptions & ExportType;
 declare const _default: (options?: SvgSpriteOptions) => Plugin<any>;
 export default _default;

package/esm/index.js

@@ -11,10 +11,49 @@ function getHash(content) {
     h.update(content);
     return h.digest('hex');
 }
+function prepareTemplate(props) {
+    return (options) => {
+        var _a;
+        return `
+      import addSymbol from 'vite-plugin-svg-sprite/runtime/inject.js';
+      ${(_a = props.adapterImport) !== null && _a !== void 0 ? _a : ''}
+
+      const id = ${stringify(options.id)};
+      const name = ${stringify(options.name)};
+      const symbolXml = ${stringify(options.symbolXml)};
+      const { dispose } = addSymbol(symbolXml, id);
+      
+      export default ${props.adapter};
+      export const attributes = ${stringify(options.attributes)}
+
+      if (import.meta.hot) {
+        import.meta.hot.dispose(dispose);
+        import.meta.hot.accept();
+      }
+    `;
+    };
+}
+function getModuleTemplate(type = {}) {
+    if (type.exportType === 'custom') {
+        if (!type.adapter) {
+            throw new Error('Export type is set to "custom", but adapter is not provided. Please add "adapter" option in config.');
+        }
+        return prepareTemplate({ adapter: type.adapter.toString() });
+    }
+    const { exportType = 'vanilla' } = type;
+    if (!exportTypes.includes(exportType)) {
+        throw new Error('Unknown export type, supported types: "custom", "react", "vanilla", "vue".');
+    }
+    return prepareTemplate({
+        adapterImport: `import { adapter } from 'vite-plugin-svg-sprite/runtime/adapters/${exportType}.js';`,
+        adapter: 'adapter(id, name)'
+    });
+}
 export default (options) => {
     var _a;
     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 moduleTemplate = getModuleTemplate(options);
     const plugin = {
         name: 'svg-sprite',
         async transform(src, filepath) {
@@ -45,28 +84,8 @@ export default (options) => {
                 throw new Error(`invalid svg file: ${filepath}`);
             }
             const { symbolXml, attributes } = symbolResults;
-            let exportType = options === null || options === void 0 ? void 0 : options.exportType;
-            if (!exportType || !exportTypes.includes(exportType)) {
-                exportType = 'vanilla';
-            }
-            const codeToReturn = `
-        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,
+                code: moduleTemplate({ id: symbolId, name, symbolXml, attributes }),
                 moduleSideEffects: (_c = options === null || options === void 0 ? void 0 : options.moduleSideEffects) !== null && _c !== void 0 ? _c : true,
                 map: { mappings: '' },
             };

package/esm/runtime/adapters/react.js

@@ -5,7 +5,7 @@ export const adapter = (id, name) => {
         width: '1em',
         height: '1em',
         ...props,
-    }, createElement('use', { xlinkHref: `#${id}` }))));
+    }, createElement('use', { href: `#${id}` }))));
     Icon.displayName = `Icon${capitalizeFirstLetter(name)}`;
     return Icon;
 };

package/esm/runtime/adapters/vue.js

@@ -8,7 +8,7 @@ export const adapter = (id, name) => defineComponent({
             height: '1em',
             ...attrs,
         }, [
-            h('use', { 'xlink:href': `#${id}` }),
+            h('use', { href: `#${id}` }),
         ]);
     },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-svg-sprite",
-  "version": "0.6.2",
+  "version": "0.6.3",
   "description": "SVG sprite plugin for Vite",
   "type": "module",
   "exports": {
@@ -60,7 +60,7 @@
   },
   "peerDependencies": {
     "react": "17 || 18 || 19",
-    "vite": "2 || 3 || 4 || 5 || 6",
+    "vite": "2 || 3 || 4 || 5 || 6 || 7",
     "vue": "3"
   },
   "peerDependenciesMeta": {