Icon 图标

基于字体的图标集，包含了大多数常见场景的图标。

平台

App	小程序	H5
√	√	√

属性

属性名	类型	默认值	说明	平台
name	String	null	图标名	All
color	String	c-t-main	颜色支持`c-t-`开头的颜色类	All
size	Number,String	32rpx	图标尺寸	All
lineHeight	Number,String	null	行高	All
align	String	left	位置，值`left`,`center`,`right`	All
bold	Boolean	false	加粗	All
source	String	cook-uni	icon资源名，默认cook-uni，用于图标扩展	All
unicodeMap	Object	{}	icon字符集和图标名的映射图标扩展时传入	All
cClass	String,Array,Object	null	组件类	All
cStyle	String,Array,Object	null	组件样式	All
margin	String,Number,Array	null	外边距	All
padding	String,Number,Array	null	内边距	All
bgColor	String	null	背景色，支持`c-bg-`开头的背景色类	All

事件

事件名	说明
click	点击事件

全部图标

blue
loading-semicircle
apple
apple-fill
alipay-fill
card
weixin
weixin-fill
alipay
kefu
card-fill
backspace
radio
circle-fill
plus
minus
cook
text
video
info-fill
warning
warning-fill
info
empty
loading-snowflake
lock-fill
unlock
lock
unlock-fill
mail-fill
mail
play
search
fingerprint
navigation
share-square
edit-square
edit
edit-fill
arrow-double-right
setting
filter
like-fill
like
telephone-fill
telephone
share-fill
share
play-circle
calendar-fill
calendar
notification-off-fill
return
notification-fill
notification
mic
mic-mute
mic-fill
menu
image-fill
image
upload
download
cloud-arrow-up-fill
cloud-arrow-up
cloud-arrow-down-fill
cloud-arrow-down
paperclip
star-fill
star
gear
gear-fill
remove
remove-fill
arrow-thin-up
arrow-thin-left
arrow-thin-right
arrow-thin-down
arrow-right
arrow-down
arrow-left
arrow-up
pic
eye-off
eye-off-fill
triangle-right
location-fill
location
time-fill
time
comment-fill
comment
back
more
scan
question-fill
question
refresh
more-vertical
delete-fill
delete
home
home-fill
add-fill
add
notice-fill
notice
people-fill
people
eye-fill
eye
triangle-down
triangle-up
close
error-fill
error
check
success-fill
success

示例

vue

<template>
    <c-icon name="cook" />
</template>

图标扩展

复制下面代码，并按步骤修改：

从iconfont上下载字体图标ttf文件，并将此文件base64编码(在线工具)。
将iconBase64变量值替换为转换好的编码值。
在style中添加引入字体图标的ttf文件。
把myIconName替换为自己的字体图标名。
在unicodeMap中添加图标字符集和图标名映射，字符集在iconfont中获取。

vue

<template>
  <c-icon v-bind="allProp" />
</template>

<script>
// #ifdef APP-PLUS-NVUE
const domModule = weex.requireModule('dom');
// 图标字体ttf文件的base64编码
const iconBase64 = '替换这里';
domModule.addRule('fontFace', {
  'fontFamily': "myIconName",
  'src': `url('data:font/truetype;charset=utf-8;base64,${iconBase64}')`
});
// #endif
export default {
  name:"my-icon",
  props:{
    name:String,
    size:[Number,String],
    color:String,
    lineHeight:[Number,String],
  },
  computed:{
    allProp(){
      const props = {
        name:this.name,
        size:this.size,
        color:this.color,
        lineHeight:this.lineHeight,
      };
      if(typeof this.unicodeMap[this.name] !== 'undefined'){
        props.source = 'myIconName';
        props.unicodeMap = this.unicodeMap;
      }
      return props
    }
  },
  data() {
    return {
      unicodeMap:{
        // icon 字符集和图标名映射
        // "school":"\ue655",
      }
    }
  },
}
</script>

<style scoped>
/* #ifndef APP-PLUS-NVUE */
@font-face {
  font-family: myIconName;
  /* 这里是引入的字体图标文件ttf路径 */
  src: url('./my-icon.ttf') format('truetype');
}
/* #endif */
</style>

在代码中使用

vue

<my-icon name="school" />

Icon 图标 ​

平台 ​

属性 ​

事件 ​

全部图标 ​

示例 ​

图标扩展 ​

Icon 图标

平台

属性

事件

全部图标

示例

图标扩展