基于字体的图标集,包含了大多数常见场景的图标。
#平台差异说明
App(vue) | App(nvue) | H5 | 小程序 |
√ | √ | √ | √ |
#基本使用
注意
因为在nvue
下暂时无法解决自定义图标的问题,所以此功能暂缓推出。
通过<u-icon>
形式来调用,设置name
参数为图标名即可。其中color
默认为#606266
,size
默认为16px
<u-icon name="photo"></u-icon>
copy
#修改图标的样式
- 通过
color
参数修改图标的颜色 - 通过
size
参数修改图标的大小,单位为px
<u-icon name="photo" color="#2979ff" size="28"></u-icon>
copy
#图片图标
这里说的图片图标,指的是小图标,起作用定位为"icon"图标作用,而非大尺寸的图片展示场景,理论上,这个小图标应该为png
格式的正方形图标。
上面说到,给组件的name
参数传入一个图片的名称即可显示字体图标,这些名称中不能带有/
斜杠符号,否则会被认为是传入了图片图标,同时,size
参数 也被设置为这个图片图标的宽度,由于是图片,诸如颜色color
等参数都会失效。
<u-icon label="uView" size="40" name="https://cdn.uviewui.com/uview/example/button.png"></u-icon>