【unibest】第5篇 —— 图标篇

大家好，我是 菲鸽，今天带给大家 unibest 文档系列文章第5篇 —— 图标篇。欢迎食用~

本文主要介绍了 图标 的使用方式，通常有以下几种方式使用图标：

• UI 库 Icons

• UnoCSS Icons

• iconfont

下面笔者一一介绍

UI库 Icons

如果您已经引入了 UI库，并且正好该 UI库 已经有你想要的 Icons，那直接用最方便了，无需额外引入其他库，代码也是最少的。

这里介绍几个常用 UI库 的图标使用。

uni-ui Icons

注意：uni-ui Icons 颜色只能通过 color 属性设置；使用 UnoCSS 设置无效。

<uni-icons type="contact" size="30"></uni-icons>
<uni-icons type="contact" size="30" color="red"></uni-icons>
<uni-icons type="contact" size="30" class="text-green"></uni-icons>
<uni-icons type="contact" size="30" color="red" class="text-green"></uni-icons>

wot-ui Icons

注意：wot-ui icons 颜色可以通过 color 属性设置，也可以通过 UnoCSS 设置；同时设置时，color 属性优先级高。

<wd-icon name="add-circle"></wd-icon>
<wd-icon name="add-circle" color="red"></wd-icon>
<wd-icon name="add-circle" class="text-green"></wd-icon>
<wd-icon name="add-circle" class="text-green" color="red"></wd-icon>

uv-ui Icons

注意：跟 uni-ui Icons 一样，uv-ui Icons 的颜色只能通过 color 属性设置；使用 UnoCSS 设置无效。

<uv-icon name="home"></uv-icon>
<uv-icon name="home" color="red"></uv-icon>
<uv-icon name="home" class="text-green"></uv-icon>
<uv-icon name="home" color="red" class="text-green"></uv-icon>

注意，经过检测这 3个UI库Icons 都不支持使用 UnoCSS 改变大小（优先级低被覆盖），必须使用 size 属性来设置大小才有效果（行内样式优先于css样式）。

另外，经过检测，都支持动态 iconNam