图标 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,而这个高度应该与父元素高度相等。

results matching ""

    No results matching ""