+
## How does it work?
Icons are located in assets/icons/sprite directory, in SVG format,
@@ -42,22 +60,14 @@ For example:
-
-At build stage, svg-sprite-loader
+At build stage,
+vite-plugin-svg-sprite
collects all icons (looking for "All files`.svg` in all directories, which names include `sprite`,
-). This rule is described in vue.config.js:
+). This rule is described in vite.config.js:
(from "Quick Start" icons installation section):
-config.module
- .rule('svg')
- .exclude.add(/^(.*sprite).*\.svg/); // same as in svg-sprite-loader
-
-config.module
- .rule('svg-sprite')
- .test(/^(.*sprite).*\.svg/) // same as in svg-url-loader
- .use('svg-sprite-loader')
- .loader('svg-sprite-loader');
+import createSvgSpritePlugin from 'vite-plugin-svg-sprite';
So that, all these icons are collected in one sprite. This sprite is injected in index.html.
@@ -76,7 +86,7 @@ Then, these icons can be used as:
## How to install your custom icons to project?
-`svg-sprite-loader` webpack rule in vue.config.js also collects all icons from `sprite`
+`vite-plugin-svg-sprite` vite rule in vite.config.js also collects all icons from `sprite`
directories in project and adds it to final sprite.
*In fact, webitel-ui icons are added to sprite just cause they're imported from
@@ -95,6 +105,7 @@ And, then, if you put some new icons in this directory, and import them in `inde
they automatically become available in project.
### Simple TODO:
+
* Create directory `src/(app?)/assets/icons/sprite/` (if doesn't exists)
* in this folder, create `index.js` (if doesn't exists)
* Import `index.js` to `>main.js` (if doesn't exists)
@@ -111,6 +122,7 @@ in this app, or library - and update it, if needed.
from all icon usages (and, of course, rename the icon file)*
### Icon prefix corresponding to application:
+
* **Webitel UI:** no prefix
* **Admin:** `adm-`
* **Workspace:** `ws-`
@@ -123,6 +135,7 @@ from all icon usages (and, of course, rename the icon file)*
After export from Figma, icons should be cleaned up to avoid a few issues.
Use this checklist:
+
1. **Remove** `width` and `height` from svg-tag
@@ -149,19 +162,4 @@ But! Specific colors should stay in svg-code. (for instance, red dot in `record`
-## Available icons
-
-