# Icon

IconFont、SVG Icons

# Import

import { Icon } from  'mand-mobile-next'

Vue.createApp().component(Icon.name, Icon)

# Instruction

Custom svg icons and import local font file, please refer to Appendix.

# Code Examples

# API

# Icon Props

# Appendix

# Custom svg icons

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

export default {
  name: 'icon-demo',
  components: {
    [Icon.name]: Icon
  }
}
</script>

# Importing local font files

Note: webpack url-loader configuration needs to include mand-mobile

• Reset icon fonts in 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")
}

• Reset stylus variable when customizing theme

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