feat: 图标组件

components.d.ts

@@ -12,6 +12,7 @@ declare module 'vue' {
     ElButton: typeof import('element-plus/es')['ElButton']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    SvgIcon: typeof import('./src/components/SvgIcon/index.vue')['default']
     Test: typeof import('./src/views/Dashboard/test.vue')['default']
   }
 }

package.json

@@ -13,6 +13,7 @@
     "prepare": "husky"
   },
   "dependencies": {
+    "@iconify/vue": "^5.0.0",
     "@unocss/transformer-directives": "66.1.0-beta.7",
     "element-plus": "^2.9.7",
     "normalize.css": "^8.0.1",
@@ -25,8 +26,11 @@
     "@commitlint/cli": "^19.8.0",
     "@commitlint/config-conventional": "^19.8.0",
     "@eslint/js": "^9.23.0",
+    "@iconify-json/ant-design": "^1.2.5",
     "@unocss/preset-attributify": "66.1.0-beta.7",
+    "@unocss/preset-icons": "^66.1.3",
     "@unocss/preset-uno": "66.1.0-beta.7",
+    "@unocss/preset-wind3": "^66.1.3",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vue/tsconfig": "^0.7.0",
     "eslint": "^9.23.0",

src/components/SvgIcon/index.vue

@@ -0,0 +1,42 @@
+<template>
+  <IconifyIcon
+    v-if="!isExt"
+    :icon="iconName"
+    :class="customClass"
+    v-bind="$attrs"
+  ></IconifyIcon>
+  <div
+    v-else
+    :style="styleExternalIcon"
+    :class="svgClass"
+    bg-current
+    v-bind="$attrs"
+  ></div>
+</template>
+<script lang="ts" setup>
+import { isExternal } from "@/utils/validate";
+import { Icon as IconifyIcon } from "@iconify/vue";
+const { iconName, customClass } = defineProps({
+  iconName: {
+    type: String,
+    default: ""
+  },
+  customClass: {
+    type: String,
+    default: ""
+  }
+});
+const isExt = computed(() => isExternal(iconName));
+// class = "customClass + icon"
+// 组合成的类名
+const svgClass = computed(() => (customClass ? `icon ${customClass}` : `icon`));
+
+// 通过mask 渲染svg 图标 兼容性不好，可以通过请求svg的方式来渲染
+const styleExternalIcon = computed(() => ({
+  mask: `url(${iconName}) no-repeat %50 %50`,
+  "-webkit-mask": `url(${iconName}) no-repeat %50 %50`,
+  "mask-size": "cover"
+}));
+</script>
+<!-- 在实现图标的时候 尽量采用svg， 不要采用font图标，font图标放大时会出现锯齿等问题 -->
+<!-- 采用svg的方式来渲染图标，兼容性好，但是需要自己去实现图标 -->

src/utils/validate.ts

@@ -0,0 +1,4 @@
+// 验证是否为外部链接
+export const isExternal = (path: string): boolean => {
+  return /https?/.test(path);
+};

src/views/Dashboard/index.vue

@@ -1,14 +1,25 @@
 <template>
+  <div i-ant-design:account-book-filled icon></div>
+  <div i-ant-design:aim-outlined icon></div>
+  <svg-icon
+    icon-name="material-symbols-light:18-up-rating-outline-rounded"
+  ></svg-icon>
+  <svg-icon
+    icon-name="https://zishui.oss-cn-beijing.aliyuncs.com/BugFilled.svg"
+    :custom-class="val"
+    @click="handle"
+  ></svg-icon>
   <el-button>DashBoard</el-button>
   <el-button @click="handle"></el-button>
 </template>
 <script lang="ts" setup>
-const a = ref(1);
 const { proxy } = getCurrentInstance()!;
 
 const handle = () => {
-  proxy?.$message({
-    message: "Hello World!" + a.value
-  });
+  proxy?.$message("this  is a message");
 };
+const val = ref("text-blue");
+setTimeout(() => {
+  val.value = "text-red";
+}, 5000);
 </script>

uno.config.ts

@@ -1,9 +1,12 @@
-import { defineConfig } from "unocss";
+import { defineConfig, presetWind3, presetIcons } from "unocss";
 import presetAttributify from "@unocss/preset-attributify";
-import presetUno from "@unocss/preset-uno";
+//import presetWind3 from "@unocss/preset-wind3";
 import transformerDirectives from "@unocss/transformer-directives";
+// unocss 图标预设会查找依赖的图标库 ant-design
+// import presetIcons from "@unocss/preset-icons";
 
 export default defineConfig({
-  presets: [presetAttributify(), presetUno()],
-  transformers: [transformerDirectives()] // apply
+  presets: [presetAttributify(), presetWind3(), presetIcons()],
+  transformers: [transformerDirectives()], // apply
+  shortcuts: [["icon", "inline-block w-1em h-1em align-middle text-current"]] // 自定义图标样式
 });

vite.config.ts

@@ -26,7 +26,7 @@ export default defineConfig({
       // api
       imports: ["vue", "vue-router", "pinia"],
       resolvers: [ElementPlusResolver()],
-      eslintrc: { enabled: true }
+      eslintrc: { enabled: false }
       // 生成相应的 .eslintrc-auto-import.json 文件。
       // 这样就可以在eslint中启用自动导入
     }),
@@ -36,7 +36,7 @@ export default defineConfig({
       // 所有自定义组件可以自动加载，无需 import
       dirs: [
         "src/components",
-        "src/layouts/components",
+        "src/layout/components",
         "src/views/**/components",
         "src/views/"
       ]