Merge pull request #41 from SpiriitLabs/dev

Version 2.2.1

.github/workflows/ci.yml

@@ -51,9 +51,9 @@ jobs:
         include:
           # Active LTS + other OS
           - os: macos-latest
-            node_version: 18
+            node_version: 20
           - os: windows-latest
-            node_version: 18
+            node_version: 20
       fail-fast: false
 
     steps:
@@ -75,6 +75,13 @@ jobs:
           node-version: ${{ matrix.node-version }}
           cache: pnpm
 
+      - name: Install Python
+        if: matrix.os == 'macos-latest'
+        uses: actions/setup-python@v5
+        with:
+          python-version: '3.11'
+      - run: pip install setuptools
+
       - name: Install
         run: pnpm install
 

.gitignore

@@ -3,4 +3,7 @@ dist
 .DS_Store
 .idea
 .vscode
-coverage
+coverage
+.svelte-kit
+demo/server/public
+.nitro

README.md

@@ -136,10 +136,17 @@ will generate
 <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).
 
+#### Typescript
+
+For typescript, you need to load the type definitions inside `vite-env.d.ts` to fix errors with `?use`/`?view` query.
+
+```ts
+/// <reference types="vite/client" />
+/// <reference types="@spiriit/vite-plugin-svg-spritemap/client" />
+```
+
 ### Usage with Nuxt 3
 
 > [!NOTE]
@@ -160,7 +167,15 @@ export default defineNuxtConfig({
 })
 ```
 
-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.
+You can see the usage in the [corresponding demo folder](/demo/nuxt/app.vue).
+
+#### Typescript
+
+For usage with TypeScript, you will need to add 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.
+
+```ts
+/// <reference types="@spiriit/vite-plugin-svg-spritemap/dist/client" />
+```
 
 ### Use for backend integration
 
@@ -190,6 +205,8 @@ To prevent [CORS issue with SVG](https://oreillymedia.github.io/Using_SVG/extras
 <script type="module" src="http://localhost:5173/@vite-plugin-svg-spritemap/client"></script>
 ```
 
