XIcon 图标

VTJ 提供了一套常用的图标集合，包含SVG、Iconfont，它们都统一以Vue组件的形式使用。内置图标

示例

基础用法

图标组件的基础用法

<template>
  <XIcon :icon="InfoFilled"></XIcon>
</template>
<script lang="ts" setup>
  import { XIcon } from '@vtj/ui';
  import { InfoFilled } from '@vtj/icons';
</script>

定义尺寸

<template>
  <XIcon :icon="InfoFilled" size="large"></XIcon>
  <XIcon :icon="InfoFilled" size="default"></XIcon>
  <XIcon :icon="InfoFilled" size="small"></XIcon>
  <XIcon :icon="InfoFilled" :size="60"></XIcon>
</template>
<script lang="ts" setup>
  import { XIcon } from '@vtj/ui';
  import { InfoFilled } from '@vtj/icons';
</script>

定义颜色

<template>
  <XIcon
    :icon="InfoFilled"
    :size="40"
    color="#ff0000"
    background="gray"></XIcon>
</template>
<script lang="ts" setup>
  import { XIcon } from '@vtj/ui';
  import { InfoFilled } from '@vtj/icons';
</script>

定义边距、圆角

<template>
  <XIcon
    :icon="InfoFilled"
    :size="40"
    background="gray"
    :padding="10"
    :radius="4"></XIcon>
</template>
<script lang="ts" setup>
  import { XIcon } from '@vtj/ui';
  import { InfoFilled } from '@vtj/icons';
</script>

定义图标内容

?

<template>
  <XIcon :icon="InfoFilled" :size="40"></XIcon>
  <XIcon :icon="VtjIconApi" :size="40"></XIcon>
  <XIcon src="../../../assets/logo.png" :size="40"></XIcon>
  <XIcon :size="40">
    <i>?</i>
  </XIcon>
</template>
<script lang="ts" setup>
  import { XIcon } from '@vtj/ui';
  import { InfoFilled, VtjIconApi } from '@vtj/icons';
</script>

API

属性

属性名	说明	类型	默认值
icon	图标内容, 可以是element-plus/icons-vue的组件或内置的Iconfont样式名	string | object | VNode	-
color	颜色码	string	-
size	尺寸, 支持数字或固定值 inherit large default small	number | string	inherit
src	图片资源URL，单图标是图片形式是可用	string	-
background	背景颜色码	string	-
padding	内边距值	number	-
radius	圆角值	number	-

事件

名称	说明	参数
click	点击图标事件	-

插槽

插槽名	说明	类型
default	自定义图标内容	-

暴露

名称	说明	类型
无