FmIcon 图标组件

统一的图标组件，支持 UnoCSS 图标类、Iconify、SVG 雪碧图和外部图片 URL 四种图标来源。

基础用法

<template>
  <FmIcon name="i-lucide:search" />
  <FmIcon name="heroicons:information-circle" />
</template>

Props

属性	类型	默认值	说明
name	string	必需	图标名称（支持多种格式）
transition	boolean	false	是否开启图标切换动画
class	HTMLAttributes['class']	-	自定义 CSS 类

图标格式说明

格式	示例	说明
UnoCSS	i-lucide:search	使用 UnoCSS 图标类
Iconify	heroicons:information-circle	使用 Iconify 在线图标
SVG 雪碧图	#icon-my-icon	使用项目内 SVG 雪碧图
图片 URL	https://example.com/icon.svg 或 /assets/icon.svg	使用外部图片或本地图片

Slots

无

Events

无

示例

UnoCSS 图标（推荐）

<template>
  <FmIcon name="i-lucide:home" />
  <FmIcon name="i-ri:user-line" />
  <FmIcon name="i-ant-design:search-outlined" />
</template>

Iconify 图标

<template>
  <FmIcon name="heroicons:academic-cap" />
  <FmIcon name="ph:bell" />
</template>

SVG 雪碧图

先在项目中引入 SVG 雪碧图，然后使用：

<template>
  <FmIcon name="#icon-custom" />
</template>

图片图标

<template>
  <!-- 网络图片 -->
  <FmIcon name="https://example.com/icon.svg" />

  <!-- 本地图片 -->
  <FmIcon name="/assets/icons/logo.svg" />
  <FmIcon name="./icon.png" />
</template>

自定义尺寸和颜色

<template>
  <!-- 通过 class 控制尺寸 -->
  <FmIcon name="i-lucide:search" class="text-xl" />
  <FmIcon name="i-lucide:home" class="size-6" />

  <!-- 通过 class 控制颜色 -->
  <FmIcon name="i-lucide:heart" class="text-red-500" />
  <FmIcon name="i-lucide:star" class="text-yellow-500" />
</template>

动态图标

<script setup lang="ts">
const isActive = ref(false)
</script>

<template>
  <!-- 默认：直接切换，无动画 -->
  <FmIcon :name="isActive ? 'i-lucide:star' : 'i-lucide:star-outline'" />

  <!-- 开启切换动画 -->
  <FmIcon :name="isActive ? 'i-lucide:star' : 'i-lucide:star-outline'" transition />
</template>

带点击事件的图标

<template>
  <FmIcon name="i-lucide:trash-2" class="cursor-pointer hover:text-destructive" @click="handleDelete" />
</template>

注意事项

1. 图标尺寸：图标默认尺寸为 1em，可通过父元素的 font-size 或图标的 class 控制
2. 图标颜色：使用 currentColor，继承父元素的文字颜色
3. 加载状态：使用图片 URL 时，加载失败会显示破损图片图标
4. 切换动画：默认图标切换时无动画，可通过 transition prop 开启翻转动画（0.2s）

典型使用场景

• 按钮图标
• 导航菜单图标
• 状态指示图标
• 操作图标（编辑、删除、查看等）
• 表单装饰图标