From 40aeda6bfc41cf1dc80181ec480890f314e6c350 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9C=89=E6=9D=A5=E6=8A=80=E6=9C=AF?= <1490493387@qq.com>
Date: Thu, 25 Nov 2021 23:59:19 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20vite-plugin-svg-icons=E5=BC=95=E5=85=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. vite-plugin-svg-icons引入
2. vite.config.ts读取环境变量
3. vite配置跨域
---
 README.md                                     |  10 ++
 package.json                                  |   3 +-
 src/{icons/svg => assets/icons}/404.svg       |   0
 src/{icons/svg => assets/icons}/await.svg     |   0
 src/{icons/svg => assets/icons}/bug.svg       |   0
 src/{icons/svg => assets/icons}/build.svg     |   0
 src/{icons/svg => assets/icons}/button.svg    |   0
 src/{icons/svg => assets/icons}/cascader.svg  |   0
 src/{icons/svg => assets/icons}/chart.svg     |   0
 src/{icons/svg => assets/icons}/checkbox.svg  |   0
 src/{icons/svg => assets/icons}/clipboard.svg |   0
 src/{icons/svg => assets/icons}/code.svg      |   0
 src/{icons/svg => assets/icons}/color.svg     |   0
 src/{icons/svg => assets/icons}/component.svg |   0
 src/{icons/svg => assets/icons}/dashboard.svg |   0
 .../svg => assets/icons}/date-range.svg       |   0
 src/{icons/svg => assets/icons}/date.svg      |   0
 src/{icons/svg => assets/icons}/dict.svg      |   0
 .../svg => assets/icons}/documentation.svg    |   0
 src/{icons/svg => assets/icons}/download.svg  |   0
 src/{icons/svg => assets/icons}/drag.svg      |   0
 src/{icons/svg => assets/icons}/druid.svg     |   0
 src/{icons/svg => assets/icons}/edit.svg      |   0
 src/{icons/svg => assets/icons}/education.svg |   0
 src/{icons/svg => assets/icons}/email.svg     |   0
 src/{icons/svg => assets/icons}/example.svg   |   0
 src/{icons/svg => assets/icons}/excel.svg     |   0
 .../svg => assets/icons}/exit-fullscreen.svg  |   0
 src/{icons/svg => assets/icons}/eye-open.svg  |   0
 src/{icons/svg => assets/icons}/eye.svg       |   0
 src/{icons/svg => assets/icons}/form.svg      |   0
 .../svg => assets/icons}/fullscreen.svg       |   0
 src/{icons/svg => assets/icons}/github.svg    |   0
 src/{icons/svg => assets/icons}/guide.svg     |   0
 src/{icons/svg => assets/icons}/icon.svg      |   0
 src/{icons/svg => assets/icons}/input.svg     |   0
 .../svg => assets/icons}/international.svg    |   0
 src/{icons/svg => assets/icons}/ip.svg        |   0
 src/{icons/svg => assets/icons}/job.svg       |   0
 src/{icons/svg => assets/icons}/language.svg  |   0
 src/{icons/svg => assets/icons}/link.svg      |   0
 src/{icons/svg => assets/icons}/list.svg      |   0
 src/{icons/svg => assets/icons}/lock.svg      |   0
 src/{icons/svg => assets/icons}/log.svg       |   0
 .../svg => assets/icons}/logininfor.svg       |   0
 src/{icons/svg => assets/icons}/menu.svg      |   0
 src/{icons/svg => assets/icons}/message.svg   |   0
 src/{icons/svg => assets/icons}/money.svg     |   0
 src/{icons/svg => assets/icons}/monitor.svg   |   0
 src/{icons/svg => assets/icons}/nested.svg    |   0
 src/{icons/svg => assets/icons}/nodata.svg    |   0
 src/{icons/svg => assets/icons}/number.svg    |   0
 src/{icons/svg => assets/icons}/offline.svg   |   0
 src/{icons/svg => assets/icons}/online.svg    |   0
 src/{icons/svg => assets/icons}/password.svg  |   0
 src/{icons/svg => assets/icons}/pdf.svg       |   0
 src/{icons/svg => assets/icons}/people.svg    |   0
 src/{icons/svg => assets/icons}/peoples.svg   |   0
 src/{icons/svg => assets/icons}/phone.svg     |   0
 src/{icons/svg => assets/icons}/post.svg      |   0
 src/{icons/svg => assets/icons}/qq.svg        |   0
 src/{icons/svg => assets/icons}/question.svg  |   0
 src/{icons/svg => assets/icons}/radio.svg     |   0
 src/{icons/svg => assets/icons}/rate.svg      |   0
 src/{icons/svg => assets/icons}/redis.svg     |   0
 src/{icons/svg => assets/icons}/route.svg     |   0
 src/{icons/svg => assets/icons}/row.svg       |   0
 src/{icons/svg => assets/icons}/search.svg    |   0
 src/{icons/svg => assets/icons}/select.svg    |   0
 src/{icons/svg => assets/icons}/server.svg    |   0
 src/{icons/svg => assets/icons}/shopping.svg  |   0
 src/{icons/svg => assets/icons}/size.svg      |   0
 src/{icons/svg => assets/icons}/skill.svg     |   0
 src/{icons/svg => assets/icons}/slider.svg    |   0
 src/{icons/svg => assets/icons}/star.svg      |   0
 src/{icons/svg => assets/icons}/swagger.svg   |   0
 src/{icons/svg => assets/icons}/switch.svg    |   0
 src/{icons/svg => assets/icons}/system.svg    |   0
 src/{icons/svg => assets/icons}/tab.svg       |   0
 src/{icons/svg => assets/icons}/table.svg     |   0
 src/{icons/svg => assets/icons}/textarea.svg  |   0
 src/{icons/svg => assets/icons}/theme.svg     |   0
 .../svg => assets/icons}/time-range.svg       |   0
 src/{icons/svg => assets/icons}/time.svg      |   0
 src/{icons/svg => assets/icons}/tool.svg      |   0
 .../svg => assets/icons}/tree-table.svg       |   0
 src/{icons/svg => assets/icons}/tree.svg      |   0
 src/{icons/svg => assets/icons}/upload.svg    |   0
 src/{icons/svg => assets/icons}/user.svg      |   0
 src/{icons/svg => assets/icons}/validCode.svg |   0
 src/{icons/svg => assets/icons}/wechat.svg    |   0
 src/{icons/svg => assets/icons}/zip.svg       |   0
 src/components/SvgIcon/index.vue              |  40 ++++++
 src/icons/index.ts                            |  50 -------
 src/icons/index.vue                           |  37 -----
 src/main.ts                                   |   3 +-
 src/views/login/index.vue                     |   4 +
 vite.config.ts                                | 128 +++++++++++-------
 98 files changed, 133 insertions(+), 142 deletions(-)
 rename src/{icons/svg => assets/icons}/404.svg (100%)
 rename src/{icons/svg => assets/icons}/await.svg (100%)
 rename src/{icons/svg => assets/icons}/bug.svg (100%)
 rename src/{icons/svg => assets/icons}/build.svg (100%)
 rename src/{icons/svg => assets/icons}/button.svg (100%)
 rename src/{icons/svg => assets/icons}/cascader.svg (100%)
 rename src/{icons/svg => assets/icons}/chart.svg (100%)
 rename src/{icons/svg => assets/icons}/checkbox.svg (100%)
 rename src/{icons/svg => assets/icons}/clipboard.svg (100%)
 rename src/{icons/svg => assets/icons}/code.svg (100%)
 rename src/{icons/svg => assets/icons}/color.svg (100%)
 rename src/{icons/svg => assets/icons}/component.svg (100%)
 rename src/{icons/svg => assets/icons}/dashboard.svg (100%)
 rename src/{icons/svg => assets/icons}/date-range.svg (100%)
 rename src/{icons/svg => assets/icons}/date.svg (100%)
 rename src/{icons/svg => assets/icons}/dict.svg (100%)
 rename src/{icons/svg => assets/icons}/documentation.svg (100%)
 rename src/{icons/svg => assets/icons}/download.svg (100%)
 rename src/{icons/svg => assets/icons}/drag.svg (100%)
 rename src/{icons/svg => assets/icons}/druid.svg (100%)
 rename src/{icons/svg => assets/icons}/edit.svg (100%)
 rename src/{icons/svg => assets/icons}/education.svg (100%)
 rename src/{icons/svg => assets/icons}/email.svg (100%)
 rename src/{icons/svg => assets/icons}/example.svg (100%)
 rename src/{icons/svg => assets/icons}/excel.svg (100%)
 rename src/{icons/svg => assets/icons}/exit-fullscreen.svg (100%)
 rename src/{icons/svg => assets/icons}/eye-open.svg (100%)
 rename src/{icons/svg => assets/icons}/eye.svg (100%)
 rename src/{icons/svg => assets/icons}/form.svg (100%)
 rename src/{icons/svg => assets/icons}/fullscreen.svg (100%)
 rename src/{icons/svg => assets/icons}/github.svg (100%)
 rename src/{icons/svg => assets/icons}/guide.svg (100%)
 rename src/{icons/svg => assets/icons}/icon.svg (100%)
 rename src/{icons/svg => assets/icons}/input.svg (100%)
 rename src/{icons/svg => assets/icons}/international.svg (100%)
 rename src/{icons/svg => assets/icons}/ip.svg (100%)
 rename src/{icons/svg => assets/icons}/job.svg (100%)
 rename src/{icons/svg => assets/icons}/language.svg (100%)
 rename src/{icons/svg => assets/icons}/link.svg (100%)
 rename src/{icons/svg => assets/icons}/list.svg (100%)
 rename src/{icons/svg => assets/icons}/lock.svg (100%)
 rename src/{icons/svg => assets/icons}/log.svg (100%)
 rename src/{icons/svg => assets/icons}/logininfor.svg (100%)
 rename src/{icons/svg => assets/icons}/menu.svg (100%)
 rename src/{icons/svg => assets/icons}/message.svg (100%)
 rename src/{icons/svg => assets/icons}/money.svg (100%)
 rename src/{icons/svg => assets/icons}/monitor.svg (100%)
 rename src/{icons/svg => assets/icons}/nested.svg (100%)
 rename src/{icons/svg => assets/icons}/nodata.svg (100%)
 rename src/{icons/svg => assets/icons}/number.svg (100%)
 rename src/{icons/svg => assets/icons}/offline.svg (100%)
 rename src/{icons/svg => assets/icons}/online.svg (100%)
 rename src/{icons/svg => assets/icons}/password.svg (100%)
 rename src/{icons/svg => assets/icons}/pdf.svg (100%)
 rename src/{icons/svg => assets/icons}/people.svg (100%)
 rename src/{icons/svg => assets/icons}/peoples.svg (100%)
 rename src/{icons/svg => assets/icons}/phone.svg (100%)
 rename src/{icons/svg => assets/icons}/post.svg (100%)
 rename src/{icons/svg => assets/icons}/qq.svg (100%)
 rename src/{icons/svg => assets/icons}/question.svg (100%)
 rename src/{icons/svg => assets/icons}/radio.svg (100%)
 rename src/{icons/svg => assets/icons}/rate.svg (100%)
 rename src/{icons/svg => assets/icons}/redis.svg (100%)
 rename src/{icons/svg => assets/icons}/route.svg (100%)
 rename src/{icons/svg => assets/icons}/row.svg (100%)
 rename src/{icons/svg => assets/icons}/search.svg (100%)
 rename src/{icons/svg => assets/icons}/select.svg (100%)
 rename src/{icons/svg => assets/icons}/server.svg (100%)
 rename src/{icons/svg => assets/icons}/shopping.svg (100%)
 rename src/{icons/svg => assets/icons}/size.svg (100%)
 rename src/{icons/svg => assets/icons}/skill.svg (100%)
 rename src/{icons/svg => assets/icons}/slider.svg (100%)
 rename src/{icons/svg => assets/icons}/star.svg (100%)
 rename src/{icons/svg => assets/icons}/swagger.svg (100%)
 rename src/{icons/svg => assets/icons}/switch.svg (100%)
 rename src/{icons/svg => assets/icons}/system.svg (100%)
 rename src/{icons/svg => assets/icons}/tab.svg (100%)
 rename src/{icons/svg => assets/icons}/table.svg (100%)
 rename src/{icons/svg => assets/icons}/textarea.svg (100%)
 rename src/{icons/svg => assets/icons}/theme.svg (100%)
 rename src/{icons/svg => assets/icons}/time-range.svg (100%)
 rename src/{icons/svg => assets/icons}/time.svg (100%)
 rename src/{icons/svg => assets/icons}/tool.svg (100%)
 rename src/{icons/svg => assets/icons}/tree-table.svg (100%)
 rename src/{icons/svg => assets/icons}/tree.svg (100%)
 rename src/{icons/svg => assets/icons}/upload.svg (100%)
 rename src/{icons/svg => assets/icons}/user.svg (100%)
 rename src/{icons/svg => assets/icons}/validCode.svg (100%)
 rename src/{icons/svg => assets/icons}/wechat.svg (100%)
 rename src/{icons/svg => assets/icons}/zip.svg (100%)
 create mode 100644 src/components/SvgIcon/index.vue
 delete mode 100644 src/icons/index.ts
 delete mode 100644 src/icons/index.vue

