图标 icon
1) 集合
import icon from 'vue-human/suites/icon'
注：核心组件，已经包含在 core suites 内。
2) 组件目录
- mn-icon
3) mn-icon 组件
图标组件是通过 svg 来实现的。直接在 mn-icon 内部渲染 svg 节点。
3.1 案例
使用 icon 组件，必须依赖 vue-human-icons 库。
<template>
<div>
<mn-icon :name="home"></mn-icon> 首页
</div>
</template>
<script>
import icon from 'vue-human/suites/icon'
export default {
components: {
...icon.map()
},
data () {
icons: {
// 此处，建议新建一个 icons 的对象，然后在其中使用键值对和 require 加载
// 命名方面，建议以用途来命名，而不是以路径里的文件名命名
// 如 `home` 和 `world` 的关系
home: require('vue-human-icons/js/ios/world')
}
}
}
</script>
3.2 属性
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| name | 传递 svg 内容，将会渲染与 icon 内，svg 内容参考 vue-human-icons。 | string, undefined, null 均可 | - | undefined |
| width | 图标的宽度 | number | - | 24 |
| height | 图标的高度 | number | - | 24 |
| scale | 图标的比例 | number | - | 1 |
| loading | 是否为加载状态 | boolean | - | false |
注：scale 技巧
如果图标与文字发生不对齐显示，建议调整 scale 属性，默认为 24px 的高度，如果 scale 为 2，则高度为 48px，而这个高度应该与父元素高度相等。