Icon 图标

SVG 图标

引入

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

使用指南

组件库内置图标可直接使用，arrow-up/down/left/right, circle-alert/cross/right，hollo-plus，cross，spinner

其他自定义图标需使用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"></md-icon>
    <md-icon name="world"></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>

代码演示

图标

<template>
  <div class="md-example-child md-example-child-icon md-example-child-icon-0">
    <div class="md-example-item">
      <md-icon name="hollow-plus" size="lg"></md-icon>
      <p>hollow-plus</p>
    </div>
    <div class="md-example-item">
      <md-icon name="circle-right" size="lg"></md-icon>
      <p>circle-right</p>
    </div>
    <div class="md-example-item">
      <md-icon name="circle-cross" size="lg"></md-icon>
      <p>circle-cross</p>
    </div>
    <div class="md-example-item">
      <md-icon name="circle-alert" size="lg"></md-icon>
      <p>circle-alert</p>
    </div>
    <div class="md-example-item">
      <md-icon name="arrow-up" size="lg"></md-icon>
      <p>arrow-up</p>
    </div>
    <div class="md-example-item">
      <md-icon name="arrow-right" size="lg"></md-icon>
      <p>arrow-right</p>
    </div>
    <div class="md-example-item">
      <md-icon name="arrow-down" size="lg"></md-icon>
      <p>arrow-down</p>
    </div>
    <div class="md-example-item">
      <md-icon name="arrow-left" size="lg"></md-icon>
      <p>arrow-left</p>
    </div>
    <div class="md-example-item">
      <md-icon name="cross" size="lg"></md-icon>
      <p>cross</p>
    </div>
    <div class="md-example-item">
      <md-icon name="right" size="lg"></md-icon>
      <p>right</p>
    </div>
    <div class="md-example-item">
      <md-icon name="spinner" size="lg" style="-webkit-filter:invert(1)"></md-icon>
      <p>spinner</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="circle-right" color="#333"></md-icon>
      <p>xs</p>
    </div>
    <div class="md-example-item-s">
      <md-icon name="circle-right" color="orange"></md-icon>
      <p>sm</p>
    </div>
    <div class="md-example-item-s">
      <md-icon name="circle-right" color="blue"></md-icon>
      <p>md</p>
    </div>
    <div class="md-example-item-s">
      <md-icon name="circle-right" color="purple"></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-1">
    <div class="md-example-item-s">
      <md-icon name="circle-right" size="xs"></md-icon>
      <p>xs</p>
    </div>
    <div class="md-example-item-s">
      <md-icon name="circle-right" size="sm"></md-icon>
      <p>sm</p>
    </div>
    <div class="md-example-item-s">
      <md-icon name="circle-right" size="md"></md-icon>
      <p>md</p>
    </div>
    <div class="md-example-item-s">
      <md-icon name="circle-right" 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>
 
                

API

Icon Props