chore: 新增是否使用在线图标配置

.env.base

@@ -15,3 +15,6 @@ VITE_USE_ALL_ELEMENT_PLUS_STYLE=true
 
 # 是否开启mock
 VITE_USE_MOCK=true
+
+# 是否使用在线图标
+VITE_USE_ONLINE_ICON=true

.env.dev

@@ -32,4 +32,7 @@ VITE_USE_ALL_ELEMENT_PLUS_STYLE=false
 VITE_USE_MOCK=true
 
 # 是否切割css
-VITE_USE_CSS_SPLIT=false
+VITE_USE_CSS_SPLIT=false
+
+# 是否使用在线图标
+VITE_USE_ONLINE_ICON=true

.env.gitee

@@ -32,4 +32,7 @@ VITE_USE_ALL_ELEMENT_PLUS_STYLE=false
 VITE_USE_MOCK=true
 
 # 是否切割css
-VITE_USE_CSS_SPLIT=false
+VITE_USE_CSS_SPLIT=false
+
+# 是否使用在线图标
+VITE_USE_ONLINE_ICON=true

.env.pro

@@ -32,4 +32,7 @@ VITE_USE_ALL_ELEMENT_PLUS_STYLE=false
 VITE_USE_MOCK=true
 
 # 是否切割css
-VITE_USE_CSS_SPLIT=true
+VITE_USE_CSS_SPLIT=true
+
+# 是否使用在线图标
+VITE_USE_ONLINE_ICON=true

package.json

@@ -28,6 +28,7 @@
   },
   "dependencies": {
     "@iconify/iconify": "^3.1.1",
+    "@iconify/vue": "^4.1.1",
     "@vueuse/core": "^10.7.0",
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-vue": "^5.1.10",

src/components/Icon/src/Icon.vue

@@ -3,6 +3,7 @@ import { computed, unref } from 'vue'
 import { ElIcon } from 'element-plus'
 import { propTypes } from '@/utils/propTypes'
 import { useDesign } from '@/hooks/web/useDesign'
+import { Icon } from '@iconify/vue'
 
 const { getPrefixCls } = useDesign()
 
@@ -24,6 +25,11 @@ const symbolId = computed(() => {
   return unref(isLocal) ? `#icon-${props.icon.split('svg-icon:')[1]}` : props.icon
 })
 
+// 是否使用在线图标
+const isUseOnline = computed(() => {
+  return import.meta.env.VITE_USE_ONLINE_ICON === 'true'
+})
+
 const getIconifyStyle = computed(() => {
   const { color, size } = props
   return {
@@ -39,15 +45,18 @@ const getIconifyStyle = computed(() => {
       <use :xlink:href="symbolId" />
     </svg>
 
-    <!-- <Icon v-else :icon="icon" :style="getIconifyStyle" /> -->
-    <div :class="`${icon} iconify`" :style="getIconifyStyle"></div>
+    <template v-else>
+      <Icon v-if="isUseOnline" :icon="icon" :style="getIconifyStyle" />
+      <div v-else :class="`${icon} iconify`" :style="getIconifyStyle"></div>
+    </template>
   </ElIcon>
 </template>
 
 <style lang="less" scoped>
 @prefix-cls: ~'@{namespace}-icon';
 
-.@{prefix-cls} {
+.@{prefix-cls},
+.iconify {
   :deep(svg) {
     &:hover {
       // stylelint-disable-next-line

types/env.d.ts

@@ -8,6 +8,7 @@ declare module '*.vue' {
 }
 
 interface ImportMetaEnv {
+  readonly VITE_NODE_ENV: string
   readonly VITE_APP_TITLE: string
   readonly VITE_API_BASE_PATH: string
   readonly VITE_BASE_PATH: string
@@ -15,6 +16,11 @@ interface ImportMetaEnv {
   readonly VITE_DROP_CONSOLE: string
   readonly VITE_SOURCEMAP: string
   readonly VITE_OUT_DIR: string
+  readonly VITE_USE_BUNDLE_ANALYZER: string
+  readonly VITE_USE_ALL_ELEMENT_PLUS_STYLE: string
+  readonly VITE_USE_MOCK: string
+  readonly VITE_USE_CSS_SPLIT: string
+  readonly VITE_USE_ONLINE_ICON: string
 }
 
 declare global {

uno.config.ts

@@ -1,6 +1,19 @@
 import { defineConfig, toEscapedSelector as e, presetUno, presetIcons } from 'unocss'
 import transformerVariantGroup from '@unocss/transformer-variant-group'
 
+const createPresetIcons = () => {
+  // @ts-ignore
+  if (import.meta.env.VITE_USE_ONLINE_ICON === 'true') {
+    return [
+      presetIcons({
+        prefix: ''
+      })
+    ]
+  } else {
+    return []
+  }
+}
+
 export default defineConfig({
   // ...UnoCSS options
   rules: [
@@ -111,12 +124,7 @@ ${selector}:after {
       }
     ]
   ],
-  presets: [
-    presetUno({ dark: 'class', attributify: false }),
-    presetIcons({
-      prefix: ''
-    })
-  ],
+  presets: [presetUno({ dark: 'class', attributify: false }), ...createPresetIcons()],
   transformers: [transformerVariantGroup()],
   content: {
     pipeline: {