feat: 动态引入icon
This commit is contained in:
wang_fan_w
parent
913d213737
commit
c238078f07
1
src/icons/about.svg
Normal file
1
src/icons/about.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1713020573889" class="icon" viewBox="0 0 1026 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15777" xmlns:xlink="http://www.w3.org/1999/xlink" width="200.390625" height="200"><path d="M505.448517 0.043084a511.978458 511.978458 0 1 0 518.441019 502.643647A511.978458 511.978458 0 0 0 505.448517 0.043084z m56.726926 170.180778a58.881113 58.881113 0 0 1 67.497861 67.497861 86.167482 86.167482 0 0 1-89.039732 80.422983c-49.546302 0-71.806235-25.132182-71.806235-67.497861A87.603607 87.603607 0 0 1 562.893505 170.223862z m-134.995722 660.617365c-35.903118 0-61.753362-21.541871-36.62118-116.326101L433.642282 546.488535c6.462561-27.286369 7.898686-38.057305 0-38.057305a270.709507 270.709507 0 0 0-84.013296 37.339242l-17.233496-28.722494a473.203091 473.203091 0 0 1 229.779953-114.889976c35.903118 0 40.929554 41.647617 23.696058 106.99129l-46.674053 176.643339c-7.898686 30.876681-5.026436 41.647617 0 41.647617a183.823963 183.823963 0 0 0 79.704921-40.211492l20.105746 27.28637A371.238237 371.238237 0 0 1 433.642282 830.841227z" fill="#00b42a" p-id="15778"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
1
src/icons/classify.svg
Normal file
1
src/icons/classify.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1713020953397" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7918" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M0 0m349.206261 0l325.587478 0q349.206261 0 349.206261 349.206261l0 325.587478q0 349.206261-349.206261 349.206261l-325.587478 0q-349.206261 0-349.206261-349.206261l0-325.587478q0-349.206261 349.206261-349.206261Z" fill="#3271FD" p-id="7919"></path><path d="M442.189913 298.284522c9.728 0 18.053565 3.372522 24.976696 10.128695 6.912 6.745043 10.373565 14.981565 10.373565 24.731826v140.566261c0 9.750261-3.450435 18.086957-10.373565 25.021218a34.003478 34.003478 0 0 1-24.976696 10.395826H301.924174a33.090783 33.090783 0 0 1-24.698435-10.395826A34.626783 34.626783 0 0 1 267.130435 473.711304V333.145043c0-9.750261 3.361391-17.986783 10.095304-24.742956 6.733913-6.745043 14.970435-10.117565 24.698435-10.117565h140.265739zM442.189913 579.417043c9.728 0 18.053565 3.372522 24.976696 10.128696 6.912 6.733913 10.373565 14.981565 10.373565 24.731826v141.133913c0 9.73913-3.450435 17.986783-10.373565 24.731826-6.92313 6.745043-15.248696 10.128696-24.976696 10.128696H301.924174c-9.728 0-17.964522-3.383652-24.698435-10.128696C270.491826 773.398261 267.130435 765.150609 267.130435 755.400348V614.266435c0-9.73913 3.361391-17.986783 10.095304-24.731826 6.733913-6.745043 14.970435-10.128696 24.698435-10.128696h140.265739zM723.311304 579.417043c9.71687 0 17.953391 3.372522 24.687305 10.128696 6.733913 6.733913 10.095304 14.981565 10.095304 24.731826v141.133913c0 9.73913-3.361391 17.986783-10.095304 24.731826-6.733913 6.745043-14.970435 10.128696-24.687305 10.128696H583.034435a34.482087 34.482087 0 0 1-24.976696-10.128696 33.224348 33.224348 0 0 1-10.373565-24.742956V614.266435c0-9.73913 3.450435-17.986783 10.373565-24.731826a34.482087 34.482087 0 0 1 24.976696-10.128696h140.276869z" fill="#FFFFFF" p-id="7920"></path><path d="M667.826087 243.287534m23.611218 23.611218l110.185682 110.185682q23.611218 23.611218 0 47.222436l-110.185682 110.185683q-23.611218 23.611218-47.222436 0l-110.185683-110.185683q-23.611218-23.611218 0-47.222436l110.185683-110.185682q23.611218-23.611218 47.222436 0Z" fill="#FFFFFF" fill-opacity=".7" p-id="7921"></path></svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
1
src/icons/github.svg
Normal file
1
src/icons/github.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1713020459632" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11989" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512.416 15.072C229.056 15.072 0 242.848 0 524.608 0 749.856 146.784 940.512 350.368 1008c25.44 5.056 34.784-10.976 34.784-24.48 0-11.808-0.864-52.288-0.864-94.496-142.528 30.368-172.224-60.736-172.224-60.736-22.912-59.04-56.832-74.24-56.832-74.24-46.656-31.2 3.392-31.2 3.392-31.2 51.744 3.36 78.912 52.288 78.912 52.288 45.824 77.6 119.616 55.68 149.312 42.176 4.256-32.896 17.824-55.68 32.224-68.32-113.696-11.808-233.312-55.68-233.312-251.392 0-55.68 20.352-101.248 52.608-136.672-5.088-12.64-22.912-64.96 5.088-134.976 0 0 43.264-13.504 140.832 52.32 40.736-10.976 84.832-16.864 128.096-16.864s87.392 5.92 128.096 16.864c97.568-65.792 140.832-52.32 140.832-52.32 28 70.016 10.176 122.336 5.088 134.976 33.088 35.424 52.608 80.992 52.608 136.672 0 195.712-119.616 238.752-234.144 251.392 18.656 16.032 34.784 46.4 34.784 94.496 0 68.32-0.832 123.168-0.832 140.032 0 13.504 9.344 29.536 34.784 24.48 203.616-67.488 350.368-258.144 350.368-483.392C1024.8 242.848 794.912 15.072 512.384 15.072z" fill="#00b42a" p-id="11990"></path><path d="M192.64 746.656c-0.768 2.624-4.576 3.488-7.648 1.76s-5.344-5.248-3.808-7.84c0.768-2.624 4.576-3.488 7.648-1.76s4.576 5.248 3.808 7.84z m18.304 23.552c-2.304 2.624-6.88 0.864-9.152-2.624-3.04-3.488-3.808-8.736-1.536-11.36s6.112-0.864 9.152 2.624c3.04 4.352 3.808 9.6 1.536 11.36z m18.336 30.56c-3.04 2.624-7.648 0-9.92-4.352-3.04-4.352-3.04-10.464 0-12.224 3.04-2.624 7.648 0 9.92 4.352 3.04 4.352 3.04 9.6 0 12.224z m25.184 29.664c-2.304 3.488-7.648 2.624-12.224-1.76-3.808-4.352-5.344-10.464-2.304-13.088 2.304-3.488 7.648-2.624 12.224 1.76 3.808 3.488 4.576 9.6 2.304 13.088z m34.336 16.576c-0.768 4.352-6.112 6.112-11.456 4.352s-8.384-6.976-7.648-10.464c0.768-4.352 6.112-6.112 11.456-4.352s8.384 6.112 7.648 10.464z m37.408 3.488c0 4.352-4.576 7.84-9.92 7.84s-9.92-3.488-9.92-7.84 4.576-7.84 9.92-7.84 9.92 3.488 9.92 7.84z m35.104-6.976c0.768 4.352-3.04 8.736-8.384 9.6s-9.92-1.76-10.688-6.112c-0.768-4.352 3.04-8.736 8.384-9.6s9.92 1.76 10.688 6.112z" fill="#00b42a" p-id="11991"></path></svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
21
src/layout/components/Menu/icon-common.vue
Normal file
21
src/layout/components/Menu/icon-common.vue
Normal file
@ -0,0 +1,21 @@
|
||||
<template>
|
||||
<div>
|
||||
<SvgIcon v-if="props.svgIcon" :name="props.svgIcon" :size="25" />
|
||||
<component v-else-if="props.icon" :is="props.icon"></component>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const props = defineProps({
|
||||
svgIcon: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: ""
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@ -7,8 +7,8 @@
|
||||
<script setup lang="ts">
|
||||
import MenuItem from "@/layout/components/Menu/menu-item.vue";
|
||||
import { storeToRefs } from "pinia";
|
||||
import { useRoutesListStore } from "@/store/route-list";
|
||||
import { useThemeConfig } from "@/store/theme-config";
|
||||
import { useRoutesListStore } from "@/store/route-list";
|
||||
|
||||
const routerStore = useRoutesListStore();
|
||||
const { routeTree } = storeToRefs(routerStore);
|
||||
@ -18,4 +18,14 @@ const { collapsed } = storeToRefs(themeStore);
|
||||
console.log("路由树", routeTree.value);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
<style lang="scss">
|
||||
:deep(.arco-menu-pop .arco-menu-pop-header .arco-menu-has-icon) {
|
||||
padding: 0 !important;
|
||||
}
|
||||
:deep(.arco-menu-vertical .arco-menu-pop-header) {
|
||||
padding: 0 !important;
|
||||
}
|
||||
:deep(.arco-menu-vertical .arco-menu-item) {
|
||||
padding: 0 !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,20 +1,24 @@
|
||||
<template>
|
||||
<template v-for="item in props.routeTree" :key="item.name">
|
||||
<a-sub-menu v-if="item.children && item.children.length > 0" :key="item.name">
|
||||
<template #icon><SvgIcon :name="item.meta.icon" :size="25" /></template>
|
||||
<template #icon v-if="item.meta.svgIcon || item.meta.icon">
|
||||
<IconCommon :svg-icon="item.meta.svgIcon" :icon="item.meta.icon" />
|
||||
</template>
|
||||
<template #title>{{ item.meta.title }}</template>
|
||||
<MenuItem :route-tree="item.children" />
|
||||
</a-sub-menu>
|
||||
<a-menu-item v-else :key="item.name">
|
||||
<template #icon><SvgIcon :name="item.meta.icon" :size="25" /></template>
|
||||
<template #icon v-if="item.meta.svgIcon || item.meta.icon">
|
||||
<IconCommon :svg-icon="item.meta.svgIcon" :icon="item.meta.icon" />
|
||||
</template>
|
||||
<div>{{ item.meta.title }}</div>
|
||||
</a-menu-item>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import IconCommon from "@/layout/components/Menu/icon-common.vue";
|
||||
defineOptions({ name: "MenuItem" });
|
||||
// 通过defineProps接收父组件的值
|
||||
const props = defineProps({
|
||||
routeTree: {
|
||||
type: Array,
|
||||
|
||||
@ -7,6 +7,8 @@ import pinia from "@/store/index";
|
||||
import piniaPluginPersist from "pinia-plugin-persist";
|
||||
import "virtual:svg-icons-register";
|
||||
import "@arco-design/web-vue/dist/arco.css";
|
||||
// 额外引入图标库
|
||||
import ArcoVueIcon from "@arco-design/web-vue/es/icon";
|
||||
|
||||
pinia.use(piniaPluginPersist);
|
||||
const app = createApp(App);
|
||||
@ -14,6 +16,7 @@ app.use(ArcoVue, {
|
||||
// 用于改变使用组件时的前缀名称
|
||||
componentPrefix: "arco"
|
||||
});
|
||||
app.use(ArcoVueIcon);
|
||||
app.use(pinia);
|
||||
app.use(router);
|
||||
app.mount("#app");
|
||||
|
||||
@ -44,7 +44,7 @@ export const dynamicRoutes = [
|
||||
isLink: "", // 是否外链
|
||||
isIframe: false, // 是否内嵌窗口
|
||||
roles: ["admin", "common"], // 路由权限
|
||||
icon: "home" // 菜单图标
|
||||
svgIcon: "home" // 菜单图标
|
||||
}
|
||||
},
|
||||
{
|
||||
@ -59,7 +59,7 @@ export const dynamicRoutes = [
|
||||
isLink: "", // 是否外链
|
||||
isIframe: false, // 是否内嵌窗口
|
||||
roles: ["common"], // 路由权限
|
||||
icon: "home" // 菜单图标
|
||||
svgIcon: "home" // 菜单图标
|
||||
}
|
||||
},
|
||||
{
|
||||
@ -75,7 +75,7 @@ export const dynamicRoutes = [
|
||||
isAffix: true,
|
||||
isIframe: false,
|
||||
roles: ["admin"],
|
||||
icon: "set"
|
||||
svgIcon: "set"
|
||||
},
|
||||
children: [
|
||||
{
|
||||
@ -90,7 +90,7 @@ export const dynamicRoutes = [
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
roles: ["admin"],
|
||||
icon: "common"
|
||||
icon: "icon-menu"
|
||||
}
|
||||
}
|
||||
]
|
||||
@ -108,7 +108,7 @@ export const dynamicRoutes = [
|
||||
isAffix: true,
|
||||
isIframe: false,
|
||||
roles: ["admin"],
|
||||
icon: "switch"
|
||||
svgIcon: "switch"
|
||||
},
|
||||
children: [
|
||||
{
|
||||
@ -123,7 +123,7 @@ export const dynamicRoutes = [
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
roles: ["admin"],
|
||||
icon: "common"
|
||||
icon: "icon-menu"
|
||||
},
|
||||
children: [
|
||||
{
|
||||
@ -138,12 +138,27 @@ export const dynamicRoutes = [
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
roles: ["admin"],
|
||||
icon: "common"
|
||||
icon: "icon-menu"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: "/about-project",
|
||||
name: "about-project",
|
||||
component: () => import("@/views/about-project/about-project.vue"),
|
||||
meta: {
|
||||
title: "about-project",
|
||||
isHide: false,
|
||||
isKeepAlive: true,
|
||||
isAffix: true,
|
||||
isLink: "",
|
||||
isIframe: false,
|
||||
roles: ["admin", "common"],
|
||||
svgIcon: "about"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
7
src/views/about-project/about-project.vue
Normal file
7
src/views/about-project/about-project.vue
Normal file
@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<div>关于项目</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
Loading…
x
Reference in New Issue
Block a user