diff --git a/README.md b/README.md
index 66d656ef..04e911f0 100644
--- a/README.md
+++ b/README.md
@@ -479,4 +479,14 @@ export default defineComponent({
 ```
 
 
+## SVG图标
 
+vite-plugin-svg-icons 使用说明：https://github.com/anncwb/vite-plugin-svg-icons/blob/main/README.zh_CN.md
+
+安装：
+
+```
+npm i vite-plugin-svg-icons -D
+```
+
+## 跨域处理
diff --git a/package.json b/package.json
index 39c54bf8..7d2c992b 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,6 @@
   "dependencies": {
     "axios": "^0.24.0",
     "element-plus": "^1.2.0-beta.3",
-    "fs": "0.0.1-security",
     "path-to-regexp": "^6.2.0",
     "screenfull": "^6.0.0",
     "vue": "^3.2.16",
@@ -21,9 +20,9 @@
     "@types/nprogress": "^0.2.0",
     "@vitejs/plugin-vue": "^1.9.3",
     "sass": "^1.43.4",
-    "svg-sprite-loader": "^6.0.11",
     "typescript": "^4.4.3",
     "vite": "^2.6.4",
+    "vite-plugin-svg-icons": "^1.0.5",
     "vue-tsc": "^0.3.0"
   }
 }
diff --git a/src/icons/svg/404.svg b/src/assets/icons/404.svg
similarity index 100%
rename from src/icons/svg/404.svg
rename to src/assets/icons/404.svg
diff --git a/src/icons/svg/await.svg b/src/assets/icons/await.svg
similarity index 100%
rename from src/icons/svg/await.svg
rename to src/assets/icons/await.svg
diff --git a/src/icons/svg/bug.svg b/src/assets/icons/bug.svg
similarity index 100%
rename from src/icons/svg/bug.svg
rename to src/assets/icons/bug.svg
diff --git a/src/icons/svg/build.svg b/src/assets/icons/build.svg
similarity index 100%
rename from src/icons/svg/build.svg
rename to src/assets/icons/build.svg
diff --git a/src/icons/svg/button.svg b/src/assets/icons/button.svg
similarity index 100%
rename from src/icons/svg/button.svg
rename to src/assets/icons/button.svg
diff --git a/src/icons/svg/cascader.svg b/src/assets/icons/cascader.svg
similarity index 100%
rename from src/icons/svg/cascader.svg
rename to src/assets/icons/cascader.svg
diff --git a/src/icons/svg/chart.svg b/src/assets/icons/chart.svg
similarity index 100%
rename from src/icons/svg/chart.svg
rename to src/assets/icons/chart.svg
diff --git a/src/icons/svg/checkbox.svg b/src/assets/icons/checkbox.svg
similarity index 100%
rename from src/icons/svg/checkbox.svg
rename to src/assets/icons/checkbox.svg
diff --git a/src/icons/svg/clipboard.svg b/src/assets/icons/clipboard.svg
similarity index 100%
rename from src/icons/svg/clipboard.svg
rename to src/assets/icons/clipboard.svg
diff --git a/src/icons/svg/code.svg b/src/assets/icons/code.svg
similarity index 100%
rename from src/icons/svg/code.svg
rename to src/assets/icons/code.svg
diff --git a/src/icons/svg/color.svg b/src/assets/icons/color.svg
similarity index 100%
rename from src/icons/svg/color.svg
rename to src/assets/icons/color.svg
diff --git a/src/icons/svg/component.svg b/src/assets/icons/component.svg
similarity index 100%
rename from src/icons/svg/component.svg
rename to src/assets/icons/component.svg
diff --git a/src/icons/svg/dashboard.svg b/src/assets/icons/dashboard.svg
similarity index 100%
rename from src/icons/svg/dashboard.svg
rename to src/assets/icons/dashboard.svg
diff --git a/src/icons/svg/date-range.svg b/src/assets/icons/date-range.svg
similarity index 100%
rename from src/icons/svg/date-range.svg
rename to src/assets/icons/date-range.svg
diff --git a/src/icons/svg/date.svg b/src/assets/icons/date.svg
similarity index 100%
rename from src/icons/svg/date.svg
rename to src/assets/icons/date.svg
diff --git a/src/icons/svg/dict.svg b/src/assets/icons/dict.svg
similarity index 100%
rename from src/icons/svg/dict.svg
rename to src/assets/icons/dict.svg
diff --git a/src/icons/svg/documentation.svg b/src/assets/icons/documentation.svg
similarity index 100%
rename from src/icons/svg/documentation.svg
rename to src/assets/icons/documentation.svg
diff --git a/src/icons/svg/download.svg b/src/assets/icons/download.svg
similarity index 100%
rename from src/icons/svg/download.svg
rename to src/assets/icons/download.svg
diff --git a/src/icons/svg/drag.svg b/src/assets/icons/drag.svg
similarity index 100%
rename from src/icons/svg/drag.svg
rename to src/assets/icons/drag.svg
diff --git a/src/icons/svg/druid.svg b/src/assets/icons/druid.svg
similarity index 100%
rename from src/icons/svg/druid.svg
rename to src/assets/icons/druid.svg
diff --git a/src/icons/svg/edit.svg b/src/assets/icons/edit.svg
similarity index 100%
rename from src/icons/svg/edit.svg
rename to src/assets/icons/edit.svg
diff --git a/src/icons/svg/education.svg b/src/assets/icons/education.svg
similarity index 100%
rename from src/icons/svg/education.svg
rename to src/assets/icons/education.svg
diff --git a/src/icons/svg/email.svg b/src/assets/icons/email.svg
similarity index 100%
rename from src/icons/svg/email.svg
rename to src/assets/icons/email.svg
diff --git a/src/icons/svg/example.svg b/src/assets/icons/example.svg
similarity index 100%
rename from src/icons/svg/example.svg
rename to src/assets/icons/example.svg
diff --git a/src/icons/svg/excel.svg b/src/assets/icons/excel.svg
similarity index 100%
rename from src/icons/svg/excel.svg
rename to src/assets/icons/excel.svg
diff --git a/src/icons/svg/exit-fullscreen.svg b/src/assets/icons/exit-fullscreen.svg
similarity index 100%
rename from src/icons/svg/exit-fullscreen.svg
rename to src/assets/icons/exit-fullscreen.svg
diff --git a/src/icons/svg/eye-open.svg b/src/assets/icons/eye-open.svg
similarity index 100%
rename from src/icons/svg/eye-open.svg
rename to src/assets/icons/eye-open.svg
diff --git a/src/icons/svg/eye.svg b/src/assets/icons/eye.svg
similarity index 100%
rename from src/icons/svg/eye.svg
rename to src/assets/icons/eye.svg
diff --git a/src/icons/svg/form.svg b/src/assets/icons/form.svg
similarity index 100%
rename from src/icons/svg/form.svg
rename to src/assets/icons/form.svg
diff --git a/src/icons/svg/fullscreen.svg b/src/assets/icons/fullscreen.svg
similarity index 100%
rename from src/icons/svg/fullscreen.svg
rename to src/assets/icons/fullscreen.svg
diff --git a/src/icons/svg/github.svg b/src/assets/icons/github.svg
similarity index 100%
rename from src/icons/svg/github.svg
rename to src/assets/icons/github.svg
diff --git a/src/icons/svg/guide.svg b/src/assets/icons/guide.svg
similarity index 100%
rename from src/icons/svg/guide.svg
rename to src/assets/icons/guide.svg
diff --git a/src/icons/svg/icon.svg b/src/assets/icons/icon.svg
similarity index 100%
rename from src/icons/svg/icon.svg
rename to src/assets/icons/icon.svg
diff --git a/src/icons/svg/input.svg b/src/assets/icons/input.svg
similarity index 100%
rename from src/icons/svg/input.svg
rename to src/assets/icons/input.svg
diff --git a/src/icons/svg/international.svg b/src/assets/icons/international.svg
similarity index 100%
rename from src/icons/svg/international.svg
rename to src/assets/icons/international.svg
diff --git a/src/icons/svg/ip.svg b/src/assets/icons/ip.svg
similarity index 100%
rename from src/icons/svg/ip.svg
rename to src/assets/icons/ip.svg
diff --git a/src/icons/svg/job.svg b/src/assets/icons/job.svg
similarity index 100%
rename from src/icons/svg/job.svg
rename to src/assets/icons/job.svg
diff --git a/src/icons/svg/language.svg b/src/assets/icons/language.svg
similarity index 100%
rename from src/icons/svg/language.svg
rename to src/assets/icons/language.svg
diff --git a/src/icons/svg/link.svg b/src/assets/icons/link.svg
similarity index 100%
rename from src/icons/svg/link.svg
rename to src/assets/icons/link.svg
diff --git a/src/icons/svg/list.svg b/src/assets/icons/list.svg
similarity index 100%
rename from src/icons/svg/list.svg
rename to src/assets/icons/list.svg
diff --git a/src/icons/svg/lock.svg b/src/assets/icons/lock.svg
similarity index 100%
rename from src/icons/svg/lock.svg
rename to src/assets/icons/lock.svg
diff --git a/src/icons/svg/log.svg b/src/assets/icons/log.svg
similarity index 100%
rename from src/icons/svg/log.svg
rename to src/assets/icons/log.svg
diff --git a/src/icons/svg/logininfor.svg b/src/assets/icons/logininfor.svg
similarity index 100%
rename from src/icons/svg/logininfor.svg
rename to src/assets/icons/logininfor.svg
diff --git a/src/icons/svg/menu.svg b/src/assets/icons/menu.svg
similarity index 100%
rename from src/icons/svg/menu.svg
rename to src/assets/icons/menu.svg
diff --git a/src/icons/svg/message.svg b/src/assets/icons/message.svg
similarity index 100%
rename from src/icons/svg/message.svg
rename to src/assets/icons/message.svg
diff --git a/src/icons/svg/money.svg b/src/assets/icons/money.svg
similarity index 100%
rename from src/icons/svg/money.svg
rename to src/assets/icons/money.svg
diff --git a/src/icons/svg/monitor.svg b/src/assets/icons/monitor.svg
similarity index 100%
rename from src/icons/svg/monitor.svg
rename to src/assets/icons/monitor.svg
diff --git a/src/icons/svg/nested.svg b/src/assets/icons/nested.svg
similarity index 100%
rename from src/icons/svg/nested.svg
rename to src/assets/icons/nested.svg
diff --git a/src/icons/svg/nodata.svg b/src/assets/icons/nodata.svg
similarity index 100%
rename from src/icons/svg/nodata.svg
rename to src/assets/icons/nodata.svg
diff --git a/src/icons/svg/number.svg b/src/assets/icons/number.svg
similarity index 100%
rename from src/icons/svg/number.svg
rename to src/assets/icons/number.svg
diff --git a/src/icons/svg/offline.svg b/src/assets/icons/offline.svg
similarity index 100%
rename from src/icons/svg/offline.svg
rename to src/assets/icons/offline.svg
diff --git a/src/icons/svg/online.svg b/src/assets/icons/online.svg
similarity index 100%
rename from src/icons/svg/online.svg
rename to src/assets/icons/online.svg
diff --git a/src/icons/svg/password.svg b/src/assets/icons/password.svg
similarity index 100%
rename from src/icons/svg/password.svg
rename to src/assets/icons/password.svg
diff --git a/src/icons/svg/pdf.svg b/src/assets/icons/pdf.svg
similarity index 100%
rename from src/icons/svg/pdf.svg
rename to src/assets/icons/pdf.svg
diff --git a/src/icons/svg/people.svg b/src/assets/icons/people.svg
similarity index 100%
rename from src/icons/svg/people.svg
rename to src/assets/icons/people.svg
diff --git a/src/icons/svg/peoples.svg b/src/assets/icons/peoples.svg
similarity index 100%
rename from src/icons/svg/peoples.svg
rename to src/assets/icons/peoples.svg
diff --git a/src/icons/svg/phone.svg b/src/assets/icons/phone.svg
similarity index 100%
rename from src/icons/svg/phone.svg
rename to src/assets/icons/phone.svg
diff --git a/src/icons/svg/post.svg b/src/assets/icons/post.svg
similarity index 100%
rename from src/icons/svg/post.svg
rename to src/assets/icons/post.svg
diff --git a/src/icons/svg/qq.svg b/src/assets/icons/qq.svg
similarity index 100%
rename from src/icons/svg/qq.svg
rename to src/assets/icons/qq.svg
diff --git a/src/icons/svg/question.svg b/src/assets/icons/question.svg
similarity index 100%
rename from src/icons/svg/question.svg
rename to src/assets/icons/question.svg
diff --git a/src/icons/svg/radio.svg b/src/assets/icons/radio.svg
similarity index 100%
rename from src/icons/svg/radio.svg
rename to src/assets/icons/radio.svg
diff --git a/src/icons/svg/rate.svg b/src/assets/icons/rate.svg
similarity index 100%
rename from src/icons/svg/rate.svg
rename to src/assets/icons/rate.svg
diff --git a/src/icons/svg/redis.svg b/src/assets/icons/redis.svg
similarity index 100%
rename from src/icons/svg/redis.svg
rename to src/assets/icons/redis.svg
diff --git a/src/icons/svg/route.svg b/src/assets/icons/route.svg
similarity index 100%
rename from src/icons/svg/route.svg
rename to src/assets/icons/route.svg
diff --git a/src/icons/svg/row.svg b/src/assets/icons/row.svg
similarity index 100%
rename from src/icons/svg/row.svg
rename to src/assets/icons/row.svg
diff --git a/src/icons/svg/search.svg b/src/assets/icons/search.svg
similarity index 100%
rename from src/icons/svg/search.svg
rename to src/assets/icons/search.svg
diff --git a/src/icons/svg/select.svg b/src/assets/icons/select.svg
similarity index 100%
rename from src/icons/svg/select.svg
rename to src/assets/icons/select.svg
diff --git a/src/icons/svg/server.svg b/src/assets/icons/server.svg
similarity index 100%
rename from src/icons/svg/server.svg
rename to src/assets/icons/server.svg
diff --git a/src/icons/svg/shopping.svg b/src/assets/icons/shopping.svg
similarity index 100%
rename from src/icons/svg/shopping.svg
rename to src/assets/icons/shopping.svg
diff --git a/src/icons/svg/size.svg b/src/assets/icons/size.svg
similarity index 100%
rename from src/icons/svg/size.svg
rename to src/assets/icons/size.svg
diff --git a/src/icons/svg/skill.svg b/src/assets/icons/skill.svg
similarity index 100%
rename from src/icons/svg/skill.svg
rename to src/assets/icons/skill.svg
diff --git a/src/icons/svg/slider.svg b/src/assets/icons/slider.svg
similarity index 100%
rename from src/icons/svg/slider.svg
rename to src/assets/icons/slider.svg
diff --git a/src/icons/svg/star.svg b/src/assets/icons/star.svg
similarity index 100%
rename from src/icons/svg/star.svg
rename to src/assets/icons/star.svg
diff --git a/src/icons/svg/swagger.svg b/src/assets/icons/swagger.svg
similarity index 100%
rename from src/icons/svg/swagger.svg
rename to src/assets/icons/swagger.svg
diff --git a/src/icons/svg/switch.svg b/src/assets/icons/switch.svg
similarity index 100%
rename from src/icons/svg/switch.svg
rename to src/assets/icons/switch.svg
diff --git a/src/icons/svg/system.svg b/src/assets/icons/system.svg
similarity index 100%
rename from src/icons/svg/system.svg
rename to src/assets/icons/system.svg
diff --git a/src/icons/svg/tab.svg b/src/assets/icons/tab.svg
similarity index 100%
rename from src/icons/svg/tab.svg
rename to src/assets/icons/tab.svg
diff --git a/src/icons/svg/table.svg b/src/assets/icons/table.svg
similarity index 100%
rename from src/icons/svg/table.svg
rename to src/assets/icons/table.svg
diff --git a/src/icons/svg/textarea.svg b/src/assets/icons/textarea.svg
similarity index 100%
rename from src/icons/svg/textarea.svg
rename to src/assets/icons/textarea.svg
diff --git a/src/icons/svg/theme.svg b/src/assets/icons/theme.svg
similarity index 100%
rename from src/icons/svg/theme.svg
rename to src/assets/icons/theme.svg
diff --git a/src/icons/svg/time-range.svg b/src/assets/icons/time-range.svg
similarity index 100%
rename from src/icons/svg/time-range.svg
rename to src/assets/icons/time-range.svg
diff --git a/src/icons/svg/time.svg b/src/assets/icons/time.svg
similarity index 100%
rename from src/icons/svg/time.svg
rename to src/assets/icons/time.svg
diff --git a/src/icons/svg/tool.svg b/src/assets/icons/tool.svg
similarity index 100%
rename from src/icons/svg/tool.svg
rename to src/assets/icons/tool.svg
diff --git a/src/icons/svg/tree-table.svg b/src/assets/icons/tree-table.svg
similarity index 100%
rename from src/icons/svg/tree-table.svg
rename to src/assets/icons/tree-table.svg
diff --git a/src/icons/svg/tree.svg b/src/assets/icons/tree.svg
similarity index 100%
rename from src/icons/svg/tree.svg
rename to src/assets/icons/tree.svg
diff --git a/src/icons/svg/upload.svg b/src/assets/icons/upload.svg
similarity index 100%
rename from src/icons/svg/upload.svg
rename to src/assets/icons/upload.svg
diff --git a/src/icons/svg/user.svg b/src/assets/icons/user.svg
similarity index 100%
rename from src/icons/svg/user.svg
rename to src/assets/icons/user.svg
diff --git a/src/icons/svg/validCode.svg b/src/assets/icons/validCode.svg
similarity index 100%
rename from src/icons/svg/validCode.svg
rename to src/assets/icons/validCode.svg
diff --git a/src/icons/svg/wechat.svg b/src/assets/icons/wechat.svg
similarity index 100%
rename from src/icons/svg/wechat.svg
rename to src/assets/icons/wechat.svg
diff --git a/src/icons/svg/zip.svg b/src/assets/icons/zip.svg
similarity index 100%
rename from src/icons/svg/zip.svg
rename to src/assets/icons/zip.svg
diff --git a/src/components/SvgIcon/index.vue b/src/components/SvgIcon/index.vue
new file mode 100644
index 00000000..28e6f198
--- /dev/null
+++ b/src/components/SvgIcon/index.vue
@@ -0,0 +1,40 @@
+<template>
+  <svg aria-hidden="true"  class="svg-icon">
+    <use :xlink:href="symbolId" :fill="color" />
+  </svg>
+</template>
+
+<script>
+import { defineComponent, computed } from 'vue';
+
+export default defineComponent({
+  name: 'SvgIcon',
+  props: {
+    prefix: {
+      type: String,
+      default: 'icon',
+    },
+    iconClass: {
+      type: String,
+      required: true,
+    },
+    color: {
+      type: String,
+      default: '#FFF',
+    },
+  },
+  setup(props) {
+    const symbolId = computed(() => `#${props.prefix}-${props.iconClass}`);
+    return { symbolId };
+  },
+});
+</script>
+
+<style scoped>
+.svg-icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  overflow: hidden;
+}
+</style>
\ No newline at end of file
diff --git a/src/icons/index.ts b/src/icons/index.ts
deleted file mode 100644
index 95b675b4..00000000
--- a/src/icons/index.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import { readFileSync, readdirSync } from 'fs'
-
-let idPrefix = ''
-const svgTitle = /<svg([^>+].*?)>/
-const clearHeightWidth = /(width|height)="([^>+].*?)"/g
-const hasViewBox = /(viewBox="[^>+].*?")/g
-const clearReturn = /(\r)|(\n)/g
-
-// 查找svg文件
-function svgFind(e) {
-    const arr = []
-    const dirents = readdirSync(e, { withFileTypes: true })
-    for (const dirent of dirents) {
-        if (dirent.isDirectory()) arr.push(...svgFind(e + dirent.name + '/'))
-        else {
-            const svg = readFileSync(e + dirent.name)
-                .toString()
-                .replace(clearReturn, '')
-                .replace(svgTitle, ($1, $2) => {
-                    let width = 0,
-                        height = 0,
-                        content = $2.replace(clearHeightWidth, (s1 : string, s2:string, s3:number) => {
-                            if (s2 === 'width') width = s3
-                            else if (s2 === 'height') height = s3
-                            return ''
-                        })
-                    if (!hasViewBox.test($2)) content += `viewBox="0 0 ${width} ${height}"`
-                    return `<symbol id="${idPrefix}-${dirent.name.replace('.svg', '')}" ${content}>`
-                }).replace('</svg>', '</symbol>')
-            arr.push(svg)
-        }
-    }
-    return arr
-}
-
-// 生成svg
-export const createSvg = (path: any, prefix = 'icon') => {
-    if (path === '') return
-    idPrefix = prefix
-    const res = svgFind(path)
-    return {
-        name: 'svg-transform',
-        transformIndexHtml(dom: String) {
-            return dom.replace(
-                '<body>',
-                `<body><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position: absolute; width: 0; height: 0">${res.join('')}</svg>`
-            )
-        }
-    }
-}
\ No newline at end of file
diff --git a/src/icons/index.vue b/src/icons/index.vue
deleted file mode 100644
index 5e979c4f..00000000
--- a/src/icons/index.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<template>
-  <svg :class="svgClass" v-bind="$attrs" :style="{ color: color }">
-    <use :xlink:href="iconName"></use>
-  </svg>
-</template>
-
-<script setup lang="ts">
-import {computed, defineProps} from 'vue'
-
-const props = defineProps({
-  iconClass: {
-    type: String,
-    required: true
-  },
-  className: {
-    type: String,
-    default: ''
-  }
-})
-
-const iconName = computed(() => `#icon-${props.iconClass}`)
-const svgClass = computed(() => {
-  if (props.className) return `svg-icon icon-${props.className}`
-  return 'svg-icon'
-})
-</script>
-
-<style scoped>
-.svg-icon {
-  width: 1em;
-  height: 1em;
-  vertical-align: -0.15em;
-  fill: currentColor;
-  overflow: hidden;
-}
-
-</style>
diff --git a/src/main.ts b/src/main.ts
index 26f3d8b9..b902312a 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -8,11 +8,10 @@ import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 
 
