Merge pull request #28 from SpiriitLabs/dev

Version 2.0.0
SpiriitLabs · Nov 24, 2023 · d238f42 · d238f42
2 parents d6cd785 + 877d9de
commit d238f42
Show file tree

Hide file tree

Showing 28 changed files with 785 additions and 762 deletions.
diff --git a/README.md b/README.md
@@ -2,6 +2,8 @@
 
 # vite-plugin-svg-spritemap
 
+> This plugin supports Vite 4 and 5.
+
 This ViteJS plugin generates a single SVG [spritemap](https://css-tricks.com/svg-sprites-use-better-icon-fonts/) with `<symbol>`/`<view>`/`<use>` for each SVG files. It can also generate a stylesheet (CSS/SCSS/Stylus/Less) containing the sprites to be used directly (via a Data URI or SVG fragments).
 
 The plugin outputs can be fully configurable through [options](#🛠-options).
@@ -12,7 +14,7 @@ The plugin outputs can be fully configurable through [options](#🛠-options).
 
 - ⚡ Fully integrated in your ViteJS environment
 - 📦 Pack your SVG files in one ([spritemap](https://css-tricks.com/svg-sprites-use-better-icon-fonts/)) file
-- ✨ Use your SVG in an `<svg>` or `<img>` tags and also directly in your CSS
+- ✨ Use your SVG in an `<svg>` or `<img>` tags and also directly in your CSS/SCSS/Stylus/Less
 - 🍕 Import SVG fragment as VueJS component
 - 🔥 HMR support
 
@@ -83,7 +85,7 @@ export default {
 @import './spritemap.scss';
 ```
 
-After that, you needs to import the file in your current styles. Don't forget to [load the CSS](https://vitejs.dev/guide/features.html#css) via ViteJS.
+After that, you need to import the file in your current styles. Don't forget to [load the CSS](https://vitejs.dev/guide/features.html#css) via ViteJS.
 
 If you use a CSS preprocessing language, you can use the mixin `sprite` and access to a map with all sprites infos. If not, you will only access to classes.
 
@@ -168,29 +170,29 @@ To prevent [CORS issue with SVG](https://oreillymedia.github.io/Using_SVG/extras
 
 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 :
 
-| Options | Type                            | Default   | Description                                                                                                                                                              |
-| ------- | ------------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| output  | `boolean` or `object`           | `true`    | See [output](#output)                                                                                                                                                    |
-| styles  | `false` or `object` or `string` | `false`   | File destination like `src/css/spritemap.css` or [styles object](#styles)                                                                                                |
-| prefix  | `string`                        | `sprite-` | Define the prefix uses for sprite id in `<symbol>`/`<use>`/`<view>`                                                                                                      |
-| svgo    | `boolean` or `object`           | `true`    | Take an SVGO Options object. If `true`, it will use the [default SVGO preset](https://github.com/svg/svgo#default-preset), if `false`, it will disable SVGO optimization |
-| injectSVGOnDev    | `boolean`           | `false`    | Inject the SVG Spritemap inside the body on dev  |
+| Options        | Type                            | Default   | Description                                                                                                                                                              |
+| -------------- | ------------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| output         | `boolean` or `object`           | `true`    | See [output](#output)                                                                                                                                                    |
+| styles         | `false` or `object` or `string` | `false`   | File destination like `src/css/spritemap.css` or [styles object](#styles)                                                                                                |
+| prefix         | `string` or `false`             | `sprite-` | Define the prefix uses for sprite id in `<symbol>`/`<use>`/`<view>`. Set to false to disable the prefix                                                                  |
+| svgo           | `boolean` or `object`           | `true`    | Take an SVGO Options object. If `true`, it will use the [default SVGO preset](https://github.com/svg/svgo#default-preset), if `false`, it will disable SVGO optimization |
+| injectSVGOnDev | `boolean`                       | `false`   | Inject the SVG Spritemap inside the body on dev                                                                                                                          |
 
 ### output
 
-| Options  | Type      | Default                  | Description                                                                                                                     |
-| -------- | --------- | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------- |
+| Options  | Type      | Default                  | Description                                                                                                                                                         |
+| -------- | --------- | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | filename | `string`  | `[name].[hash][extname]` | The destination of the file. You can use [output filename like Rollup](https://www.rollupjs.org/guide/en/#outputassetfilenames). Note: Doesn't support hash number. |
-| name | `string`  | `spritemap.svg` | The name of file, appear on the manifest key |
-| use      | `boolean` | true                     | Insert `use` element in the spritemap                                                                                           |
-| view     | `boolean` | true                     | Insert `view` element in the spritemap                                                                                          |
+| name     | `string`  | `spritemap.svg`          | The name of file, appear on the manifest key                                                                                                                        |
+| use      | `boolean` | true                     | Insert `use` element in the spritemap                                                                                                                               |
+| view     | `boolean` | true                     | Insert `view` element in the spritemap                                                                                                                              |
 
 ### styles
 
 | Options  | Type                                      | Description                                                    |
 | -------- | ----------------------------------------- | -------------------------------------------------------------- |
 | filename | string                                    | The destination of the stylesheet file like your source folder |
-| lang     | `less`/`scss`/`styl`/`css` or `undefined` |                                                                |
+| lang     | `less`/`scss`/`styl`/`css` or `undefined` |
 
 **Example with full options :**
 
@@ -227,6 +229,8 @@ export default {
 
 ## 🏃 What's next
 
+- [Idefy spritemap option](https://github.com/SpiriitLabs/vite-plugin-svg-spritemap/issues/27)
+- [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)
 
 ## 👨‍💼 Licence

diff --git a/demo/basic/package.json b/demo/basic/package.json
@@ -13,9 +13,9 @@
     "less": "^4.2.0",
     "postcss": "^8.4.31",
     "sass": "^1.69.5",
-    "stylus": "^0.61.0",
-    "typescript": "^5.2.2",
-    "vite": "^4.5.0",
-    "vite-plugin-inspect": "^0.7.41"
+    "stylus": "^0.62.0",
+    "typescript": "^5.3.2",
+    "vite": "^5.0.2",
+    "vite-plugin-inspect": "^0.7.42"
   }
 }
diff --git a/demo/basic/src/scss/spritemap.scss b/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.5zm48-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.7zm-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.3zM60 32.6h-6.6V15.2h-3.3V10H60v22.6zM53.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.3zm27 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.3V10H93v22.6zM86.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.3zM125 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.3z'/%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.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",
 		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.684L256.89 493.71z'/%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.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",
 		width: 31.88px,
 		height: 32px
 	)

diff --git a/demo/server/package.json b/demo/server/package.json
@@ -11,8 +11,8 @@
     "concurrently": "^8.2.2",
     "postcss": "^8.4.31",
     "sass": "^1.69.5",
-    "typescript": "^5.2.2",
-    "vite": "^4.5.0",
-    "vite-plugin-inspect": "^0.7.41"
+    "typescript": "^5.3.2",
+    "vite": "^5.0.2",
+    "vite-plugin-inspect": "^0.7.42"
   }
 }
diff --git a/demo/vue/package.json b/demo/vue/package.json
@@ -13,10 +13,10 @@
   },
   "devDependencies": {
     "@spiriit/vite-plugin-svg-spritemap": "workspace:*",
-    "@vitejs/plugin-vue": "^4.4.0",
+    "@vitejs/plugin-vue": "^4.5.0",
     "sass": "^1.69.5",
-    "typescript": "^5.2.2",
-    "vite": "^4.5.0",
+    "typescript": "^5.3.2",
+    "vite": "^5.0.2",
     "vue-tsc": "^1.8.22"
   }
 }
diff --git a/eslint.config.js b/eslint.config.js
@@ -1,3 +1,3 @@
-const antfu = require('@antfu/eslint-config').default
+import antfu from '@antfu/eslint-config'
 
-module.exports = antfu()
+export default await antfu()
diff --git a/package.json b/package.json
@@ -1,7 +1,8 @@
 {
   "name": "@spiriit/vite-plugin-svg-spritemap",
-  "version": "1.4.0",
-  "packageManager": "[email protected]",
+  "type": "module",
+  "version": "2.0.0",
+  "packageManager": "[email protected]",
   "description": "Generates symbol-based SVG spritemap from all .svg files in a directory",
   "author": "Spiriit",
   "license": "MIT",
@@ -28,15 +29,15 @@
   ],
   "exports": {
     ".": {
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
     },
     "./client": {
       "types": "./dist/client.d.ts"
     }
   },
   "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
+  "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
     "dist"
@@ -55,7 +56,7 @@
     "prepublishOnly": "pnpm build"
   },
   "peerDependencies": {
-    "vite": "^3.0.0 || ^4.0.0",
+    "vite": "^4.0.0 || ^5.0.0",
     "vue": "^3.0.0"
   },
   "peerDependenciesMeta": {
@@ -68,22 +69,22 @@
     "fast-glob": "^3.3.2",
     "hash-sum": "^2.0.0",
     "mini-svg-data-uri": "^1.4.4",
-    "svgo": "^3.0.2"
+    "svgo": "^3.0.4"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "1.1.0",
+    "@antfu/eslint-config": "2.0.0",
     "@types/hash-sum": "^1.0.2",
-    "@types/node": "^14.18.63",
+    "@types/node": "^20.9.4",
     "@types/xmldom": "^0.1.34",
-    "@vitejs/plugin-vue": "^4.4.1",
+    "@vitejs/plugin-vue": "^4.5.0",
     "@vitest/coverage-v8": "^0.34.6",
     "c8": "^8.0.1",
-    "eslint": "^8.53.0",
-    "playwright": "^1.39.0",
+    "eslint": "^8.54.0",
+    "playwright": "^1.40.0",
     "svg-element-attributes": "^2.1.0",
-    "tsup": "^7.2.0",
-    "typescript": "^5.2.2",
-    "vite": "^4.5.0",
+    "tsup": "^8.0.1",
+    "typescript": "^5.3.2",
+    "vite": "^5.0.2",
     "vitest": "^0.34.6",
     "vue": "^3.3.8"
   }