Icon 图标

IconFont、SVG 图标

引入

import { Icon } from 'mand-mobile'
Vue.component(Icon.name, Icon)

使用指南

自定义svg图标和引入本地字体文件，请参考附录)。

代码演示

字体图标

        <template>
  <div class="md-example-child md-example-child-icon md-example-child-icon-0">
    <div
      class="md-example-item"
      v-for="icon in iconList"
      :key="icon"
    >
      <md-icon
        :name="icon.split('/')[0]"
        size="lg"
      ></md-icon>
      <p>{{ icon }}</p>
    </div>
  </div>
</template>
<script>
import {Icon} from 'mand-mobile'
export default {
  name: 'icon-demo',
  components: {
    [Icon.name]: Icon,
  },
  data() {
    return {
      iconList: [
        'rectangle',
        'right',
        'wrong',
        'arrow-left',
        'arrow-right',
        'arrow-up',
        'arrow-down',
        'invisible',
        'visible',
        'service',
        'setting',
        'close',
        'refresh',
        'edit',
        'sort',
        'info',
        'question',
        'security',
        'rmb',
        'wait',
        'check',
        'checked/success',
        'check-disabled',
        'clear/fail',
        'warn',
        'info-solid',
        'scan',
        'share',
        'back',
        'card-bag',
        'message',
        'order',
        'balance',
        'coupon',
        'address-book',
        'mobile-phone',
        'calendar',
        'home',
        'discovery',
        'switch',
        'time',
        'search',
        'user',
        'camera',
        'clock',
        'delete',
        'profession',
        'id-card',
        'authentication',
        'location',
        'filter',
        'motor-vehicle',
        'phone',
        'volumn',
      ],
    }
  },
}
</script>
 
      

svg图标

        <template>
  <div class="md-example-child md-example-child-icon md-example-child-icon-1">
    <div class="md-example-item-s">
      <md-icon name="spinner" size="lg" style="-webkit-filter:invert(1)"></md-icon>
      <p>spinner</p>
    </div>
    <div class="md-example-item-s">
      <md-icon name="success-color" size="lg" svg></md-icon>
      <p>success-color</p>
    </div>
    <div class="md-example-item-s">
      <md-icon name="warn-color" size="lg" svg></md-icon>
      <p>warn-color</p>
    </div>
  </div>
</template>
<script>
import {Icon} from 'mand-mobile'
export default {
  name: 'icon-demo',
  components: {
    [Icon.name]: Icon,
  },
}
</script>
 
      

大小

        <template>
  <div class="md-example-child md-example-child-icon md-example-child-icon-2">
    <div class="md-example-item-s">
      <md-icon name="location" size="xs"></md-icon>
      <p>xs</p>
    </div>
    <div class="md-example-item-s">
      <md-icon name="location" size="sm"></md-icon>
      <p>sm</p>
    </div>
    <div class="md-example-item-s">
      <md-icon name="location" size="md"></md-icon>
      <p>md</p>
    </div>
    <div class="md-example-item-s">
      <md-icon name="location" size="lg"></md-icon>
      <p>lg</p>
    </div>
  </div>
</template>
<script>
import {Icon} from 'mand-mobile'
export default {
  name: 'icon-demo',
  components: {
    [Icon.name]: Icon,
  },
}
</script>
 
      

颜色

        <template>
  <div class="md-example-child md-example-child-icon md-example-child-icon-3">
    <div class="md-example-item-s">
      <md-icon name="security" color="gray"></md-icon>
      <p>gray</p>
    </div>
    <div class="md-example-item-s">
      <md-icon name="security" color="orange"></md-icon>
      <p>orange</p>
    </div>
    <div class="md-example-item-s">
      <md-icon name="security" color="blue"></md-icon>
      <p>blue</p>
    </div>
    <div class="md-example-item-s">
      <md-icon name="security" color="purple"></md-icon>
      <p>purple</p>
    </div>
  </div>
</template>
<script>
import {Icon} from 'mand-mobile'
export default {
  name: 'icon-demo',
  components: {
    [Icon.name]: Icon,
  },
}
</script>
 
      

API

Icon Props

附录

自定义svg图标

自定义svg图标需使用svg-sprite-loader，svg文件名即图标名称

• 安装依赖

npm install svg-sprite-loader --save-dev

• webpack配置

const path = require('path')
module.exports = {
  module: {
    loaders: [
      {
        test: /\.svg$/i,
        loader: 'svg-sprite-loader',
        include: [
          // 将某个路径下所有svg交给 svg-sprite-loader 插件处理
          path.resolve(__dirname, 'src/my-project-svg-folder')
        ],
      }
    ]
  }
}

• 引入图标

<template>
  <div>
    <md-icon name="hello" svg></md-icon>
    <md-icon name="world" svg></md-icon>
  </div>
</template>
<script>
import 'src/my-project-svg-folder/hello.svg'
import 'src/my-project-svg-folder/world.svg'
import { Icon } from 'mand-mobile'
export default {
  name: 'icon-demo',
  components: {
    [Icon.name]: Icon
  }
}
</script>

引入本地字体文件

注意：webpack配置url-loader需要包含mand-mobile

• 重置css中的图标字体

@font-face{
  font-family: Mand-Mobile-Icon;
  font-style: normal;
  font-weight: 400;
  src: url(~mand-mobile/components/icon/iconfont.woff) format("woff"),url(~mand-mobile/components/icon/iconfont.woff) format("truetype")
}

• 自定义主题时重置stylus变量

icon-font-family = url("./iconfont.woff") format("woff"), url("./iconfont.ttf") format("truetype")