Icon 图标

点击扫码预览

23:47



---

组件名：rice-icon

演示示例可扫模拟器状态栏上的二维码预览或 点击在线预览

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

平台兼容性

uni-app x

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

基础用法

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

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

使用图片URL

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

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

图标大小

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

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

图标颜色

通过color 属性来设置图标的颜色。dark-color为暗黑模式下的颜色， 可传颜色值或 auto，传auto时组件会根据 color的值自动计算对应的颜色值，默认为 none 即和color的值一致。

<rice-icon color="#409eff" name="arrow-up"/>
<rice-icon dark-color="#f56c6c" name="arrow-down"/>
<rice-icon color="#e6a23c" dark-color="auto" name="arrow-left"/>

自定义图标

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

提示

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

<template>
  <rice-icon font-family="my-icon" name="arrow-up">{{'\ue600'}}</rice-icon>
  <rice-icon font-family="my-icon" name="e6a9" dark-color="#8b60ef" />
  <rice-icon font-family="my-icon" name="e729" color="#e6a23c"/>
</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	-
darkColor	暗黑模式下图标的颜色	string	none 即和 color 值一致
bold	是否加粗	boolean	false
fontFamily	自定义图标的字体	string	-
customStyle	自定义样式	object	-

Event

事件名	说明	回调参数
click	点击事件	event: UniPointerEvent

Slots

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

类型定义

组件导出如下类型

import { IconProps } from "@/uni_modules/rice-ui"
//组件类型
const iconRef=ref<RiceIconComponentPublicInstance|null>(null)