From 359e8bb4fc521dbcbec68b80e9e60f014cb3ef81 Mon Sep 17 00:00:00 2001 From: Lera24 Date: Tue, 23 Apr 2024 16:37:37 +0300 Subject: [PATCH] feature: add new icons[WTEL-3534] --- .../webitel-ui/components/wt-icon/Readme.md | 70 +++++++++---------- .../wt-icon/_internals/iconsList.js | 2 + .../components/wt-icon/wt-icon-docs.vue | 65 ----------------- package-lock.json | 4 +- package.json | 2 +- src/assets/icons/sprite/agent.svg | 5 ++ src/assets/icons/sprite/bot.svg | 5 ++ src/assets/icons/sprite/index.js | 2 + 8 files changed, 51 insertions(+), 104 deletions(-) delete mode 100644 docs/pages/webitel-ui/components/wt-icon/wt-icon-docs.vue create mode 100644 src/assets/icons/sprite/agent.svg create mode 100644 src/assets/icons/sprite/bot.svg diff --git a/docs/pages/webitel-ui/components/wt-icon/Readme.md b/docs/pages/webitel-ui/components/wt-icon/Readme.md index 9ff8417ba..8cd95020f 100644 --- a/docs/pages/webitel-ui/components/wt-icon/Readme.md +++ b/docs/pages/webitel-ui/components/wt-icon/Readme.md @@ -1,18 +1,20 @@ -# WtIcon -## Props +# WtIcon -::: raw - -::: +## Props - +| Prop | Type | Default | Required | Code | Options | +|------------|---------|---------|----------|-----------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------| +| icon | String | | true | `` | | +| size | String | md | | `` | sm, md, lg, xl | +| color | String | default | | `` | default, active, disabled, primary, error, success, warning, on-dark, on-light, on-primary, info, chat, transfer, job | +| iconPrefix | String | `''` | | `` | | +| disabled | Boolean | false | | `` | | ### Different colors: @@ -29,6 +31,22 @@ const colors = ['default', 'active', 'disabled', 'primary', 'error', 'success', {{ color }} +## Available icons + +
+
+ + {{ icon }} +
+
+ ## How does it work? Icons are located in assets/icons/sprite directory, in SVG format, @@ -42,22 +60,14 @@ For example: ![svg icon code example](./assets/svg-icon-code-example.png) - -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 ![width and height should be removed](./assets/cleanup-svg-width-height.png) @@ -149,19 +162,4 @@ But! Specific colors should stay in svg-code. (for instance, red dot in `record` !["fill" should be removed](./assets/cleanup-svg-fill.png) -## Available icons - -
-
- - {{ icon }} -
-
diff --git a/docs/pages/webitel-ui/components/wt-icon/_internals/iconsList.js b/docs/pages/webitel-ui/components/wt-icon/_internals/iconsList.js index 83548dcef..374ed1678 100644 --- a/docs/pages/webitel-ui/components/wt-icon/_internals/iconsList.js +++ b/docs/pages/webitel-ui/components/wt-icon/_internals/iconsList.js @@ -84,6 +84,8 @@ export default [ 'contacts', 'done', 'attention', + 'agent', + 'bot', 'call', 'call--filled', diff --git a/docs/pages/webitel-ui/components/wt-icon/wt-icon-docs.vue b/docs/pages/webitel-ui/components/wt-icon/wt-icon-docs.vue deleted file mode 100644 index ba69b769e..000000000 --- a/docs/pages/webitel-ui/components/wt-icon/wt-icon-docs.vue +++ /dev/null @@ -1,65 +0,0 @@ - - - - - diff --git a/package-lock.json b/package-lock.json index 07be5af0f..43ad66655 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@webitel/ui-sdk", - "version": "24.4.26", + "version": "24.4.28", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@webitel/ui-sdk", - "version": "24.4.26", + "version": "24.4.28", "dependencies": { "@floating-ui/vue": "^1.0.1", "@vuelidate/core": "^2.0.3", diff --git a/package.json b/package.json index 473a5583f..9209bbe64 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@webitel/ui-sdk", - "version": "24.4.27", + "version": "24.4.28", "private": false, "scripts": { "dev": "vite", diff --git a/src/assets/icons/sprite/agent.svg b/src/assets/icons/sprite/agent.svg new file mode 100644 index 000000000..c4e7b982d --- /dev/null +++ b/src/assets/icons/sprite/agent.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/icons/sprite/bot.svg b/src/assets/icons/sprite/bot.svg new file mode 100644 index 000000000..d9b4c2f3c --- /dev/null +++ b/src/assets/icons/sprite/bot.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/icons/sprite/index.js b/src/assets/icons/sprite/index.js index f5846df49..b4c9cc71d 100644 --- a/src/assets/icons/sprite/index.js +++ b/src/assets/icons/sprite/index.js @@ -1,4 +1,5 @@ import './account.svg'; +import './agent.svg'; import './adfs.svg'; import './app-navigator.svg'; import './arrow-down.svg'; @@ -13,6 +14,7 @@ import './back.svg'; import './bell.svg'; import './bell-badged.svg'; import './bucket.svg'; +import './bot.svg'; import './calendar.svg'; import './dark-mode.svg';