Icon 图标

基于字体的图标集，可以通过 Icon 组件使用，也可以在其他组件中通过 icon 属性引用。

代码演示

基础用法

name 图标名称或图片链接,color 图标颜色，size 图标大小，如 20px，2em，默认单位为px。

<hd-icon :name="name" :color="color" :size="size"></hd-icon>

export default {
  data() {
    return {
      name: 'ic_scan_line',
      color: '#333'
      size: '20px',
    }
  }
}

自定义样式

customStyle 自定义图标样式，style行内样式。

<hd-icon :name="ic_scan_line" :color="#333" :size="20px" :customStyle="customStyle"></hd-icon>

export default {
  data() {
    return {
      customStyle: 'color: #999'
    }
  }
}

自定义类名前缀

classPrefix 自定义类名前缀，默认值fant-icon。

<hd-icon :name="ic_scan_line" :color="#333" :size="20px" :classPrefix="classPrefix"></hd-icon>

export default {
  data() {
    return {
      classPrefix: 'f-ic'
    }
  }
}

事件

click事件, 当icon组件被点击时触发。

<hd-icon :name="ic_scan_line" :color="#333" :size="20px" @click="click"></hd-icon>

export default {
  data() {
    return {
      showLeftIcon: true,
      leftIcon: '/static/ic_noticebar.png',
      showLeftIcon: true,
      count: 1
    }
  },
  methods: {
    click() {}
  }
}

Props

Name	Description	Type	Required	Default
name	图标名称或图片链接	String	false	-
color	图标颜色	String	false	默认值:#CFD3DB
size	图标大小	String / Number	false	-
customStyle	自定义样式	String	false	-
classPrefix	自定义类名前缀	String	false	默认值：fant-icon

Events

Event Name	Description	Parameters
click	图标被点击时触发	无