icon

图标组件

• 包含常用的 200+ 图标,全局安装不需要单独引入
• svg 矢量图标 放大不变形，可以用 css 属性修改其样式

组件示例

可以设置size改变icon大小

<template>
  <adv-icon icon="leisure" size="2em"></adv-icon>
  <adv-icon icon="leisure" size="25"></adv-icon>
  <adv-icon icon="leisure" :size="35"></adv-icon>
  <adv-icon icon="leisure" size="25px"></adv-icon>
</template>

组件示例

可以设置颜色改变icon样式

<template>
  <adv-icon icon="leisure"></adv-icon>
  <adv-icon icon="leisure" color="var(--color-danger)"></adv-icon>
  <adv-icon icon="leisure" color="#bd34fe"></adv-icon>
</template>

组件示例

可以设置icon的旋转状态

<template>
  <adv-icon icon="leisure" loading size="25"></adv-icon>
  <adv-icon icon="loading" loading size="25"></adv-icon>
</template>

图标集合

接口模型

interface iconI {
  icon: string;
  size?: string | number;
  color?: string;
  loading?: boolean;
}

属性

属性	值	是否必填	默认值	说明
icon	string	是	无	icon 名称
color	string	否	inherit	icon 颜色
size	string | number	否	1em	icon 大小
loading	boolean	否	false	icon 旋转

插槽

插槽名	是否必填	默认值	说明
default	否		额外文字