Icon 图标

说明

推荐使用 iconify字体图标库，里面包含有很多平台资源，并且都是按需加载的。

由于框架有的组件需要用到图标，所以框架也会内置一些图标库

内置图标

<lv-search-icon />
<lv-error-icon />
<lv-loading-icon />
// ......

框架内置的图标如下：

arrow-down

arrow-left

arrow-right

arrow-up

caret-bottom

caret-top

close

d-arrow-left

d-arrow-right

info

loading

mask-close

moon

more

reduction

refresh-left

refresh-right

search

select

sort

success

sun

theme-default

warn

zoom-in

zoom-out

使用 iconfont 图标

使用时需要单独引入 iconfont 图标文件。

<lv-fol-icon name="Search" />

name 属性填入引入的 iconfont 文件里面对应的 id 即可

颜色和尺寸

修改颜色和尺寸可以通过 color 和 font-size 修改

<lv-search-icon style="color:red;font-size:16px" />

如果不想直接修改 style，也能通过 Tailwind CSS 或者 unocss，然后直接添加 class

<lv-search-icon class="text-sm text-blue" />

自定义图标

可以通过使用 base-icon 然后加入自定义的 svg-path 路径来构建自定义的图标

当然自定义图标，也可以使用 unplugin-icons 实现

使用其它图标库

本身提供的图标数量有限，如果不能满足需求，可以考虑使用通用性更强、数量更多的图标库。

• 推荐图标格式：SVG
• 推荐图标库：iconify 它提供了超过 200000 个开源图标。
• 两种方式可以使用 iconify: @iconify/vue 和 unplugin-icons
• 推荐使用 unplugin-icons 既能离线加载，也能自定义图标
• 其它图标库: Lucide