修改图标
Vexip UI 所有组件使用到的内部图标，均可以通过 全局配置 或 ConfigProvider 进行自定义的修改。
ts
import { CircleXmark, Spinner, Xmark } from '@vexip-ui/icons'
app.use(install, {
icons: {
close: Xmark,
// 可以传入一个数组，并在第二个参数配置自定义参数
loading: [
Spinner,
{ effect: 'pulse-in' }
]
}
})
内部图标一览#
替换为 Iconify#
如今 Iconify 被越来越多的人使用，经常有人咨询如何将组件库的图标替换为 Iconify。
下面这个示例演示了如何通过修改 Icon 组件的 renderer 属性 的默认值来渲染 Iconify 图标。可以看到当传入了 name 属性时，让其渲染 iconify-icon 元素，否则使用默认的渲染方法。
这样处理，可以在不破坏原有的图标的情况下逐步替换为 Iconify 图标。
vue
<script setup lang="ts">
import 'iconify-icon'
import { h } from 'vue'
import type { IconsOptions, PropsOptions } from 'vexip-ui'
const providedProps: PropsOptions = {
icon: {
renderer: (props, attrs, renderDefault) => {
if (attrs.name) {
const { name, ...otherAttrs } = attrs
return h('iconify-icon', {
...otherAttrs,
icon: name,
class: props.effect,
inline: true,
rotate: props.rotate,
flip: props.flip === 'both' ? 'horizontal,vertical' : props.flip,
style: props.size || (String(props.scale) !== '1' ? `font-size: ${props.scale}em` : '')
})
}
return renderDefault()
}
}
}
// 替换组件库内部图标
// Replace internal icons of library
const icons: IconsOptions = {
loading: [{}, { name: 'eos-icons:three-dots-loading' }],
clear: [{}, { name: 'icon-park-outline:clear-format' }],
calendar: [{}, { name: 'radix-icons:calendar' }]
}
</script>
<template>
<ConfigProvider :props="providedProps" :icons="icons">
<Space vertical>
<Button type="primary" loading>
Loading
</Button>
<DatePicker :value="Date.now()" clearable style="max-width: 300px"></DatePicker>
<Upload></Upload>
<span style="display: flex; gap: 0 6px; padding: 3px">
<!-- 直接使用图标 -->
<!-- Use icons directly -->
<Icon name="ri:airplay-line" scale="1.5"></Icon>
<Icon name="ri:t-shirt-air-line" scale="1.5"></Icon>
<Icon name="ant-design:heart-outlined" scale="1.5"></Icon>
<Icon name="ant-design:check-circle-outlined" scale="1.5"></Icon>
</span>
</Space>
</ConfigProvider>
</template>
可以看到，替换的了图标将渲染为 Iconify 图标，而未替换的则还是原来的图标：
2024
/
11
/
19
上面的示例通过 ConfigProvider 局部地替换了图标，在实际的项目中你可以在组件库初始化时进行处理。
旧内置图标#
你可以通过下面的配置使用旧的内置图标：
ts
import {
AngleDown,
AngleLeft,
AngleRight,
AngleUp,
AnglesLeft,
AnglesRight,
ArrowRightArrowLeft,
ArrowRightFromBracket,
ArrowRotateLeft,
ArrowRotateRight,
ArrowsRotate,
CalendarR,
Check,
CircleCheck,
CircleExclamation,
CircleInfo,
CircleQuestion,
CircleQuestionR,
CircleXmark,
ClockR,
CloudArrowUp,
Compress,
Ellipsis,
Expand,
EyeR,
EyeSlashR,
FileAudioR,
FileCodeR,
FileImageR,
FileLinesR,
FileR,
FileVideoR,
FileZipperR,
Filter,
Flag,
GripLinesVertical,
ImageR,
Indent,
MagnifyingGlass,
Minus,
Moon,
Outdent,
Plus,
Repeat,
Retweet,
Spinner,
SquareMinusR,
SquarePlusR,
Sun,
TrashCanR,
Upload,
User,
Xmark
} from '@vexip-ui/icons'
import type { IconsOptions } from 'vexip-ui'
const icons: IconsOptions = {
loading: [Spinner, { effect: 'pulse-in' }],
clear: CircleXmark,
close: Xmark,
calendar: CalendarR,
clock: ClockR,
exchange: ArrowRightArrowLeft,
angleUp: AngleUp,
angleRight: AngleRight,
angleDown: AngleDown,
angleLeft: AngleLeft,
anglesRight: AnglesRight,
anglesLeft: AnglesLeft,
retweet: Retweet,
refresh: ArrowsRotate,
filter: Filter,
ellipsis: Ellipsis,
upload: Upload,
uploadCloud: CloudArrowUp,
check: Check,
help: CircleQuestionR,
alert: Flag,
question: CircleQuestion,
info: CircleInfo,
success: CircleCheck,
warning: CircleExclamation,
error: CircleXmark,
delete: TrashCanR,
preview: EyeR,
image: ImageR,
plus: Plus,
minus: Minus,
plusSquare: SquarePlusR,
minusSquare: SquareMinusR,
cipherText: EyeSlashR,
plainText: EyeR,
user: User,
light: Sun,
dark: Moon,
signOut: ArrowRightFromBracket,
indent: Indent,
outdent: Outdent,
search: MagnifyingGlass,
rotateRight: ArrowRotateRight,
rotateLeft: ArrowRotateLeft,
flipX: Repeat,
flipY: [Repeat, { style: 'transform: rotate(90deg)' }],
zoomIn: Plus,
zoonOut: Minus,
fullScreen: Expand,
resetScreen: Compress,
dragger: GripLinesVertical,
file: FileR,
fileText: FileLinesR,
fileCode: FileCodeR,
fileImage: FileImageR,
fileAudio: FileAudioR,
fileVideo: FileVideoR,
fileZip: FileZipperR
}