fix: resolve light menu icons locally
This commit is contained in:
@@ -3,7 +3,21 @@ import type { Component } from 'vue';
|
|||||||
|
|
||||||
import { computed } from 'vue';
|
import { computed } from 'vue';
|
||||||
|
|
||||||
import { IconDefault, IconifyIcon } from '@vben-core/icons';
|
import {
|
||||||
|
AlignEndHorizontal,
|
||||||
|
AlignHorizontalSpaceAround,
|
||||||
|
AlignStartVertical,
|
||||||
|
Bot,
|
||||||
|
BookOpen,
|
||||||
|
IconDefault,
|
||||||
|
IconifyIcon,
|
||||||
|
LayoutGrid,
|
||||||
|
Mail,
|
||||||
|
Megaphone,
|
||||||
|
UserRound,
|
||||||
|
Users,
|
||||||
|
Workflow,
|
||||||
|
} from '@vben-core/icons';
|
||||||
import {
|
import {
|
||||||
isFunction,
|
isFunction,
|
||||||
isHttpUrl,
|
isHttpUrl,
|
||||||
@@ -17,10 +31,30 @@ const props = defineProps<{
|
|||||||
icon?: Component | Function | string;
|
icon?: Component | Function | string;
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
|
const localIconMap: Record<string, Component> = {
|
||||||
|
'carbon:agent-detached': Bot,
|
||||||
|
'carbon:align-box-middle-right': AlignEndHorizontal,
|
||||||
|
'carbon:align-vertical-top': AlignStartVertical,
|
||||||
|
'carbon:arrange': LayoutGrid,
|
||||||
|
'carbon:arrange-horizontal': AlignHorizontalSpaceAround,
|
||||||
|
'carbon:email': Mail,
|
||||||
|
'carbon:user-multiple': Users,
|
||||||
|
'lucide:bot': Bot,
|
||||||
|
'lucide:library-big': BookOpen,
|
||||||
|
'lucide:megaphone': Megaphone,
|
||||||
|
'lucide:square-user': UserRound,
|
||||||
|
'lucide:workflow': Workflow,
|
||||||
|
};
|
||||||
|
|
||||||
const isRemoteIcon = computed(() => {
|
const isRemoteIcon = computed(() => {
|
||||||
return isString(props.icon) && isHttpUrl(props.icon);
|
return isString(props.icon) && isHttpUrl(props.icon);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const localIcon = computed(() => {
|
||||||
|
if (!isString(props.icon)) return;
|
||||||
|
return localIconMap[props.icon.replace(/^i-/, '')];
|
||||||
|
});
|
||||||
|
|
||||||
const isComponent = computed(() => {
|
const isComponent = computed(() => {
|
||||||
const { icon } = props;
|
const { icon } = props;
|
||||||
return !isString(icon) && (isObject(icon) || isFunction(icon));
|
return !isString(icon) && (isObject(icon) || isFunction(icon));
|
||||||
@@ -29,6 +63,7 @@ const isComponent = computed(() => {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<component :is="icon as Component" v-if="isComponent" v-bind="$attrs" />
|
<component :is="icon as Component" v-if="isComponent" v-bind="$attrs" />
|
||||||
|
<component :is="localIcon" v-else-if="localIcon" v-bind="$attrs" />
|
||||||
<img v-else-if="isRemoteIcon" :src="icon as string" v-bind="$attrs" />
|
<img v-else-if="isRemoteIcon" :src="icon as string" v-bind="$attrs" />
|
||||||
<IconifyIcon v-else-if="icon" v-bind="$attrs" :icon="icon as string" />
|
<IconifyIcon v-else-if="icon" v-bind="$attrs" :icon="icon as string" />
|
||||||
<IconDefault v-else-if="fallback" v-bind="$attrs" />
|
<IconDefault v-else-if="fallback" v-bind="$attrs" />
|
||||||
|
|||||||
Reference in New Issue
Block a user