+You can see an example of integration in the [corresponding demo folder](/demo/server/routes/index.pug).
+
 ## 🛠 Options
 
 The first argument is a glob path (using [fast-glob](https://github.com/mrmlnc/fast-glob)) and the second is an object with the following options :
@@ -255,6 +272,7 @@ export default {
 
 ## 🏃 What's next
 
+- [Support multiple instance of the plugin](https://github.com/SpiriitLabs/vite-plugin-svg-spritemap/issues/39)
 - [CSS generation callback](https://github.com/SpiriitLabs/vite-plugin-svg-spritemap/issues/16)
 - Add variable supports inspired by [svg-spritemap-webpack-plugin](https://github.com/cascornelissen/svg-spritemap-webpack-plugin/blob/master/docs/variables.md)
 

demo/basic/index.html

@@ -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 alt="" class="icon icon-spiriit" src="/__spritemap#icon-spiriit-view" />
+        <img alt="" class="icon icon-vite" src="/__spritemap#icon-vite-view" />
       </div>
     </div>
 

demo/basic/src/main.ts

@@ -1,5 +1,5 @@
 // SCSS
-import './scss/style.scss'
+import './../../_fixtures/scss/style.scss'
 
 // Stylus
 // import './stylus/style.styl'

demo/basic/vite.config.ts

@@ -9,11 +9,11 @@ export default defineConfig({
     manifest: true,
   },
   plugins: [
-    VitePluginSvgSpritemap('src/icons/*.svg', {
-      // styles: 'src/css/spritemap.css',
-      styles: 'src/scss/spritemap.scss',
-      // styles: 'src/stylus/spritemap.styl',
-      // styles: 'src/less/spritemap.less',
+    VitePluginSvgSpritemap('./../_fixtures/icons/*.svg', {
+      // styles: './../_fixtures/icons/spritemap.css',
+      styles: './../_fixtures/scss/spritemap.scss',
+      // styles: './../_fixtures/icons/spritemap.styl',
+      // styles: './../_fixtures/icons/spritemap.less',
       prefix: 'icon-',
     }),
     Inspect(),

demo/nuxt/app.vue

@@ -1,32 +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'
+import SpiriitView from './../_fixtures/icons/spiriit.svg?view'
+import SpiriitUse from './../_fixtures/icons/spiriit.svg?use'
+import ViteView from './../_fixtures/icons/vite.svg?view'
+import ViteUse from './../_fixtures/icons/vite.svg?use'
 </script>
 
 <template>
-  <h1>Vite Plugin SVG Spritemap Demo with VueJS</h1>
+  <h1>Vite Plugin SVG Spritemap Demo with Nuxt</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>
+      <SpiriitUse class="icon icon-spiriit">
         <title>My superb logo</title>
       </SpiriitUse>
-      <ViteUse />
+      <ViteUse class="icon icon-vite" />
     </div>
   </div>
 
   <div class="example">
     <h2>Spritemap with &lt;img> (fragments) via Vue component</h2>
 
     <div class="example__svgs">
-      <SpiriitView />
-      <ViteView />
+      <SpiriitView alt="" class="icon icon-spiriit" />
+      <ViteView alt="" class="icon icon-vite" />
     </div>
   </div>
 </template>

demo/nuxt/nuxt.config.ts

@@ -5,9 +5,15 @@ export default defineNuxtConfig({
   devtools: { enabled: true },
   vite: {
     plugins: [
-      VitePluginSvgSpritemap('./assets/icons/*.svg'),
+      VitePluginSvgSpritemap('./../_fixtures/icons/*.svg', {
+        // styles: './../_fixtures/icons/spritemap.css',
+        styles: './../_fixtures/scss/spritemap.scss',
+        // styles: './../_fixtures/icons/spritemap.styl',
+        // styles: './../_fixtures/icons/spritemap.less',
+        prefix: 'icon-',
+      }),
     ],
   },
-  css: ['@/assets/style.scss'],
+  css: ['./../_fixtures/scss/style.scss'],
 
 })

demo/nuxt/package.json

@@ -12,7 +12,7 @@
     "@spiriit/vite-plugin-svg-spritemap": "workspace:*",
     "nuxt": "^3.9.1",
     "sass": "^1.69.7",
-    "vue": "^3.4.7",
+    "vue": "^3.4.13",
     "vue-router": "^4.2.5"
   }
 }

demo/server/.editorconfig

@@ -0,0 +1,15 @@
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+charset = utf-8
+
+[*.js]
+indent_style = space
+indent_size = 2
+
+[{package.json,*.yml,*.cjson}]
+indent_style = space
+indent_size = 2

demo/server/.eslintignore

@@ -0,0 +1,3 @@
+dist
+.output
+node-modules

demo/server/.eslintrc

@@ -0,0 +1,5 @@
+{
+  "extends": [
+    "@nuxtjs/eslint-config-typescript"
+  ]
+}

demo/server/.gitignore

@@ -0,0 +1,7 @@
+node_modules
+*.log*
+.nitro
+.cache
+.output
+.env
+dist

demo/server/.npmrc

@@ -0,0 +1,2 @@
+shamefully-hoist=true
+strict-peer-dependencies=false

demo/server/README.md

@@ -1,18 +1,42 @@
-# Server example
+# Nitro Server with ViteJS as backend
 
-> This is a server example of how to use vite-plugin-svg-spritemap with a different server. This can be useful with Wordpress installation and dev mode.
+Look at the [Nitro documentation](https://nitro.unjs.io/) to learn more.
 
-## Usage
+## Setup
 
-```shell
-npm i
-npm run dev
+Make sure to install the dependencies:
+
+```bash
+# npm
+npm install
 
 # yarn
 yarn install
-yarn run dev
 
 # pnpm
 pnpm install
-pnpm dev
 ```
+
+## Development Server
+
+Start the development server on <http://localhost:3000>
+
+```bash
+npm run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+npm run build
+```
+
+Locally preview production build:
+
+```bash
+npm run preview
+```
+
+Check out the [deployment documentation](https://nitro.unjs.io/deploy) for more information.

demo/server/nitro.config.ts

@@ -0,0 +1,2 @@
+// https://nitro.unjs.io/config
+export default defineNitroConfig({})