refactor(icon): 重构图标系统使用CoiIcon组件

- 更新 utils/icon.ts 使用 CoiIcon 替代原有图标实现
- 重构 IconSelect 组件使用 CoiIcon 统一图标渲染
- 移除对 @iconify/vue 的直接依赖
- 简化图标组件创建逻辑
This commit is contained in:
Leo 2025-07-07 22:35:07 +08:00
parent f0fdf5d13e
commit aaf0338f1c
2 changed files with 15 additions and 33 deletions

View File

@ -1,21 +1,20 @@
<template>
<n-input-group disabled>
<n-button v-if="value" :disabled="disabled" type="primary">
<template #icon>
<nova-icon :icon="value" />
<n-input-group>
<n-input :value="value" readonly placeholder="请选择图标">
<template v-if="value" #prefix>
<CoiIcon :icon="value" :size="16" />
</template>
</n-button>
<n-input :value="value" readonly :placeholder="$t('components.iconSelector.inputPlaceholder')" />
</n-input>
<n-button type="primary" ghost :disabled="disabled" @click="showModal = true">
{{ $t('common.choose') }}
选择
</n-button>
</n-input-group>
<n-modal
v-model:show="showModal" preset="card" :title="$t('components.iconSelector.selectorTitle')" size="small" class="w-800px" :bordered="false"
v-model:show="showModal" preset="card" title="选择图标" size="small" class="w-800px" :bordered="false"
>
<template #header-extra>
<n-button type="warning" size="small" ghost @click="clearIcon">
{{ $t('components.iconSelector.clearIcon') }}
清除图标
</n-button>
</template>
@ -34,7 +33,7 @@
<n-input
v-model:value="searchValue" type="text" clearable
:placeholder="$t('components.iconSelector.searchPlaceholder')"
placeholder="搜索图标"
/>
<div>
@ -45,7 +44,7 @@
:title="`${list.prefix}:${icon}`"
@click="handleSelectIcon(`${list.prefix}:${icon}`)"
>
<nova-icon :icon="`${list.prefix}:${icon}`" :size="24" />
<CoiIcon :icon="`${list.prefix}:${icon}`" :size="24" />
</n-el>
<n-empty v-if="visibleIcons.length === 0" class="w-full" />
</n-flex>

View File

@ -1,32 +1,15 @@
import { Icon } from '@iconify/vue'
import { NIcon } from 'naive-ui'
import CoiIcon from '@/components/common/CoiIcon.vue'
export function renderIcon(icon?: string, props?: import('naive-ui').IconProps) {
export function renderIcon(icon?: string, size?: number) {
if (!icon)
return
return () => createIcon(icon, props)
return () => createIcon(icon, size)
}
export function createIcon(icon?: string, props?: import('naive-ui').IconProps) {
export function createIcon(icon?: string, size: number = 18) {
if (!icon)
return
const isLocal = icon.startsWith('local:')
let innerIcon: any
if (isLocal) {
const svgName = icon.replace('local:', '')
const svg = import.meta.glob('@/assets/svg-icons/*.svg', {
query: '?raw',
import: 'default',
eager: true,
})
const target = svg[`/src/assets/svg-icons/${svgName}.svg`]
innerIcon = h(NIcon, { ...props, innerHTML: target })
}
else {
innerIcon = h(NIcon, props, { default: () => h(Icon, { icon }) })
}
return innerIcon
return h(CoiIcon, { icon, size })
}