Minimalist UI

Icon 图标

引入组件

<template>
  <div>
    <m-icon icon="tips"></m-icon>
  </div>
</template>

<script>
  import { MIcon } from "@csr/m_ui";
  export default {
    components: {
      MIcon
    }
  }
</script>

基础用法

代码
<m-icon icon="date"></m-icon>
<m-icon icon="double-arrow-right"></m-icon>
<m-icon icon="double-arrow-left"></m-icon>
<m-icon icon="add"></m-icon>
<m-icon icon="delete"></m-icon>
<m-icon icon="preview"></m-icon>
<m-icon icon="file"></m-icon>
<m-icon icon="upload"></m-icon>
<m-icon icon="caret-down"></m-icon>
<m-icon icon="caret-up"></m-icon>
<m-icon icon="more"></m-icon>
<m-icon icon="left"></m-icon>
<m-icon icon="right"></m-icon>
<m-icon icon="success"></m-icon>
<m-icon icon="danger"></m-icon>
<m-icon icon="warning"></m-icon>
<m-icon icon="tips"></m-icon>
<m-icon icon="close"></m-icon>
<m-icon icon="search"></m-icon>
<m-icon icon="loading"></m-icon>
<m-icon :is-loading="true"></m-icon>

自定义图标

<m-icon>
  <svg class="icon-font" aria-hidden="true">
    <use xlink:href="#icon-funny"></use>
  </svg>
</m-icon>

API

属性说明类型默认值
icon 用于定义图标的样式, 可选值：参考基础用法 string ''
isLoading 是否loading状态，可选值：true，false boolean false

事件

事件名 说明 返回值
on-click 点击图标时触发 (event: Event)

提示

TIP

MIcon组件的图标是使用了iconfont的symbol引用实现的，要改变图标的颜色只需要改变当前使用MIcon组件元素css中的color即可，大小可通过设置css中的font-size来修改， 也可通过css中的width和height进行修改

← Input 输入框 →