diff --git a/build/vite/plugin/index.js b/build/vite/plugin/index.js index 3116a12..e10b030 100644 --- 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), ] diff --git a/package.json b/package.json index 1d34778..3b59acb 100644 --- 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,10 +40,11 @@ "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", "vite-plugin-mock": "^2.9.6", "vite-plugin-vue-setup-extend": "^0.3.0" } -} \ No newline at end of file +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 28189ba..f4112fc 100644 --- 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 diff --git a/src/components/AppIcons/IconLogo.vue b/src/components/AppIcons/IconLogo.vue new file mode 100644 index 0000000..b53b067 --- /dev/null +++ b/src/components/AppIcons/IconLogo.vue @@ -0,0 +1,9 @@ + + + diff --git a/src/components/AppIcons/index.js b/src/components/AppIcons/index.js new file mode 100644 index 0000000..ea46f76 --- /dev/null +++ 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' diff --git a/src/layout/components/sidebar/SideLogo.vue b/src/layout/components/sidebar/SideLogo.vue index 64f071c..6ebd25f 100644 --- a/src/layout/components/sidebar/SideLogo.vue +++ b/src/layout/components/sidebar/SideLogo.vue @@ -1,7 +1,7 @@ diff --git a/src/layout/components/sidebar/SideMenu.vue b/src/layout/components/sidebar/SideMenu.vue index 14bc745..d5a8386 100644 --- 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) } diff --git a/src/router/routes/index.js b/src/router/routes/index.js index be18edd..083e150 100644 --- 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, }, }, ],