点我扫二维码，查看demo

# Icon 图标

# 介绍

基于字体的图标集，可以通过 Icon 组件使用，也可以在其他组件中通过 icon 属性引用。

# 引入

通过以下方式来按需注册组件。

import Vue from 'vue';
import { Icon } from '@dolphin-iot/ui'

Vue.use(Icon);

1
2
3
4

# 代码演示

# 基础用法

name 属性支持传入图标名称或图片链接。

<mx-icon name="star" />
<mx-icon name="http://dolphin-weex-dev.msmartlife.cn/cdn/images/common/mail.png" />
<mx-icon name="http://dolphin-weex-dev.msmartlife.cn/cdn/images/common/equipment.png" />

1
2
3

# 徽标提示

设置 dot 属性后，会在图标右上角展示一个小红点；设置 badge 属性后，会在图标右上角展示相应的徽标。

<template>
<div>
  <mx-icon name="star" :dot="true"/>
  <mx-icon name="http://dolphin-weex-dev.msmartlife.cn/cdn/images/common/mail.png" badge="9"/>
  <mx-icon name="http://dolphin-weex-dev.msmartlife.cn/cdn/images/common/equipment.png" badge="99+"/>
</div>
</template>
<style>
.mx-icon{
    margin-left: 20px;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12

# 定制颜色

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

<mx-icon name="star" color="#25cf42"/>
<mx-icon name="http://dolphin-weex-dev.msmartlife.cn/cdn/images/common/mail.png" color="#ff3b30"/>
<mx-icon name="http://dolphin-weex-dev.msmartlife.cn/cdn/images/common/equipment.png" color="#267aff"/>

1
2
3

# 主题颜色

theme 属性用来设置图标的主题颜色，图标支持 brand purple blue-purple blue cyan yellow orange orange-red gray-offline 九种主题颜色。

<mx-icon name="star" theme="brand"/>
<mx-icon name="http://dolphin-weex-dev.msmartlife.cn/cdn/images/common/mail.png" theme="brand"/>
<mx-icon name="http://dolphin-weex-dev.msmartlife.cn/cdn/images/common/equipment.png" theme="orange"/>

1
2
3

# 定制大小

size 属性用来设置图标的尺寸大小，默认单位为 px。

<mx-icon name="star" size="48"/>
<mx-icon name="http://dolphin-weex-dev.msmartlife.cn/cdn/images/common/mail.png" size="48"/>
<mx-icon name="http://dolphin-weex-dev.msmartlife.cn/cdn/images/common/equipment.png" size="48"/>

1
2
3

# 设置圆角

设置 round 属性可以使图标显示为圆角,仅在 name 为图片链接,且设置了 color 时有效。此功能个人感觉可以删除,目前主要是 Cell 组件使用到。

<mx-icon name="star" :round="true"/>
<mx-icon name="http://dolphin-weex-dev.msmartlife.cn/cdn/images/common/mail.png" color="#ff3b30" :round="true" />
<mx-icon name="http://dolphin-weex-dev.msmartlife.cn/cdn/images/common/equipment.png" color="#267aff" :round="true" />

1
2
3

# 自定义图标

如果需要在现有 Icon 的基础上使用更多图标，可以引入第三方 iconfont 对应的字体文件和 CSS 文件，之后就可以在 Icon 组件中直接使用。

/* 引入第三方或自定义的字体图标样式 */
@font-face {
  font-family: 'my-icon';
  src: url('./my-icon.ttf') format('truetype');
}

.my-icon {
  font-family: 'my-icon';
}

.my-icon-extra::before {
  content: '\e626';
}

1
2
3
4
5
6
7
8
9
10
11
12
13

<!-- 通过 class-prefix 指定类名为 my-icon -->
<mx-icon class-prefix="my-icon" name="extra" />-

1
2

# Api

# Props

参数	说明	类型	默认值	是否必须
name	图标名称或图片链接	string	`-`	`是`
dot	是否展示为小红点	boolean	`false`	`-`
badge	徽标内容	boolean string	`-`	`-`
size	图标大小	number string	`-`	`-`
gradient-type	渐变类型，可选值为 `linear` `gradient`	string array	`-`	`-`
color	自定义颜色，设置渐变色的时候，传递的参数为`array`类型	string array	`-`	`-`
theme	颜色主题，可选值为: `brand` `purple` `blue-purple` `blue` `cyan` `yellow` `orange` `orange-red` `gray-offline`	string	`-`	`-`
class-prefix	类名前缀，用于使用自定义图标	string	`mx-icon`	`-`

# Events

事件名称	说明	回调参数
click	点击图标时触发	e: Event

← Popup 弹出层 Checkbox 多选框 →