Version 2.2.0

README.md

@@ -43,13 +43,13 @@ export default {
 }
 ```
 
-You can access to the spritemap via the route `__spritemap`. All files process by ViteJS will transform the path of the file on build. By default, you will need to use the prefix `sprite-`.
+You can access to the spritemap via the route `/__spritemap`. All files process by ViteJS will transform the path of the file on build. By default, you will need to use the prefix `sprite-`.
 
 **SVG**
 
 ```html
 <svg>
-  <use xlink:href="__spritemap#sprite-spiriit"></use>
+  <use xlink:href="/__spritemap#sprite-spiriit"></use>
 </svg>
 ```
 
@@ -58,7 +58,7 @@ You can access to the spritemap via the route `__spritemap`. All files process b
 You need to add the suffix `-view` to access to the fragment.
 
 ```html
-<img src="__spritemap#sprite-spiriit-view" />
+<img src="/__spritemap#sprite-spiriit-view" />
 ```
 
 **CSS**
@@ -127,19 +127,41 @@ will generate
 ```html
 <svg>
   <title>My superb logo</title>
-  <use xlink:href="__spritemap#sprite-spiriit"></use>
+  <use xlink:href="/__spritemap#sprite-spiriit"></use>
 </svg>
 <svg>
-  <use xlink:href="__spritemap#sprite-vite"></use>
+  <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="31" height="32">
+<img src="/__spritemap#sprite-spiriit-view" width="118" height="38">
+<img src="/__spritemap#sprite-vite-view" width="31" height="32">
 ```
 
 > For typescript, you need to load `/// <reference types="@spiriit/vite-plugin-svg-spritemap/client" />` to fix errors with `?use`/`?view` query.
 
 You can see the usage in the [corresponding demo folder](/demo/vue/src/App.vue).
 
