Browse Source

style: 本地化图标

kailong321200875 1 year ago
parent
commit
608bf50e1c
4 changed files with 25 additions and 12 deletions
  1. 0 1
      package.json
  2. 11 7
      src/components/Icon/src/Icon.vue
  3. 13 3
      uno.config.ts
  4. 1 1
      vite.config.ts

+ 0 - 1
package.json

@@ -28,7 +28,6 @@
   },
   "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",

+ 11 - 7
src/components/Icon/src/Icon.vue

@@ -3,7 +3,6 @@ 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()
 
@@ -40,20 +39,25 @@ const getIconifyStyle = computed(() => {
       <use :xlink:href="symbolId" />
     </svg>
 
-    <Icon v-else :icon="icon" :style="getIconifyStyle" />
+    <!-- <Icon v-else :icon="icon" :style="getIconifyStyle" /> -->
+    <div :class="`${icon} iconify`" :style="getIconifyStyle"></div>
   </ElIcon>
 </template>
 
 <style lang="less" scoped>
 @prefix-cls: ~'@{namespace}-icon';
 
-.@{prefix-cls},
+.@{prefix-cls} {
+  :deep(svg) {
+    &:hover {
+      color: v-bind(hovercolor) !important;
+    }
+  }
+}
+
 .iconify {
   &:hover {
-    :deep(svg) {
-      // stylelint-disable-next-line
-      color: v-bind(hoverColor) !important;
-    }
+    color: v-bind(hovercolor) !important;
   }
 }
 </style>

+ 13 - 3
uno.config.ts

@@ -1,4 +1,4 @@
-import { defineConfig, toEscapedSelector as e, presetUno } from 'unocss'
+import { defineConfig, toEscapedSelector as e, presetUno, presetIcons } from 'unocss'
 import transformerVariantGroup from '@unocss/transformer-variant-group'
 
 export default defineConfig({
@@ -111,6 +111,16 @@ ${selector}:after {
       }
     ]
   ],
-  presets: [presetUno({ dark: 'class', attributify: false })],
-  transformers: [transformerVariantGroup()]
+  presets: [
+    presetUno({ dark: 'class', attributify: false }),
+    presetIcons({
+      prefix: ''
+    })
+  ],
+  transformers: [transformerVariantGroup()],
+  content: {
+    pipeline: {
+      include: [/\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html|ts)($|\?)/]
+    }
+  }
 })

+ 1 - 1
vite.config.ts

@@ -126,7 +126,7 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
         // 拆包
         output: {
           manualChunks: {
-            vue: ['vue', 'vue-router', 'pinia', 'vue-i18n'],
+            'vue-chunks': ['vue', 'vue-router', 'pinia', 'vue-i18n'],
             'element-plus': ['element-plus'],
             'wang-editor': ['@wangeditor/editor', '@wangeditor/editor-for-vue'],
             echarts: ['echarts', 'echarts-wordcloud']