From 2e5601f0bae48285c46293f53df7416134d0a1c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?=
 <1262327911@qq.com>
Date: Sun, 17 Dec 2023 00:12:50 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20iconify=E5=9B=BE=E6=A0=87=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E=E7=A6=BB=E7=BA=BF=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   4 +-
 pnpm-lock.yaml                                |  42 +++---
 src/components/GoIconify/index.ts             |   3 +
 src/components/GoIconify/index.vue            |  34 +++++
 src/main.ts                                   | 126 ++++++++++--------
 .../components/Icons/Default/Icon/index.vue   |   4 +-
 .../components/ChartsItemBox/index.vue        |   4 +-
 .../components/ChartsSearch/index.vue         |   4 +-
 types/shims-vue.d.ts                          |   3 +-
 vite.config.ts                                |  11 +-
 10 files changed, 147 insertions(+), 88 deletions(-)
 create mode 100644 src/components/GoIconify/index.ts
 create mode 100644 src/components/GoIconify/index.vue

diff --git a/package.json b/package.json
index 3636ceb3..4ab857b3 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
     "@amap/amap-jsapi-types": "^0.0.8",
+    "@iconify/json": "^2.2.158",
     "@types/color": "^3.0.3",
     "@types/crypto-js": "^4.1.1",
     "@types/keymaster": "^1.6.30",
@@ -32,6 +33,7 @@
     "gsap": "^3.11.3",
     "highlight.js": "^11.5.0",
     "html2canvas": "^1.4.1",
+    "iconify-icon": "^1.0.8",
     "keymaster": "^1.6.2",
     "mitt": "^3.0.0",
     "monaco-editor": "^0.33.0",
@@ -50,8 +52,6 @@
   "devDependencies": {
     "@commitlint/cli": "^17.0.2",
     "@commitlint/config-conventional": "^17.0.2",
-    "@iconify/types": "^2.0.0",
-    "@iconify/vue": "^4.1.1",
     "@types/node": "^16.11.26",
     "@types/three": "^0.144.0",
     "@typescript-eslint/eslint-plugin": "^5.18.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8d00e0ef..4cc6ff8c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,6 +11,9 @@ dependencies:
   '@amap/amap-jsapi-types':
     specifier: ^0.0.8
     version: 0.0.8
+  '@iconify/json':
+    specifier: ^2.2.158
+    version: 2.2.158
   '@types/color':
     specifier: ^3.0.3
     version: 3.0.3
@@ -59,6 +62,9 @@ dependencies:
   html2canvas:
     specifier: ^1.4.1
     version: 1.4.1
+  iconify-icon:
+    specifier: ^1.0.8
+    version: 1.0.8
   keymaster:
     specifier: ^1.6.2
     version: 1.6.2
@@ -87,7 +93,7 @@ dependencies:
     specifier: ^0.13.1
     version: 0.13.1(vue@3.2.37)
   vue-i18n:
-    specifier: ^9.2.2
+    specifier: 9.2.2
     version: 9.2.2(vue@3.2.37)
   vue-router:
     specifier: 4.0.12
@@ -109,12 +115,6 @@ devDependencies:
   '@commitlint/config-conventional':
     specifier: ^17.0.2
     version: 17.0.2
-  '@iconify/types':
-    specifier: ^2.0.0
-    version: 2.0.0
-  '@iconify/vue':
-    specifier: ^4.1.1
-    version: 4.1.1(vue@3.2.37)
   '@types/node':
     specifier: ^16.11.26
     version: 16.11.40
@@ -1122,18 +1122,16 @@ packages:
     resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
     dev: true
 
-  /@iconify/types@2.0.0:
-    resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
-    dev: true
-
-  /@iconify/vue@4.1.1(vue@3.2.37):
-    resolution: {integrity: sha512-RL85Bm/DAe8y6rT6pux7D2FJSiUEM/TPfyK7GrbAOfTSwrhvwJW+S5yijdGcmtXouA8MtuH9C7l4hiSE4mLMjg==}
-    peerDependencies:
-      vue: '>=3'
+  /@iconify/json@2.2.158:
+    resolution: {integrity: sha512-6foGYcG97nmYpJ7N0MAbtfH7SKf7RvoOCYYSBi8gs+8qopXzplIP2F4lQiLrjpbPQihAoTercmGYWi4ABxLX1A==}
     dependencies:
       '@iconify/types': 2.0.0
-      vue: 3.2.37
-    dev: true
+      pathe: 1.1.1
+    dev: false
+
+  /@iconify/types@2.0.0:
+    resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
+    dev: false
 
   /@intlify/core-base@9.2.2:
     resolution: {integrity: sha512-JjUpQtNfn+joMbrXvpR4hTF8iJQ2sEFzzK3KIESOx+f+uwIjgw20igOyaIdhfsVVBCds8ZM64MoeNSx+PHQMkA==}
@@ -3668,6 +3666,12 @@ packages:
     hasBin: true
     dev: true
 
+  /iconify-icon@1.0.8:
+    resolution: {integrity: sha512-jvbUKHXf8EnGGArmhlP2IG8VqQLFFyTvTqb9LVL2TKTh7/eCCD1o2HHE9thpbJJb6B8hzhcFb6rOKhvo7reNKA==}
+    dependencies:
+      '@iconify/types': 2.0.0
+    dev: false
+
   /iconv-lite@0.4.24:
     resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==}
     engines: {node: '>=0.10.0'}
