feat: 配合unplugin-icons集成iconify图标解决方案

2022-04-08 17:21:48 +08:00 · 2022-04-08 17:21:48 +08:00 · ec55f33655
commit ec55f33655
parent 7b90d7f8de
8 changed files with 122 additions and 22 deletions
--- a/build/vite/plugin/index.js
+++ b/build/vite/plugin/index.js
@ -5,6 +5,8 @@ import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'

 import VueSetupExtend from 'vite-plugin-vue-setup-extend'

+import Icons from 'unplugin-icons/vite'
+
 import { unocss } from './unocss'
 import { configHtmlPlugin } from './html'
 import { configMockPlugin } from './mock'
@ -12,10 +14,11 @@ import { configMockPlugin } from './mock'
 export function createVitePlugins(viteEnv, isBuild) {
  const plugins = [
    vue(),
+    VueSetupExtend(),
    Components({
      resolvers: [NaiveUiResolver()],
    }),
-    VueSetupExtend(),
+    Icons({ compiler: 'vue3', autoInstall: true }),
    unocss(),
    configHtmlPlugin(viteEnv, isBuild),
  ]
--- a/package.json
+++ b/package.json
@ -11,7 +11,6 @@
    "preview": "vite preview"
  },
  "dependencies": {
-    "@vicons/fa": "^0.11.0",
    "axios": "^0.21.4",
    "dayjs": "^1.11.0",
    "lodash-es": "^4.17.21",
@ -22,6 +21,8 @@
    "vue-router": "^4.0.14"
  },
  "devDependencies": {
+    "@iconify-json/mdi": "^1.1.9",
+    "@iconify-json/simple-icons": "^1.1.7",
    "@unocss/preset-attributify": "^0.16.4",
    "@unocss/preset-icons": "^0.16.4",
    "@unocss/preset-uno": "^0.16.4",
@ -39,6 +40,7 @@
    "prettier": "^2.6.1",
    "sass": "^1.49.10",
    "unocss": "^0.16.4",
+    "unplugin-icons": "^0.14.1",
    "unplugin-vue-components": "^0.17.21",
    "vite": "^2.9.1",
    "vite-plugin-html": "^2.1.2",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -1,10 +1,11 @@
 lockfileVersion: 5.3

 specifiers:
+  '@iconify-json/mdi': ^1.1.9
+  '@iconify-json/simple-icons': ^1.1.7
  '@unocss/preset-attributify': ^0.16.4
  '@unocss/preset-icons': ^0.16.4
  '@unocss/preset-uno': ^0.16.4
-  '@vicons/fa': ^0.11.0
  '@vitejs/plugin-vue': ^1.10.2
  '@vue/compiler-sfc': ^3.2.31
  axios: ^0.21.4
@ -25,6 +26,7 @@ specifiers:
  prettier: ^2.6.1
  sass: ^1.49.10
  unocss: ^0.16.4
+  unplugin-icons: ^0.14.1
  unplugin-vue-components: ^0.17.21
  vite: ^2.9.1
  vite-plugin-html: ^2.1.2
@ -34,7 +36,6 @@ specifiers:
  vue-router: ^4.0.14

 dependencies:
-  '@vicons/fa': 0.11.0
  axios: 0.21.4
  dayjs: 1.11.0
  lodash-es: 4.17.21
@ -45,6 +46,8 @@ dependencies:
  vue-router: 4.0.14_vue@3.2.31

 devDependencies:
+  '@iconify-json/mdi': 1.1.9
+  '@iconify-json/simple-icons': 1.1.7
  '@unocss/preset-attributify': 0.16.4
  '@unocss/preset-icons': 0.16.4
  '@unocss/preset-uno': 0.16.4
@ -62,6 +65,7 @@ devDependencies:
  prettier: 2.6.1
  sass: 1.49.10
  unocss: 0.16.4
+  unplugin-icons: 0.14.1_8d0fc691400edae0d0bd7a997b66fb5e
  unplugin-vue-components: 0.17.21_vite@2.9.1+vue@3.2.31
  vite: 2.9.1_sass@1.49.10
  vite-plugin-html: 2.1.2_vite@2.9.1
@ -150,6 +154,18 @@ packages:
    resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
    dev: true

+  /@iconify-json/mdi/1.1.9:
+    resolution: {integrity: sha512-iZY3d7nLmEhSxLU5YBHIxVVPySqNjj6zYcf448TXGBPp2PyToITCOuLEaub0rQ9jBAPOlupQsuPX9ylBfgIJ1w==}
+    dependencies:
+      '@iconify/types': 1.1.0
+    dev: true
+
+  /@iconify-json/simple-icons/1.1.7:
+    resolution: {integrity: sha512-VsDh1AlVTJ2GYBBRD8oUmhFrMj00pzmz8oGRrTAdu5sWYOyrJ9f0sFnr+89ABjAnzXqS8z2lmA0SxFG3HGQzvQ==}
+    dependencies:
+      '@iconify/types': 1.1.0
+    dev: true
+
  /@iconify/types/1.1.0:
    resolution: {integrity: sha512-Jh0llaK2LRXQoYsorIH8maClebsnzTcve+7U3rQUSnC11X4jtPnFuyatqFLvMxZ8MLG8dB4zfHsbPfuvxluONw==}
    dev: true
@ -354,10 +370,6 @@ packages:
      '@unocss/scope': 0.16.4
    dev: true

-  /@vicons/fa/0.11.0:
-    resolution: {integrity: sha512-Mlv4sxlghqAPu+RM+6w0/GIcsQFK/fx1syw1HkABS6MJRLwHOqbmImCYZQam7OMAYhZBs82YpY5cp2NFSgwkOA==}
-    dev: false
-
  /@vitejs/plugin-vue/1.10.2_vite@2.9.1:
    resolution: {integrity: sha512-/QJ0Z9qfhAFtKRY+r57ziY4BSbGUTGsPRMpB/Ron3QPwBZM4OZAZHdTa4a8PafCwU5DTatXG8TMDoP8z+oDqJw==}
    engines: {node: '>=12.0.0'}
@ -2134,6 +2146,39 @@ packages:
    engines: {node: '>= 0.8'}
    dev: true

+  /unplugin-icons/0.14.1_8d0fc691400edae0d0bd7a997b66fb5e:
+    resolution: {integrity: sha512-drZFbMctvT3ZJPfdCgBv5+LKO8hGbZApRCoBRAUhQFRJQVNGUhGThrOKs+CvWq3XDBPptGNBmst8WyObbr4xiQ==}
+    peerDependencies:
+      '@svgr/core': '>=5.5.0'
+      '@vue/compiler-sfc': ^3.0.2
+      vue-template-compiler: ^2.6.12
+      vue-template-es2015-compiler: ^1.9.0
+    peerDependenciesMeta:
+      '@svgr/core':
+        optional: true
+      '@vue/compiler-sfc':
+        optional: true
+      vue-template-compiler:
+        optional: true
+      vue-template-es2015-compiler:
+        optional: true
+    dependencies:
+      '@antfu/install-pkg': 0.1.0
+      '@antfu/utils': 0.5.0
+      '@iconify/utils': 1.0.32
+      '@vue/compiler-sfc': 3.2.31
+      debug: 4.3.4
+      kolorist: 1.5.1
+      local-pkg: 0.4.1
+      unplugin: 0.5.2_vite@2.9.1
+    transitivePeerDependencies:
+      - esbuild
+      - rollup
+      - supports-color
+      - vite
+      - webpack
+    dev: true
+
  /unplugin-vue-components/0.17.21_vite@2.9.1+vue@3.2.31:
    resolution: {integrity: sha512-jkXksUF6zkNbzHQbw1DdrsQyVoMZGESRZDIGd9x7nUP+65nHdpBCY/JmlxSjKbuTrOwfMsk6FQFa0RpRueOCKg==}
    engines: {node: '>=14'}
@ -2187,6 +2232,29 @@ packages:
      webpack-virtual-modules: 0.4.3
    dev: true

+  /unplugin/0.5.2_vite@2.9.1:
+    resolution: {integrity: sha512-3SPYtus/56cxyD4jfjrnqCvb6jPxvdqJNaRXnEaG2BhNEMaoygu/39AG+LwKmiIUzj4XHyitcfZ7scGlWfEigA==}
+    peerDependencies:
+      esbuild: '>=0.13'
+      rollup: ^2.50.0
+      vite: ^2.3.0
+      webpack: 4 || 5
+    peerDependenciesMeta:
+      esbuild:
+        optional: true
+      rollup:
+        optional: true
+      vite:
+        optional: true
+      webpack:
+        optional: true
+    dependencies:
+      chokidar: 3.5.3
+      vite: 2.9.1_sass@1.49.10
+      webpack-sources: 3.2.3
+      webpack-virtual-modules: 0.4.3
+    dev: true
+
  /uri-js/4.4.1:
    resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
    dependencies:
@ -2363,6 +2431,11 @@ packages:
      vue: 3.2.31
    dev: true

+  /webpack-sources/3.2.3:
+    resolution: {integrity: sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==}
+    engines: {node: '>=10.13.0'}
+    dev: true
+
  /webpack-virtual-modules/0.4.3:
    resolution: {integrity: sha512-5NUqC2JquIL2pBAAo/VfBP6KuGkHIZQXW/lNKupLPfhViwh8wNsu0BObtl09yuKZszeEUfbXz8xhrHvSG16Nqw==}
    dev: true
--- a/src/components/AppIcons/IconLogo.vue
+++ b/src/components/AppIcons/IconLogo.vue
@ -0,0 +1,9 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 448 512">
+    <path
+      d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-92.2 312.9c-63.4 0-85.4-28.6-97.1-64.1c-16.3-51-21.5-84.3-63-84.3c-22.4 0-45.1 16.1-45.1 61.2c0 35.2 18 57.2 43.3 57.2c28.6 0 47.6-21.3 47.6-21.3l11.7 31.9s-19.8 19.4-61.2 19.4c-51.3 0-79.9-30.1-79.9-85.8c0-57.9 28.6-92 82.5-92c73.5 0 80.8 41.4 100.8 101.9c8.8 26.8 24.2 46.2 61.2 46.2c24.9 0 38.1-5.5 38.1-19.1c0-19.9-21.8-22-49.9-28.6c-30.4-7.3-42.5-23.1-42.5-48c0-40 32.3-52.4 65.2-52.4c37.4 0 60.1 13.6 63 46.6l-36.7 4.4c-1.5-15.8-11-22.4-28.6-22.4c-16.1 0-26 7.3-26 19.8c0 11 4.8 17.6 20.9 21.3c32.7 7.1 71.8 12 71.8 57.5c.1 36.7-30.7 50.6-76.1 50.6z"
+    ></path>
+  </svg>
+</template>
+
+<script setup name="IconLogo"></script>
--- a/src/components/AppIcons/index.js
+++ b/src/components/AppIcons/index.js
@ -0,0 +1,12 @@
+export { default as IconGitee } from '~icons/simple-icons/gitee'
+
+export { default as IconChart } from '~icons/mdi/chart-bar'
+export { default as IconGithub } from '~icons/mdi/github'
+export { default as IconVue } from '~icons/mdi/vuejs'
+export { default as IconHome } from '~icons/mdi/home'
+export { default as IconLink } from '~icons/mdi/link-variant'
+export { default as IconAlert } from '~icons/mdi/alert-circle-outline'
+export { default as IconCircle } from '~icons/mdi/circle-outline'
+export { default as IconMenu } from '~icons/mdi/menu'
+
+export { default as IconLogo } from './IconLogo.vue'
--- a/src/layout/components/sidebar/SideLogo.vue
+++ b/src/layout/components/sidebar/SideLogo.vue
@ -1,7 +1,7 @@
 <template>
  <div class="logo">
    <n-icon size="36" color="#316c72">
-      <LastfmSquare />
+      <IconLogo />
    </n-icon>
    <router-link to="/">
      <n-gradient-text type="primary">{{ title }}</n-gradient-text>
@ -10,7 +10,7 @@
 </template>

 <script setup>
-import { LastfmSquare } from '@vicons/fa'
+import { IconLogo } from '@/components/AppIcons'
 const title = import.meta.env.VITE_APP_TITLE
 </script>

--- a/src/layout/components/sidebar/SideMenu.vue
+++ b/src/layout/components/sidebar/SideMenu.vue
@ -16,7 +16,7 @@ import { computed, h } from 'vue'
 import { usePermissionStore } from '@/store/modules/permission'

 import { NIcon } from 'naive-ui'
-import { ListAlt, CircleRegular } from '@vicons/fa'
+import { IconCircle, IconMenu } from '@/components/AppIcons'

 import { isExternal } from '@/utils/is'

@ -68,10 +68,10 @@ function generateOptions(routes, basePath) {
        path: resolvePath(basePath, route.path),
      }
      if (route.children && route.children.length) {
-        curOption.icon = renderIcon(route.meta?.icon || ListAlt, { size: 16 })
+        curOption.icon = renderIcon(route.meta?.icon || IconMenu, { size: 16 })
        curOption.children = generateOptions(route.children, resolvePath(basePath, route.path))
      } else {
-        curOption.icon = (route.meta?.icon && renderIcon(route.meta?.icon)) || renderIcon(CircleRegular, { size: 8 })
+        curOption.icon = (route.meta?.icon && renderIcon(route.meta?.icon)) || renderIcon(IconCircle, { size: 8 })
      }
      options.push(curOption)
    }