-import SvgIcon from './icons/index.vue'
+import 'virtual:svg-icons-register';
 
 const app=createApp(App)
 app
-    .component('svg-icon', SvgIcon)
     .use(router)
     .use(store,key)
     .use(ElementPlus)
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index f3f7e023..2f6f444b 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -52,9 +52,13 @@
 </template>
 
 <script>
+import SvgIcon from '@/components/SvgIcon/index.vue';
 
 export default {
   name: 'Login',
+  components:{
+    SvgIcon
+  },
   data() {
     const validatePassword = (rule, value, callback) => {
       if (value.length < 6) {
diff --git a/vite.config.ts b/vite.config.ts
index eba03456..12bab970 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,59 +1,85 @@
-import {defineConfig} from 'vite'
+import {defineConfig, ConfigEnv, loadEnv} from 'vite'
 import vue from '@vitejs/plugin-vue'
-import { createSvg } from './src/icons/index'
+import viteSvgIcons from 'vite-plugin-svg-icons';
 // 在 ts 模块中加载 node 核心模块需要安装 node 的类型补充模块: npm i -D @types/node
 import path from 'path'
 
 // https://vitejs.dev/config/
-export default defineConfig({
-    plugins: [
-        vue(),
-        createSvg('./src/icons/svg/')
+export default ({mode}: ConfigEnv) => {
+
+    const env = loadEnv(mode, process.cwd())
+
+    return defineConfig({
+        plugins: [
+            vue(),
+            viteSvgIcons({
+                // 指定需要缓存的图标文件夹
+                iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
+                // 指定symbolId格式
+                symbolId: 'icon-[dir]-[name]',
+            })
+
+        ],
+        // 本地反向代理解决跨域
+        server: {
+            host: '0.0.0.0',
+            port: Number(env.VITE_APP_PORT),
+            open: true, // 运行自动打开浏览器
+            proxy: {
+                [env.VITE_APP_BASE_API]: {
+                    target: 'http://localhost:9999',
+                    changeOrigin: true,
+                    rewrite:  path => path.replace(/^\/api/, '') //TODO
+                }
+            }
+        },
+        resolve: {
+            // Vite2设置别名路径方式一
+            // alias:{
+            //     "/@":path.resolve("./src"),  // 相对路径别名配置，@表示src
+            //  },
+            // Vite2设置别名路径方式二
+            alias: [
+                {
+                    find: "@",
+                    replacement: path.resolve("./src")
+                },
+                {
+                    find: "@image",
+                    replacement: path.resolve("./src/assets/images")
+                },
+                {
+                    find: "@router",
+                    replacement: path.resolve("./src/router")
+                },
+                {
+                    find: "@store",
+                    replacement: path.resolve("./src/store")
+                },
+                {
+                    find: "@api",
+                    replacement: path.resolve("./src/api")
+                },
+                {
+                    find: "@utils",
+                    replacement: path.resolve("./src/utils")
+                },
+                {
+                    find: "@views",
+                    replacement: path.resolve("./src/views")
+                },
+                {
+                    find: "@styles",
+                    replacement: path.resolve("./src/styles")
+                },
+            ]
+        }
+    })
+
+
+}
+
+
 
-    ],
-    resolve: {
-        // Vite2设置别名路径方式一
-        /**
-         alias:{
 
-           "/@":path.resolve("./src"),
-         },
-         **/
 
-        // Vite2设置别名路径方式二
-        alias: [
-            {
-                find: "@",
-                replacement: path.resolve("./src")
-            },
-            {
-                find: "@image",
-                replacement: path.resolve("./src/assets/images")
-            },
-            {
-                find: "@router",
-                replacement: path.resolve("./src/router")
-            },
-            {
-                find: "@store",
-                replacement: path.resolve("./src/store")
-            },
-            {
-                find: "@api",
-                replacement: path.resolve("./src/api")
-            },
-            {
-                find:"@utils",
-                replacement: path.resolve("./src/utils")
-            },
-            {
-                find:"@views",
-                replacement: path.resolve("./src/views")
-            },
-            {
-                find:"@styles",
-                replacement: path.resolve("./src/styles")
-            },
-        ]
-    }
-})