❮
EDA All-in-one

Appearance

YqIcon

YqIcon 的核心是通过 icon prop 指定要显示的图标。

1 基本图标

使用 icon 属性指定 Font Awesome 图标的类名。

  • 用法： icon="fa-solid fa-icon-name" (或 fa-regular, fa-brands 等)
  • 示例：
vue
<template>
  <!-- 实心图标 -->
  <YqIcon icon="fa-solid fa-home"></YqIcon>
  <!-- 常规图标 (边框) -->
  <YqIcon icon="fa-regular fa-font-awesome"></YqIcon>
  <!-- 品牌图标 -->
  <YqIcon icon="fa-brands fa-shoelace"></YqIcon>
</template>

2 自定义颜色 (color)

通过 color 属性可以直接设置图标的 CSS 颜色。

  • 用法： color="red" 或 color="#007bff"
  • 示例：
vue
<template>
  <YqIcon icon="fa-solid fa-heart" color="red"></YqIcon>
  <YqIcon icon="fa-solid fa-cog" color="#007bff"></YqIcon>
</template>

3.3 类型化颜色 (type)

YqIcon 提供了一个 type 属性，可以快速应用预设的主题颜色。这在保持应用整体视觉一致性时非常方便。

  • 可选值： primary, success, warning, danger, info
  • 示例：
vue
<template>
  <YqIcon icon="fa-solid fa-star" type="primary"></YqIcon>
  <YqIcon icon="fa-solid fa-check-circle" type="success"></YqIcon>
  <YqIcon icon="fa-solid fa-exclamation-triangle" type="warning"></YqIcon>
  <YqIcon icon="fa-solid fa-times-circle" type="danger"></YqIcon>
  <YqIcon icon="fa-solid fa-info-circle" type="info"></YqIcon>
</template>

重要提示：
如果同时设置了 color 和 type 属性，color 属性将具有更高的优先级，会覆盖 type 属性的默认颜色。

3.4 图标尺寸 (size)

通过 size 属性可以控制图标的大小，以匹配不同的文本或布局需求。

  • 可选值： '2xs', 'xs', 'sm', 'lg', 'xl', '2xl'，以及 Font Awesome 的数字倍数 '1x' 到 '10x'。
  • 示例：
vue
<template>
  <YqIcon icon="fa-solid fa-spinner" size="xs"></YqIcon>
  <YqIcon icon="fa-solid fa-spinner" size="sm"></YqIcon>
  <YqIcon icon="fa-solid fa-spinner" size="lg"></YqIcon>
  <YqIcon icon="fa-solid fa-spinner" size="xl"></YqIcon>
  <YqIcon icon="fa-solid fa-spinner" size="2xl"></YqIcon>
  <YqIcon icon="fa-solid fa-spinner" size="3x"></YqIcon>
  <!-- 使用数字倍数 -->
</template>

4. 图标动画与效果

YqIcon 支持 Font Awesome 提供的多种内置动画效果，为界面增加动态活力。

4.1 旋转动画 (spin)

使图标持续进行 360 度旋转。

  • 用法： 添加 spin 属性。
  • 示例：
vue
<template>
  <YqIcon icon="fa-solid fa-spinner" spin></YqIcon>
</template>

4.2 脉冲动画 (pulse)

图标会旋转一圈并短暂暂停，然后重复播放。

  • 用法： 添加 pulse 属性。
  • 示例：
vue
<template>
  <YqIcon icon="fa-solid fa-sync" pulse></YqIcon>
</template>

4.3 其他动画效果

YqIcon 还支持更多动画，如 beat（节拍）、shake（摇晃）、fade（淡入淡出）、beatFade（节拍+淡入淡出）、spinPulse（旋转+脉冲）等。

  • 用法： 直接添加相应的属性。
  • 示例：
vue
<template>
  <YqIcon icon="fa-solid fa-heartbeat" beat></YqIcon>
  <YqIcon icon="fa-solid fa-star" shake></YqIcon>
  <YqIcon icon="fa-solid fa-sun" fade></YqIcon>
</template>

4.4 图标变换 (flip, rotation, pull)

4.4.1 flip

允许图标水平、垂直或双向翻转。

用法： flip="horizontal" 或 flip="vertical"。
示例：

vue
<template>
  <YqIcon icon="fa-solid fa-arrow-right" flip="horizontal"></YqIcon>
  <YqIcon icon="fa-solid fa-arrow-right" flip="vertical"></YqIcon>
