Icon 图标

统一封装 Iconify、Element Plus 图标和本地 SVG 的图标组件。

基础示例

示例使用本地演示数据；上传、校验和提交不会连接业务后端。

<script setup lang="ts">
import { ref, } from "vue";
import { Icon } from "@/components/core/icon";

const demoProps = { icon: "ep:search", size: 28 };
</script>

<template>
  <ClientOnly>
    <div class="demo-surface">
      <Icon v-bind="demoProps"></Icon>
    </div>
  </ClientOnly>
</template>

隐藏源代码

引入方式

import {
  SvgIcon,
  FontIcon,
  IconifyOnline,
  IconifyOffline,
  addCollection,
  addIcon,
  IconifyIcon,
  listIcons,
  Icon,
} from "@/components/core/icon";

Props

参数	说明	类型	默认值	必填
icon	图标	CommonIcon	-	否
iconType	图标类型	CommonIconType	-	否
size	图标大小	string | number	'inherit'	否
color	图标颜色	string	'inherit'	否
hover	图标是否可悬停	boolean	false	否
hoverColor	图标悬停时的颜色，仅当 hover 为 true 时有效	string	-	否
imgAlt	img 标签的 alt，当 iconType 为 img 时生效	string	-	否
pointer	是否使用鼠标手形	boolean	-	否
style	自定义图标样式	Recordable	-	否

Events

事件名	说明	回调参数
-	该组件未声明 Events。	-

Slots

插槽名	说明	参数
default	默认内容插槽。	-

Expose

名称	说明	类型
-	该组件未声明 Expose。	-

Module API

名称	说明	类型
Icon	导出 Icon 供业务侧复用。	useInstall(index)

Types

IconProps

导出 IconProps 供业务侧复用。

字段	说明	类型	默认值	必填
icon	图标	CommonIcon	-	否
iconType	图标类型	CommonIconType	-	否
size	图标大小	string | number	'inherit'	否
color	图标颜色	string	'inherit'	否
hover	图标是否可悬停	boolean	false	否
hoverColor	图标悬停时的颜色，仅当 hover 为 true 时有效	string	-	否
imgAlt	img 标签的 alt，当 iconType 为 img 时生效	string	-	否
pointer	是否使用鼠标手形	boolean	-	否
style	自定义图标样式	Recordable	-	否

API 根据当前组件源码生成；同步版本与验证记录见维护说明。