@@ -4741,6 +4745,10 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /pathe@1.1.1:
+    resolution: {integrity: sha512-d+RQGp0MAYTIaDBIMmOfMwz3E+LOZnxx1HZd5R18mmCZY0QBlK0LDZfPc8FW8Ed2DlvsuE6PRjroDY+wg4+j/Q==}
+    dev: false
+
   /picocolors@1.0.0:
     resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
 
diff --git a/src/components/GoIconify/index.ts b/src/components/GoIconify/index.ts
new file mode 100644
index 00000000..a333d9a2
--- /dev/null
+++ b/src/components/GoIconify/index.ts
@@ -0,0 +1,3 @@
+import GoIconify from './index.vue';
+
+export { GoIconify };
diff --git a/src/components/GoIconify/index.vue b/src/components/GoIconify/index.vue
new file mode 100644
index 00000000..750b8267
--- /dev/null
+++ b/src/components/GoIconify/index.vue
@@ -0,0 +1,34 @@
+<template>
+  <iconify-icon
+    :icon="icon"
+    :rotate="`${rotate}deg`"
+    :width="width"
+    :style="{
+      color: color
+    }"
+  ></iconify-icon>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  icon: {
+    type: String,
+    required: true
+  },
+  color: {
+    type: String,
+    default: '#999999',
+    required: false
+  },
+  width: {
+    type: [String, Number],
+    default: '20',
+    required: false
+  },
+  rotate: {
+    type: [String, Number],
+    default: '0',
+    required: false
+  }
+})
+</script>
diff --git a/src/main.ts b/src/main.ts
index 550bc63c..dcd249d4 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,59 +1,67 @@
-import { createApp } from 'vue'
-import App from './App.vue'
-import router, { setupRouter } from '@/router'
-import i18n from '@/i18n/index'
-import { setupStore } from '@/store'
-import { setupNaive, setupDirectives, setupCustomComponents, initFunction } from '@/plugins'
-import { GoAppProvider } from '@/components/GoAppProvider/index'
-import { setHtmlTheme } from '@/utils'
-
-// 引入全局样式
-import '@/styles/pages/index.scss'
-// 引入动画
-import 'animate.css/animate.min.css'
-// 引入标尺
-import 'vue3-sketch-ruler/lib/style.css'
-
-async function appInit() {
-  const goAppProvider = createApp(GoAppProvider)
-
-  const app = createApp(App)
-
-  // 注册全局常用的 naive-ui 组件
-  setupNaive(app)
-
-  // 注册全局自定义指令
-  setupDirectives(app)
-
-  // 注册全局自定义组件
-  setupCustomComponents(app)
-
-  // 挂载状态管理
-  setupStore(app)
-
-  // 解决路由守卫，Axios中可使用，Dialog，Message 等全局组件
-  goAppProvider.mount('#appProvider', true)
-
-  // 挂载路由
-  setupRouter(app)
-
-  // 路由准备就绪后挂载APP实例
-  await router.isReady()
-
-  // Store 准备就绪后处理主题色
-  setHtmlTheme()
-
-  // 语言注册
-  app.use(i18n)
-
-  // 挂载到页面
-  app.mount('#app', true)
-
-  // 挂载到 window
-  window['$vue'] = app
-}
-
-appInit().then(() => {
-  initFunction()
-})
-
+import { createApp } from 'vue'
+import App from './App.vue'
+import router, { setupRouter } from '@/router'
+import i18n from '@/i18n/index'
+import { setupStore } from '@/store'
+import { setupNaive, setupDirectives, setupCustomComponents, initFunction } from '@/plugins'
+import { GoAppProvider } from '@/components/GoAppProvider/index'
+import { setHtmlTheme } from '@/utils'
+import { addCollection } from 'iconify-icon'
+import uimIcons from '@iconify/json/json/uim.json'
+import lineMdIcons from '@iconify/json/json/line-md.json'
+import wiIcons from '@iconify/json/json/wi.json'
+
+// 引入全局样式
+import '@/styles/pages/index.scss'
+// 引入动画
+import 'animate.css/animate.min.css'
+// 引入标尺
+import 'vue3-sketch-ruler/lib/style.css'
+// 注册图标
+addCollection(uimIcons)
+addCollection(lineMdIcons)
+addCollection(wiIcons)
+
+async function appInit() {
+  const goAppProvider = createApp(GoAppProvider)
+
+  const app = createApp(App)
+
+  // 注册全局常用的 naive-ui 组件
+  setupNaive(app)
+
+  // 注册全局自定义指令
+  setupDirectives(app)
+
+  // 注册全局自定义组件
+  setupCustomComponents(app)
+
+  // 挂载状态管理
+  setupStore(app)
+
+  // 解决路由守卫，Axios中可使用，Dialog，Message 等全局组件
+  goAppProvider.mount('#appProvider', true)
+
+  // 挂载路由
+  setupRouter(app)
+
+  // 路由准备就绪后挂载APP实例
+  await router.isReady()
+
+  // Store 准备就绪后处理主题色
+  setHtmlTheme()
+
+  // 语言注册
+  app.use(i18n)
+
+  // 挂载到页面
+  app.mount('#app', true)
+
+  // 挂载到 window
+  window['$vue'] = app
+}
+
+appInit().then(() => {
+  initFunction()
+})
+
diff --git a/src/packages/components/Icons/Default/Icon/index.vue b/src/packages/components/Icons/Default/Icon/index.vue
index 2c139a8a..cbfc81ae 100644
--- a/src/packages/components/Icons/Default/Icon/index.vue
+++ b/src/packages/components/Icons/Default/Icon/index.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="go-icon-box">
-    <Icon :icon="((dataset || '') as string)" :color="color" :width="size" :rotate="rotate" />
+    <GoIconify :icon="((dataset || '') as string)" :color="color" :width="size" :rotate="rotate" />
   </div>
 </template>
 
 <script setup lang="ts">
 import { PropType, toRefs } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
