Merge pull request #42 from SpiriitLabs/dev

Version 2.2.2
SpiriitLabs · Jan 14, 2024 · 579a403 · 579a403
2 parents b1e39a5 + f3105b8
commit 579a403
Show file tree

Hide file tree

Showing 9 changed files with 28 additions and 16 deletions.
diff --git a/demo/basic/index.html b/demo/basic/index.html
@@ -16,10 +16,10 @@ <h2>Spritemap with &lt;use></h2>
 
       <div class="example__svgs">
         <svg class="icon icon-spiriit">
-          <use href="/__spritemap#icon-spiriit"></use>
+          <use xlink:href="/__spritemap#icon-spiriit"></use>
         </svg>
         <svg class="icon icon-vite">
-          <use href="/__spritemap#icon-vite"></use>
+          <use xlink:href="/__spritemap#icon-vite"></use>
         </svg>
       </div>
     </div>

diff --git a/demo/server/routes/index.pug b/demo/server/routes/index.pug
@@ -2,7 +2,7 @@ mixin svgUse(name, width, height)
   // You will need to handle yourself the svg path if vite running dev or not
   - const url = mode === 'development' ? `#icon-${name}` : `${mSpritemap}#icon-${name}`
   svg(class=`icon icon-${name}` width=width height=height)
-    use(href=url)
+    use(xlink:href=url)
 
 mixin svgView(name, width, height)
   // You will need to handle yourself the svg path if vite running dev or not

diff --git a/demo/svelte/src/App.svelte b/demo/svelte/src/App.svelte
@@ -12,10 +12,10 @@
 
       <div class="example__svgs">
         <svg class="icon icon-spiriit">
-          <use href="/__spritemap#icon-spiriit"></use>
+          <use xlink:href="/__spritemap#icon-spiriit"></use>
         </svg>
         <svg class="icon icon-vite">
-          <use href="/__spritemap#icon-vite"></use>
+          <use xlink:href="/__spritemap#icon-vite"></use>
         </svg>
       </div>
     </div>

diff --git a/demo/sveltekit/src/routes/+page.svelte b/demo/sveltekit/src/routes/+page.svelte
@@ -12,10 +12,10 @@ import './../../../_fixtures/scss/style.scss'
 
       <div class="example__svgs">
         <svg class="icon icon-spiriit">
-          <use href="/__spritemap#icon-spiriit"></use>
+          <use xlink:href="/__spritemap#icon-spiriit"></use>
         </svg>
         <svg class="icon icon-vite">
-          <use href="/__spritemap#icon-vite"></use>
+          <use xlink:href="/__spritemap#icon-vite"></use>
         </svg>
       </div>
     </div>

diff --git a/eslint.config.js b/eslint.config.js
@@ -1,3 +1,3 @@
 import antfu from '@antfu/eslint-config'
 
-export default await antfu()
+export default antfu()
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@spiriit/vite-plugin-svg-spritemap",
   "type": "module",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "packageManager": "pnpm@8.14.1",
   "description": "Generates symbol-based SVG spritemap from all .svg files in a directory",
   "author": "Spiriit",

diff --git a/src/plugins/build.ts b/src/plugins/build.ts
@@ -10,6 +10,7 @@ export default function BuildPlugin(iconsPattern: Pattern, options: Options): Pl
   let fileRef: string
   let fileName: string
   let svgManager: SVGManager
+  const spritemapFilter = /\/__spritemap/g
   const pluginExternal: ExternalOption = /\/__spritemap/
 
   return <Plugin>{
@@ -69,11 +70,22 @@ export default function BuildPlugin(iconsPattern: Pattern, options: Options): Pl
       }
     },
     transform(code) {
-      if (typeof options.output === 'object') {
-        return {
-          code: code.replace(/\/__spritemap/g, path.join(config.base, this.getFileName(fileRef))),
-          map: null,
-        }
+      if (typeof options.output !== 'object' || !spritemapFilter.test(code))
+        return
+
+      const { join } = path.posix
+
+      // prevent sveltekit rewrite
+      const base = config.base.startsWith('.')
+        ? config.base.substring(1)
+        : config.base
+
+      return {
+        code: code.replace(
+          spritemapFilter,
+          join(base, this.getFileName(fileRef)),
+        ),
+        map: null,
       }
     },
   }

diff --git a/src/plugins/vue.ts b/src/plugins/vue.ts
@@ -39,7 +39,7 @@ export default function VuePlugin(iconsPattern: Pattern, options: Options): Plug
         source = `<img src="/__spritemap#${options.prefix}${name}-view" ${[width, height].filter(item => item.length > 0).join(' ')}/>`
       }
       else {
-        source = `<svg><slot/><use href="/__spritemap#${options.prefix}${name}"></use></svg>`
+        source = `<svg><slot/><use xlink:href="/__spritemap#${options.prefix}${name}"></use></svg>`
       }
 
       const { compileTemplate } = await import('vue/compiler-sfc')

diff --git a/test/__snapshots__/vue.test.ts.snap b/test/__snapshots__/vue.test.ts.snap
@@ -10,7 +10,7 @@ exports[`vue components > has components 1`] = `
     <title>Vite + Vue + TS</title>
   </head>
   <body>
-    <div id="app" data-v-app=""><svg><title>My superb logo</title><use href="/__spritemap#sprite-spiriit"></use></svg><svg><use href="/__spritemap#sprite-vite"></use></svg><img src="/__spritemap#sprite-spiriit-view" width="118" height="38"><img src="/__spritemap#sprite-vite-view" width="32" height="32"></div>
+    <div id="app" data-v-app=""><svg><title>My superb logo</title><use xlink:href="/__spritemap#sprite-spiriit"></use></svg><svg><use xlink:href="/__spritemap#sprite-vite"></use></svg><img src="/__spritemap#sprite-spiriit-view" width="118" height="38"><img src="/__spritemap#sprite-vite-view" width="32" height="32"></div>
     <script type="module" src="/main.ts"></script>
   <script type="module" src="/@vite-plugin-svg-spritemap/client"></script>