</template>

4.4.2 rotation

旋转图标，支持 90, 180, 270 度。

用法： rotation={90} 或 rotation={180}。

示例： <YqIcon icon="fa-solid fa-redo" rotation={90}></YqIcon>

vue
<template>
  <YqIcon icon="fa-solid fa-arrow-right" rotation="{90}"></YqIcon>
  <YqIcon icon="fa-solid fa-arrow-right" rotation="{180}"></YqIcon>
  <YqIcon icon="fa-solid fa-arrow-right" rotation="{270}"></YqIcon>
</template>

4.4.3 pull

使图标向左或右偏移，常用于与文本对齐。
用法： pull="left" 或 pull="right"。
示例：

vue
<template>
  <YqIcon icon="fa-solid fa-angle-right" pull="right"></YqIcon>
  <YqIcon icon="fa-solid fa-angle-right" pull="left"></YqIcon>
</template>

5. 高级特性与属性

5.1 添加边框 (border)

为图标添加一个轻微的边框。

  • 用法： 添加 border 属性。
  • 示例： <YqIcon icon="fa-solid fa-info-circle" border></YqIcon>
vue
<template>
  <YqIcon icon="fa-solid fa-info-circle" border></YqIcon>
</template>

5.2 固定宽度 (fixedWidth)

设置固定宽度，使图标在列表布局中对齐。

  • 用法： 添加 fixedWidth 属性。
  • 示例：
vue
<template>
  <YqIcon icon="fa-solid fa-bars" fixedWidth></YqIcon>
</template>

5.3 属性透传 (v-bind="$attrs")

YqIcon 组件允许你将任何标准的 HTML 属性（如 id, class, title, aria-label 等）直接传递给图标的根元素（<i> 标签）。这对于提高组件的可访问性和集成性非常重要。

  • 用法： 直接在 <YqIcon> 标签上添加属性。
  • 示例：
vue
<template>
  <!-- title 属性会显示在鼠标悬停时 -->
  <YqIcon icon="fa-solid fa-search" title="搜索图标"></YqIcon>
  <!-- aria-label 对于屏幕阅读器等辅助技术非常重要 -->
  <YqIcon icon="fa-solid fa-camera" aria-label="相机图标"></YqIcon>
</template>

5.4 使用遮罩 (mask)

可以为图标应用一个遮罩层，产生特殊效果。

  • 用法： mask="fa-regular fa-circle"
  • 示例： ``
vue
<template>
  <YqIcon icon="fa-solid fa-star"></YqIcon>
  <YqIcon icon="fa-solid fa-star" mask="fa-regular fa-circle"></YqIcon>
</template>

6. 属性概览

属性名说明类型默认值
iconFont Awesome 图标名称或定义（必需）object | Array<string> | string | IconDefinitionundefined
color图标的 CSS 颜色值stringundefined
type组件预设的类型颜色（primary, success, warning, danger, info）"primary" | "success" | "warning" | "danger" | "info"undefined
size图标尺寸（xs, sm, lg, xl, 2xl, 1x-10x 等）'2xs' | 'xs' | 'sm' | 'lg' | 'xl' | '2xl' | '1x' | ... | '10x'undefined
spin是否应用旋转动画booleanfalse
pulse是否应用脉冲动画booleanfalse
beat是否应用节拍动画booleanfalse
shake是否应用摇晃动画booleanfalse
fade是否应用淡入淡出动画booleanfalse
beatFade是否应用节拍并淡入淡出动画booleanfalse
spinPulse是否应用旋转并脉冲动画booleanfalse
spinReverse是否反向旋转动画booleanfalse
border是否添加边框booleanfalse
fixedWidth是否固定图标宽度booleanfalse
flip图标翻转方向（horizontal, vertical, both）'horizontal' | 'vertical' | 'both'undefined
rotation图标旋转角度（90, 180, 270）90 | 180 | 270 | '90' | '180' | '270'undefined
mask应用的遮罩图标object | Array<string> | stringundefined
listItem是否用于列表项booleanfalse
pull图标向左或右偏移（left, right）'right' | 'left'undefined
swapOpacity交换遮罩和图标的透明度booleanfalse
symbol是否使用 <symbol> 元素渲染图标boolean | stringundefined
title图标的 title 属性，用于可访问性stringundefined
inverse反转图标颜色booleanfalse