refactor(icon): 重构图标系统使用CoiIcon组件
- 更新 utils/icon.ts 使用 CoiIcon 替代原有图标实现 - 重构 IconSelect 组件使用 CoiIcon 统一图标渲染 - 移除对 @iconify/vue 的直接依赖 - 简化图标组件创建逻辑
This commit is contained in:
parent
f0fdf5d13e
commit
aaf0338f1c
@ -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>
|
||||
|
||||
@ -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 })
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user