跳到主要内容

FQIcon 图标

介绍

图标组件,用于展示字体图标。

用法

基本引入

import { FQIcon } from '@fq/fq-weapp-ui';

组件依赖的样式文件(仅按需引用时需要)

import '@fq/fq-weapp-ui/dist/styles/components/icon.scss';

基础用法

<FQIcon value={FQIcon.IconTypes.globalBack} />

修改颜色与大小

<FQIcon value={FQIcon.IconTypes.globalBack} size={20} color='#cccccc' />

自定义Icon类名

<FQIcon prefixClass='xxx' value={FQIcon.IconTypes.globalBack} size={20} color='#cccccc' />

可用图标

通过 FQIcon.IconTypes 获取所有可用图标名称:

名称说明
globalBack全局-左-返回
globalUp全局箭头-上
globalRight全局箭头-右
globalDownward全局箭头-下
globalClose全局关闭
globalMore全局-更多
videoDownload视频-下载
videoPause视频-暂停
videoUnlocked视频-解锁
videoLocked视频-锁定
videoPlay视频-播放
voiceOpen语音-打开
videoFullpage视频-全屏
videoMute视频-静音
checkOutlined选中-轮廓
closeCircle关闭-圆形

API

参数说明类型默认值版本
value图标名称,对应 iconfont 的值string-
size图标大小,单位 pxnumber | string24
color图标颜色string-
prefixClass图标类名前缀stringfq-ui-icon
onClick点击事件CommonEventFunction-