+### Usage with Nuxt 3
+
+> [!NOTE]
+> This plugin only works with Nuxt 3 and Vite as a bundler.
+
+You just need to install the plugin and set it in the right place for Nuxt 3.
+
+```ts
+// nuxt.config.ts
+import VitePluginSvgSpritemap from '@spiriit/vite-plugin-svg-spritemap'
+
+export default defineNuxtConfig({
+  vite: {
+    plugins: [
+      VitePluginSvgSpritemap('./assets/icons/*.svg'),
+    ]
+  }
+})
+```
+
+For usage with TypeScript, you will need to invoke in a `.d.ts` file the reference type `/// <reference types="@spiriit/vite-plugin-svg-spritemap/dist/client" />` (see [issue #38](https://github.com/SpiriitLabs/vite-plugin-svg-spritemap/issues/38)) to use `?use`/`?view` query.
+
 ### Use for backend integration
 
 ViteJS allows to be use to [serve assets](https://vitejs.dev/guide/backend-integration.html). So, you can connect ViteJS with Wordpress, Drupal or any kind of backend.

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 href="/__spritemap#icon-spiriit"></use>
         </svg>
         <svg class="icon icon-vite">
-          <use href="__spritemap#icon-vite"></use>
+          <use href="/__spritemap#icon-vite"></use>
         </svg>
       </div>
     </div>
@@ -28,8 +28,8 @@ <h2>Spritemap with &lt;use></h2>
       <h2>Spritemap with &lt;img> (fragments)</h2>
 
       <div class="example__svgs">
-        <img class="icon icon-spiriit" src="__spritemap#icon-spiriit-view" />
-        <img class="icon icon-vite" src="__spritemap#icon-vite-view" />
+        <img class="icon icon-spiriit" src="/__spritemap#icon-spiriit-view" />
+        <img class="icon icon-vite" src="/__spritemap#icon-vite-view" />
       </div>
     </div>
 

demo/basic/package.json

@@ -12,11 +12,11 @@
     "@spiriit/vite-plugin-svg-spritemap": "workspace:*",
     "autoprefixer": "^10.4.16",
     "less": "^4.2.0",
-    "postcss": "^8.4.32",
-    "sass": "^1.69.5",
+    "postcss": "^8.4.33",
+    "sass": "^1.69.7",
     "stylus": "^0.62.0",
     "typescript": "^5.3.3",
-    "vite": "^5.0.10",
+    "vite": "^5.0.11",
     "vite-plugin-inspect": "^0.8.1"
   }
 }

demo/basic/src/scss/spritemap.scss

@@ -3,12 +3,12 @@
 $sprites-prefix: 'icon-';
 $sprites: (
 	'spiriit': (
-		uri: "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' width='118' height='38' viewBox='0 0 125 41'%3e%3cpath d='M0 25.5h6.2c.4 1.9 2.2 3 4.6 3 2.3 0 3.9-.7 3.9-2.5 0-1.2-.7-2-2.5-2.3l-5.8-1c-4-.7-6-2.6-6-6 0-4.7 4.5-7 9.9-7 5.7 0 9.6 2.6 9.9 7h-6c-.3-1.7-1.7-2.6-4-2.6-2 0-3.6.6-3.6 2.1 0 1 .6 1.7 2.3 2l5.8.9c4.1.7 6.2 2.7 6.2 6.2 0 5.2-4.7 7.6-10.2 7.6C5.2 32.9.6 30.4 0 25.5m48-4.2c0 6.4-3.7 11.7-9.5 11.7-3.4 0-6.6-1.6-7.7-7.3v14.9h-6.6V10h5.6l.7 6.6c1.4-5.6 4.7-7 8.3-7 5.5 0 9.2 5.2 9.2 11.7m-6.6 0c0-3.4-2.1-6.4-5.3-6.4-3.3 0-5.3 2.8-5.3 6.4s2 6.3 5.3 6.3c3.2 0 5.3-2.9 5.3-6.3M60 32.6h-6.6V15.2h-3.3V10H60zM53.1 3.9c0-2.2 1.6-3.4 3.6-3.4s3.6 1.1 3.6 3.4c0 2.2-1.6 3.3-3.6 3.3-2.1 0-3.6-1.1-3.6-3.3m27 6.1v5.2h-2.6c-3.9 0-6 2.1-6 6.4v11h-6.6V10h5.4l.6 7c.9-5.2 3.4-7 6.5-7h2.7zM93 32.6h-6.6V15.2h-3.3V10H93zM86.1 3.9c0-2.2 1.6-3.4 3.6-3.4s3.6 1.1 3.6 3.4c0 2.2-1.6 3.3-3.6 3.3s-3.6-1.1-3.6-3.3M125 27.1v5.4h-4.7c-4.8 0-7.2-2.5-7.2-7.4v-9.9h-3.3V10h3.3V3.9h6.6v1.3c0 2.3-1.4 4.8-4.9 4.8H125v5.2h-5.2v9c0 1.9 1 2.9 2.8 2.9h2.4z'/%3e%3cpath fill='%233960ff' d='M106.6 32.6H100V15.2h-3.3V10h9.9v22.6zM99.7 3.9c0-2.2 1.6-3.4 3.6-3.4s3.6 1.1 3.6 3.4c0 2.2-1.6 3.3-3.6 3.3s-3.6-1.1-3.6-3.3'/%3e%3c/svg%3e",
+		uri: "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' width='118' height='38' viewBox='0 0 125 41'%3e%3cpath d='M0 25.5h6.2c.4 1.9 2.2 3 4.6 3 2.3 0 3.9-.7 3.9-2.5 0-1.2-.7-2-2.5-2.3l-5.8-1c-4-.7-6-2.6-6-6 0-4.7 4.5-7 9.9-7 5.7 0 9.6 2.6 9.9 7h-6c-.3-1.7-1.7-2.6-4-2.6-2 0-3.6.6-3.6 2.1 0 1 .6 1.7 2.3 2l5.8.9c4.1.7 6.2 2.7 6.2 6.2 0 5.2-4.7 7.6-10.2 7.6S.6 30.4 0 25.5m48-4.2c0 6.4-3.7 11.7-9.5 11.7-3.4 0-6.6-1.6-7.7-7.3v14.9h-6.6V10h5.6l.7 6.6c1.4-5.6 4.7-7 8.3-7 5.5 0 9.2 5.2 9.2 11.7m-6.6 0c0-3.4-2.1-6.4-5.3-6.4-3.3 0-5.3 2.8-5.3 6.4s2 6.3 5.3 6.3c3.2 0 5.3-2.9 5.3-6.3M60 32.6h-6.6V15.2h-3.3V10H60zM53.1 3.9c0-2.2 1.6-3.4 3.6-3.4s3.6 1.1 3.6 3.4c0 2.2-1.6 3.3-3.6 3.3-2.1 0-3.6-1.1-3.6-3.3m27 6.1v5.2h-2.6c-3.9 0-6 2.1-6 6.4v11h-6.6V10h5.4l.6 7c.9-5.2 3.4-7 6.5-7zM93 32.6h-6.6V15.2h-3.3V10H93zM86.1 3.9c0-2.2 1.6-3.4 3.6-3.4s3.6 1.1 3.6 3.4c0 2.2-1.6 3.3-3.6 3.3s-3.6-1.1-3.6-3.3M125 27.1v5.4h-4.7c-4.8 0-7.2-2.5-7.2-7.4v-9.9h-3.3V10h3.3V3.9h6.6v1.3c0 2.3-1.4 4.8-4.9 4.8H125v5.2h-5.2v9c0 1.9 1 2.9 2.8 2.9z'/%3e%3cpath fill='%233960ff' d='M106.6 32.6H100V15.2h-3.3V10h9.9zM99.7 3.9c0-2.2 1.6-3.4 3.6-3.4s3.6 1.1 3.6 3.4c0 2.2-1.6 3.3-3.6 3.3s-3.6-1.1-3.6-3.3'/%3e%3c/svg%3e",
 		width: 118px,
 		height: 38px
 	),
 	'vite': (
-		uri: "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='31.88' height='32' aria-hidden='true' class='iconify iconify--file-icons' viewBox='0 0 510 512'%3e%3cpath fill='currentColor' d='M493.89 58.275 355.178 83.558 379.282 0 186.79 37.718l-2.999 50.64L15.145 58.214C3.53 57.538-3.238 65.879 1.558 77.46l244.056 427.983c5.253 8.575 17.347 8.91 22.65 0L507.575 77.419c5.4-9.676-2.874-21.018-13.685-19.144zm-237 435.435L17.87 74.556l164.993 29.491-7.778 131.365 67.632-15.608-18.858 92.344 51.374-15.608-25.495 123.397c-1.27 8.069 9.241 12.362 14.44.812l150.22-299.792-74.135 14.308 10.086-34.962 140.91-25.684z'/%3e%3c/svg%3e",
+		uri: "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='31.88' height='32' aria-hidden='true' class='iconify iconify--file-icons' viewBox='0 0 510 512'%3e%3cpath fill='currentColor' d='M493.89 58.275 355.178 83.558 379.282 0 186.79 37.718l-2.999 50.64L15.145 58.214C3.53 57.538-3.238 65.879 1.558 77.46l244.056 427.983c5.253 8.575 17.347 8.91 22.65 0L507.575 77.419c5.4-9.676-2.874-21.018-13.685-19.144m-237 435.435L17.87 74.556l164.993 29.491-7.778 131.365 67.632-15.608-18.858 92.344 51.374-15.608-25.495 123.397c-1.27 8.069 9.241 12.362 14.44.812l150.22-299.792-74.135 14.308 10.086-34.962 140.91-25.684z'/%3e%3c/svg%3e",
 		width: 31.88px,
 		height: 32px
 	)

demo/nuxt/.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

demo/nuxt/.npmrc

@@ -0,0 +1 @@
+shamefully-hoist=true

demo/nuxt/README.md

@@ -0,0 +1,75 @@
+# Nuxt 3 Minimal Starter
+
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm run dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm run build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm run preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

demo/nuxt/app.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import SpiriitView from 'assets/icons/spiriit.svg?view'
+import SpiriitUse from 'assets/icons/spiriit.svg?use'
+import ViteView from 'assets/icons/vite.svg?view'
+import ViteUse from 'assets/icons/vite.svg?use'
+</script>
+
+<template>
+  <h1>Vite Plugin SVG Spritemap Demo with VueJS</h1>
+
+  <p>This is a demo of the Vite Plugin SVG Spritemap working with VueJS component.</p>
+
+  <div class="example">
+    <h2>Spritemap with &lt;use> via Vue component</h2>
+
+    <div class="example__svgs">
+      <SpiriitUse>
+        <title>My superb logo</title>
+      </SpiriitUse>
+      <ViteUse />
+    </div>
+  </div>
+
+  <div class="example">
+    <h2>Spritemap with &lt;img> (fragments) via Vue component</h2>
+
+    <div class="example__svgs">
+      <SpiriitView />
+      <ViteView />
+    </div>
+  </div>
+</template>

demo/nuxt/assets/style.scss

@@ -0,0 +1,54 @@
+body {
+  background-color: #ddd;
+  margin: 10vw;
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+//color rainbow gradient animation keyframes
+@keyframes rainbow {
+  from {
+    color: #ff0000;
+  }
+  to {
+    color: #ff9500;
+  }
+}
+
+//color rainbow gradient animation keyframes
+@keyframes rainbow-bg {
+  from {
+    background-color: #ff0000;
+  }
+  to {
+    background-color: #ff9500;
+  }
+}
+
+.icon {
+  margin: 0.5rem;
+
+  &-vite {
+    animation: rainbow infinite 1s alternate;
+  }
+}
+
+h1 {
+  font-size: 2.5rem;
+  margin-bottom: 1rem;
+}
+
+h2 {
+  margin-top: 0;
+}
+
+.example {
+  margin-top: 4rem;
+
+  &__svgs {
+    display: flex;
+    align-items: center;
+    margin: -0.5rem;
+  }
+}

demo/nuxt/nuxt.config.ts

@@ -0,0 +1,13 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+import VitePluginSvgSpritemap from '@spiriit/vite-plugin-svg-spritemap'
+
+export default defineNuxtConfig({
+  devtools: { enabled: true },
+  vite: {
+    plugins: [
+      VitePluginSvgSpritemap('./assets/icons/*.svg'),
+    ],
+  },
+  css: ['@/assets/style.scss'],
+
+})

demo/nuxt/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "nuxt-app",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview"
+  },
+  "devDependencies": {
+    "@spiriit/vite-plugin-svg-spritemap": "workspace:*",
+    "nuxt": "^3.9.1",
+    "sass": "^1.69.7",
+    "vue": "^3.4.7",
+    "vue-router": "^4.2.5"
+  }
+}

demo/nuxt/server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../.nuxt/tsconfig.server.json"
+}

demo/nuxt/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}

demo/nuxt/types.d.ts

@@ -0,0 +1 @@
+/// <reference types="@spiriit/vite-plugin-svg-spritemap/dist/client" />

demo/server/package.json

@@ -9,10 +9,10 @@
     "@spiriit/vite-plugin-svg-spritemap": "workspace:*",
     "autoprefixer": "^10.4.16",
     "concurrently": "^8.2.2",
-    "postcss": "^8.4.32",
-    "sass": "^1.69.5",
+    "postcss": "^8.4.33",
+    "sass": "^1.69.7",
     "typescript": "^5.3.3",
-    "vite": "^5.0.10",
+    "vite": "^5.0.11",
     "vite-plugin-inspect": "^0.8.1"
   }
 }