Ez Element

主题

Icon ​

语义化的矢量图形。使用图标组件，默认已经作为@goodlark/ez-element的依赖，不需要额外再次安装

本组件使用的图标库是基于 Font Awesome的开源免费版

Icon 组件的属性是基于 add Icons styling with Vue扩展了type和color属性。

基础用法 ​

使用icon属性来设置图标，直接设置名称即可，图标库见Font Awesome 开源免费版。

<template>
  <ez-icon icon="star" />
  <ez-icon icon="fa-solid fa-coffee" />
  <ez-icon icon="fa-solid fa-basketball" />
  <div>
    <ez-icon icon="star" size="sl" />
    <ez-icon icon="star" size="lg" />
    <ez-icon icon="star" size="xl" />
  </div>
  <div>
    <ez-icon icon="star" size="x" />
    <ez-icon icon="star" size="2x" />
    <ez-icon icon="star" size="3x" />
  </div>
</template>
<style scoped>
.ez-icon + .ez-icon {
  margin-left: 10px;
}
</style>

type 属性 ​

基于传入的type 进行配置，一共包含primary、success、warning、danger、info五中类型。

<template>
  <ez-icon icon="star" />
  <ez-icon icon="star" type="primary" />
  <ez-icon icon="star" type="success" />
  <ez-icon icon="star" type="warning" />
  <ez-icon icon="star" type="info" />
  <ez-icon icon="star" type="danger" />
</template>
<style scoped>
.ez-icon + .ez-icon {
  margin-left: 10px;
}
</style>

color 属性 ​

基于传入的color 进行自定义图标颜色。

<template>
  <ez-icon icon="star" color="red" />
  <ez-icon icon="star" color="orange" />
  <ez-icon icon="star" color="blue" />
  <ez-icon icon="star" color="green" />
  <ez-icon icon="star" color="purple" />
  <ez-icon icon="star" color="black" />
  <ez-icon icon="star" color="#666" />
</template>
<style scoped>
.ez-icon + .ez-icon {
  margin-left: 10px;
}
</style>

Font Awesome Icon 原生属性 ​

详情见add Icons styling with Vue。

<template>
  <ez-icon icon="fa-solid fa-compass" spin spin-reverse />
  <ez-icon icon="fa-solid fa-spinner" spin-pulse />
  <ez-icon icon="fa-solid fa-circle-info" beat-fade />
  <ez-icon icon="fa-solid fa-compact-disc" flip />
  <ez-icon icon="fa-solid fa-coffee" border />
  <ez-icon icon="fa-solid fa-coffee" transform="shrink-6 left-4" />
</template>
<style scoped>
.ez-icon + .ez-icon {
  margin-left: 10px;
}
</style>

Icon API ​

Fontawesome Icon 原生 Attributes ​

见add Icons styling with Vue

style-cheatsheet

扩展Icon Attributes ​

属性名说明类型默认值
colorsvg 的 fill 颜色string继承颜色
type按钮类型和button类型一致enum - 'primary'| 'success'| 'warning'| 'danger'| 'info'灰色