IconRenderer 图标渲染器

统一的图标渲染组件，自动检测图标来源并选择正确的渲染方式。支持 ionicons5 图标、本地 CSS 图标类名、本地图片、上传图片和占位回退。

基本用法

<template>
  <!-- ionicons5 图标 -->
  <IconRenderer icon="ionicons5:Home" :font-size="24" color="#2080f0" />

  <!-- 本地 CSS 图标 -->
  <IconRenderer icon="i-carbon-settings" />

  <!-- 本地图片 -->
  <IconRenderer icon="local-image:logo.png" :size="32" />

  <!-- 纯图标名（先尝试 ionicons5 匹配） -->
  <IconRenderer icon="Person" />
</template>

<script setup>
import { IconRenderer } from '@/components'
</script>

使用 fileId / URL

<IconRenderer icon="file_abc123" :size="48" placeholder="?" />
<IconRenderer icon="https://example.com/icon.png" />

Props

属性	类型	默认值	说明
icon	String	''	图标标识符，支持多种格式（见下方说明）
size	String | Number	''	图标大小，优先于 fontSize
fontSize	String | Number	'18'	字体图标大小
color	String	''	图标颜色
customClass	String	'text'	自定义 CSS 类名
customStyle	String | Object	''	自定义内联样式
placeholder	String	''	图标无法渲染时的占位文本

图标来源识别规则

格式	渲染方式	示例
ionicons5:Name	ionicons5 组件	icon="ionicons5:Home"
local:iconName	本地 CSS 图标	icon="local:menu"
i-xxx	本地 CSS 图标类名	icon="i-carbon-settings"
local-image:file.png	本地图片（@/assets/icons/image-icons/）	icon="local-image:logo.png"
fileId	通过 API 解析为图片 URL	icon="file_abc123"
http(s)😕/...	直接作为图片 URL	icon="https://..."
data:image/...	直接作为图片 src	icon="data:image/png;base64,..."
纯图标名	先匹配 ionicons5，失败则作 CSS 类名	icon="Home"