图标组件 - SIcon

动态渲染 @ant-design/icons-vue 图标组件，也支持渲染 iconfont 图标

演示

基本用法

基本用法

根据 type 动态渲染 @ant-design/icons-vue 图标组件，并支持 Icon 原有的 props

复制代码

显示代码

<template>
  <ASpace
    :size="15"
    :wrap="true"
  >
    <SIcon type="homeOutlined" />
    <SIcon type="smileOutlined" />

    <SIcon
      type="smileOutlined"
      :rotate="180"
    />

    <SIcon type="settingOutlined" />

    <SIcon
      type="syncOutlined"
      spin
    />

    <SIcon type="loadingOutlined" />
  </ASpace>
</template>

<script setup lang="ts">
</script>

多色图标

多色图标

双色图标可以通过 twoToneColor 属性设置主题色

复制代码

显示代码

<template>
  <ASpace
    :size="15"
    :wrap="true"
  >
    <SIcon type="smileTwoTone" />

    <SIcon
      type="heartTwoTone"
      twoToneColor="#eb2f96"
    />

    <SIcon
      type="checkCircleTwoTone"
      twoToneColor="#52c41a"
    />
  </ASpace>
</template>

<script setup lang="ts">
</script>

支持 iconfont

支持 iconfont

通过配置 iconPrefix 和 iconfontUrl, 实现 iconfont 图标的渲染 (iconfont.cn)

复制代码

显示代码

<template>
  <ASpace
    :size="15"
    :wrap="true"
  >
    <SIcon
      :iconPrefix="iconPrefix"
      :iconfontUrl="iconfontUrl"
      style="font-size: 16px; color: #808288;"
      type="font-product"
    />

    <SIcon
      :iconPrefix="iconPrefix"
      :iconfontUrl="iconfontUrl"
      style="font-size: 16px; color: #808288;"
      type="font-shop"
    />

    <SIcon
      :iconPrefix="iconPrefix"
      :iconfontUrl="iconfontUrl"
      style="font-size: 16px; color: #808288;"
      type="font-setting"
    />

    <SIcon
      :iconPrefix="iconPrefix"
      :iconfontUrl="iconfontUrl"
      style="font-size: 16px; color: #808288;"
      type="font-refresh"
      spin
    />
  </ASpace>
</template>

<script setup lang="ts">
const iconPrefix = 'font-'
const iconfontUrl = 'https://at.alicdn.com/t/c/font_1403293_zz95gjv9ru.js'
</script>

API

Props

参数	说明	类型	默认值
type	根据类型渲染 @ant-design/icons-vue 图标	string	-
spin	是否有旋转动画	boolean	false
rotate	图标旋转角度	number	-
iconPrefix	iconfont icon 标识符	string	-
iconfontUrl	iconfont url 地址	string	-
twoToneColor	仅适用双色图标, 设置图标主要颜色	string	-