-import { Icon } from '@iconify/vue'
+import { GoIconify } from '@/components/GoIconify'
 
 const props = defineProps({
   chartConfig: {
diff --git a/src/views/chart/ContentCharts/components/ChartsItemBox/index.vue b/src/views/chart/ContentCharts/components/ChartsItemBox/index.vue
index cca0c4a1..f3f96e39 100644
--- a/src/views/chart/ContentCharts/components/ChartsItemBox/index.vue
+++ b/src/views/chart/ContentCharts/components/ChartsItemBox/index.vue
@@ -23,7 +23,7 @@
           </n-text>
         </div>
         <div class="list-center go-flex-center go-transition" draggable="true">
-          <Icon v-if="item.icon" class="list-img" :icon="item.icon" color="#999" width="48" />
+          <GoIconify v-if="item.icon" class="list-img" :icon="item.icon" color="#999" width="48" style="height: auto" />
           <chart-glob-image v-else class="list-img" :chartConfig="item" />
         </div>
         <div class="list-bottom">
@@ -64,7 +64,7 @@ import { createComponent } from '@/packages'
 import { ConfigType, CreateComponentType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum } from '@/packages/components/Photos/index.d'
 import { fetchConfigComponent, fetchChartComponent } from '@/packages/index'
-import { Icon } from '@iconify/vue'
+import { GoIconify } from '@/components/GoIconify'
 import { icon } from '@/plugins'
 
 import omit from 'lodash/omit'
diff --git a/src/views/chart/ContentCharts/components/ChartsSearch/index.vue b/src/views/chart/ContentCharts/components/ChartsSearch/index.vue
index f90536a8..e0a2e452 100644
--- a/src/views/chart/ContentCharts/components/ChartsSearch/index.vue
+++ b/src/views/chart/ContentCharts/components/ChartsSearch/index.vue
@@ -37,7 +37,7 @@
               :title="item.title"
               @click="selectChartHandle(item)"
             >
-              <Icon v-if="item.icon" class="list-img" :icon="item.icon" color="#999" width="20" />
+              <GoIconify v-if="item.icon" class="list-img" :icon="item.icon" color="#999" width="20" />
               <chart-glob-image v-else class="list-item-img" :chartConfig="item" />
               <n-text class="list-item-fs" depth="2">{{ item.title }}</n-text>
             </div>
@@ -79,7 +79,7 @@ import { isString, addEventListener, removeEventListener } from '@/utils'
 import { fetchConfigComponent, fetchChartComponent } from '@/packages/index'
 import { componentInstall, loadingStart, loadingFinish, loadingError } from '@/utils'
 import { ChartGlobImage } from '@/components/Pages/ChartGlobImage'
-import { Icon } from '@iconify/vue'
+import { GoIconify } from '@/components/GoIconify'
 
 const props = defineProps({
   menuOptions: {
diff --git a/types/shims-vue.d.ts b/types/shims-vue.d.ts
index fa19c5db..fbfc8922 100644
--- a/types/shims-vue.d.ts
+++ b/types/shims-vue.d.ts
@@ -5,5 +5,4 @@ declare module '*.vue' {
 }
 
 declare module 'lodash/*'
-declare module 'dom-helpers'
-declare module '@iconify/vue'
\ No newline at end of file
+declare module 'dom-helpers'
\ No newline at end of file
diff --git a/vite.config.ts b/vite.config.ts
index 79f05a76..93caff76 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -25,7 +25,7 @@ export default defineConfig({
       },
       {
         find: 'vue-i18n',
-        replacement: 'vue-i18n/dist/vue-i18n.cjs.js', //解决i8n警告
+        replacement: 'vue-i18n/dist/vue-i18n.cjs.js' //解决i8n警告
       }
     ],
     dedupe: ['vue']
@@ -40,7 +40,14 @@ export default defineConfig({
     }
   },
   plugins: [
-    vue(),
+    vue({
+      template: {
+        compilerOptions: {
+          // 排除 iconify 图标影子组件编译报错
+          isCustomElement: tag => tag.startsWith('iconify-icon')
+        }
+      }
+    }),
     monacoEditorPlugin({
       languageWorkers: ['editorWorkerService', 'typescript', 'json', 'html']
     }),