Icon 图标

手机扫码预览

01:50

组件名：rice-icon

用于展示Icon图标，包含了大多数常见场景的图标，使用简单。支持自定义图标。

平台兼容性

uni-app x

Android	iOS	鸿蒙Next	微信小程序	h5
√	√	√	√	√

基础用法

通过 name 属性定义需要使用的图标，组件内置了一套图标库，name值见右侧示例，传入对应的名称即可。

vue

<rice-icon name="arrow-up"/>

使用图片URL

name 值支持传入一个图片的URL链接，支持本地图片或网络图片，size 属性即为图片的宽高。如果是大尺寸的图片，不建议使用 Icon 来进行展示，直接使用 Image 组件即可。

vue

<rice-icon name="/static/images/logo.png"/>
<rice-icon name="https://xxx/logo.png" size="26"/>

图标大小

通过 size 属性来设置图标的大小，单位支持 px 和 rpx。

vue

<rice-icon size="14" name="arrow-up"/>
<rice-icon size="18px" name="arrow-down"/>
<rice-icon size="32rpx" name="arrow-right"/>

图标颜色

通过color 属性来设置图标的颜色。

vue

<rice-icon color="#409eff" name="arrow-up"/>

自定义图标

使用 font-family 属性自定义图标的字体，在 Icon 组件上通过 name 属性传递Unicode码或者通过插槽传入。

提示

由于uniappx在 App 端不支持伪元素选择器，因此在使用自定义图标时，若通过插槽方式使用，Unicode 码要使用\u作为前缀且需要使用单引号进行包裹，若通过name 属性使用，则无需添加\u 前缀。具体使用方法见下：

vue

<template>
  <rice-icon font-family="my-icon" name="e6a9"></rice-icon>
  <rice-icon font-family="my-icon">{{'\ue600'}}</rice-icon>
 <rice-icon font-family="my-icon" name="e729" color="#8b60ef" size="24px"></rice-icon>
</template>

<style>
/* 在APP.vue或页面中引入第三方或自定义的字体图标样式 */
@font-face {
  font-family: 'my-icon';
  src: url('/static/myicon.ttf');
}
</style>

API

Props

参数	说明	类型	默认值
name	图标的名称或图片链接	string	-
size	图标的大小，单位支持`px` `rpx`	string\|number	16px
color	图标的颜色	string	-
bold	是否加粗	boolean	`false`
fontFamily	自定义图标的字体	string	-
customStyle	自定义样式	object	-

Event

事件名	说明	回调参数
click	点击事件	-

Slots

名称	说明
default	自定义图标时可以传入图标的code

类型定义

组件导出如下类型

//组件类型
const iconRef=ref<RiceIconComponentPublicInstance|null>(null)

Icon 图标 ​

平台兼容性 ​

uni-app x ​

基础用法 ​

使用图片URL ​

图标大小 ​

图标颜色 ​

自定义图标 ​

API ​

Props ​

Event ​

Slots ​

类型定义 ​