mand-mobile/components/icon

title	preview
Icon	https://didi.github.io/mand-mobile/examples/#/icon

IconFont、SVG Icons

Import

import { Icon } from 'mand-mobile'

Vue.component(Icon.name, Icon)

Code Examples

API

Icon Props

Props	Description	Type	Default	Note
name	icon name	String	-	-
size	icon size	String	md	xs, sm, md, lg
color	icon color	String	currentColor	this color value is set as the value of fill on the svg icon
svg	use svg icon	Boolean	false	refer to #Appendix

Appendix

As for custom svg icons, you need to use svg-sprite-loader, svg file name is the icon name.

1. Install Dependencies

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

2. Webpack Configuration

const path = require('path')

module.exports = {
  module: {
    loaders: [
      {
        test: /\.svg$/i,
        loader: 'svg-sprite-loader',
        include: [
          // All svg icons in a path are handled by svg-sprite-loader plugin
          path.resolve(__dirname, 'src/my-project-svg-folder')
        ],
      }
    ]
  }
}

3. Import Icons

<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>