chore(icon): 添加icon功能

.eslintrc.js

@@ -34,5 +34,6 @@ module.exports = {
     'no-console': 'warn', // 禁止出现console
     'no-debugger': 'off', // 关闭debugger警告
     'vue/multi-word-component-names': 0, // 关闭文件名多单词
+    // 'import/no-unresolved': ['error', { ignore: ['~icons/*'] }],
   },
 };

build/plugins/unplugin.ts

@@ -1,9 +1,14 @@
 import Components from 'unplugin-vue-components/vite';
 import { NaiveUiResolver } from 'unplugin-vue-components/resolvers';
+import Icons from 'unplugin-icons/vite';
+import IconsResolver from 'unplugin-icons/resolver';
 
 export default [
   Components({
     dts: 'src/types/components.d.ts',
-    resolvers: [NaiveUiResolver()],
+    resolvers: [IconsResolver(), NaiveUiResolver()],
+  }),
+  Icons({
+    /* options */
   }),
 ];

package.json

@@ -32,6 +32,10 @@
   "devDependencies": {
     "@commitlint/cli": "^17.0.3",
     "@commitlint/config-conventional": "^17.0.3",
+    "@iconify-json/icon-park": "^1.1.5",
+    "@iconify/vue": "^3.2.1",
+    "@types/mockjs": "^1.0.6",
+    "@types/node": "^18.6.5",
     "@typescript-eslint/eslint-plugin": "^5.32.0",
     "@typescript-eslint/parser": "^5.32.0",
     "@vitejs/plugin-vue": "^3.0.0",
@@ -56,6 +60,7 @@
     "rollup-plugin-visualizer": "^5.7.1",
     "typescript": "^4.6.4",
     "unocss": "^0.45.5",
+    "unplugin-icons": "^0.14.8",
     "unplugin-vue-components": "^0.22.0",
     "vite": "^3.0.0",
     "vite-plugin-compression": "^0.5.1",

src/types/package.d.ts

@@ -0,0 +1,6 @@
+declare module '~icons/*' {
+  import type { FunctionalComponent, SVGAttributes } from 'vue';
+
+  const component: FunctionalComponent<SVGAttributes>;
+  export default component;
+}

src/views/login/index.vue

@@ -5,7 +5,13 @@
     </n-carousel>
     <div flex-1 flex-center>
       <div b-rd-2 bg-white w-md h-xl shadow-lg p-5xl>
-        <n-h1>Ench Admin</n-h1>
+        <n-h1>
+          <!-- <Icon icon="icon-park:ad-product" :inline="true" /> -->
+          <!-- <icon-icon-park-ad-product /> -->
+          <!-- <span class="iconify" data-icon="icon-park:ad-product" data-inline="false" style="color: #888888"></span> -->
+          <n-icon size="40" :depth="2" :component="IconParkAdProduct" />
+          Ench Admin
+        </n-h1>
         <n-p depth="3">高效、简约、有点好玩</n-p>
         <n-form ref="formRef" :rules="rules" :model="formValue" :show-label="false" size="large">
           <n-form-item path="account">
@@ -36,6 +42,8 @@
 import { FormInst } from 'naive-ui';
 import { useRouter } from 'vue-router';
 import { ref } from 'vue';
+// import { Icon } from '@iconify/vue';
+import IconParkAdProduct from '~icons/icon-park/ad-product';
 const router = useRouter();
 const swiperList = ref([
   'https://images.unsplash.com/photo-1659991689791-db84493f8544?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=686&q=80',