--- a/src/router/routes/index.js
+++ b/src/router/routes/index.js
@ -1,6 +1,7 @@
 import Layout from '@/layout/index.vue'
 import Home from '@/views/dashboard/index.vue'
-import { ChartBar, Dove, Github, HouseDamage, LastfmSquare, Link, TimesCircle } from '@vicons/fa'
+
+import { IconAlert, IconChart, IconGitee, IconGithub, IconHome, IconLink, IconVue } from '@/components/AppIcons'

 export const basicRoutes = [
  {
@ -39,7 +40,7 @@ export const basicRoutes = [
    redirect: '/home',
    meta: {
      title: 'Dashboard',
-      icon: ChartBar,
+      icon: IconChart,
    },
    children: [
      {
@ -48,7 +49,7 @@ export const basicRoutes = [
        component: Home,
        meta: {
          title: '首页',
-          icon: HouseDamage,
+          icon: IconHome,
        },
      },
    ],
@ -106,7 +107,7 @@ export const basicRoutes = [
    redirect: '/error-page/404',
    meta: {
      title: '错误页',
-      icon: TimesCircle,
+      icon: IconAlert,
    },
    children: [
      {
@ -126,7 +127,7 @@ export const basicRoutes = [
    component: Layout,
    meta: {
      title: '外部链接',
-      icon: Link,
+      icon: IconLink,
    },
    children: [
      {
@ -134,7 +135,7 @@ export const basicRoutes = [
        path: 'https://github.com/zclzone/vue-naive-admin',
        meta: {
          title: '源码 - github',
-          icon: Github,
+          icon: IconGithub,
        },
      },
      {
@ -142,7 +143,7 @@ export const basicRoutes = [
        path: 'https://gitee.com/zclzone/vue-naive-admin',
        meta: {
          title: '源码 - gitee',
-          icon: LastfmSquare,
+          icon: IconGitee,
        },
      },
      {
@ -150,7 +151,7 @@ export const basicRoutes = [
        path: 'https://zclzone.github.io/vue-naive-admin-docs',
        meta: {
          title: '文档 - vuepress',
-          icon: LastfmSquare,
+          icon: IconVue,
        },
      },
    ],