IconFont 图标组件

基于 @ant-design/icons-vue 的 createFromIconfontCN 封装的图标渲染器，支持iconfont图标（常用）、antd内置图标、自定义传入图片等功能。

提示

你可以在 全局配置 中传入iconfontUrl

基础用法

支持 iconfont 和 antd 图标

Iconfont 图标

自定义大小和颜色

复制代码

查看代码

<template>
  <div class="icon-demo">
    <div class="demo-item">
      <div class="title">Iconfont 图标</div>
      <div class="icons">
        <s-icon-font type="user" />
        <s-icon-font type="home" />
        <s-icon-font type="setting" />
      </div>
    </div>
    <div class="demo-item">
      <div class="title">自定义大小和颜色</div>
      <div class="icons">
        <s-icon-font type="user" :size="20" color="#1890ff" />
        <s-icon-font type="home" :size="24" color="#52c41a" />
        <s-icon-font type="setting" :size="28" color="#faad14" />
      </div>
    </div>
  </div>
</template>

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

<style scoped>
.icon-demo {
  display: flex;
  gap: 24px;
}
.demo-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.title {
  font-size: 14px;
  color: #666;
}
.icons {
  display: flex;
  gap: 16px;
  align-items: center;
}
</style>

自定义渲染

支持自定义图标渲染和图片模块

自定义渲染函数

图片模块

复制代码

查看代码

<template>
  <div class="icon-demo">
    <div class="demo-item">
      <div class="title">自定义渲染函数</div>
      <div class="icons">
        <s-icon-font :icon-render="AlertOutlined" />
        <s-icon-font :icon-render="CustomIcon1" />
      </div>
    </div>
    <div class="demo-item">
      <div class="title">图片模块</div>
      <div class="icons">
        <s-icon-font
          img-module="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
          :img-style="{ width: '24px' }"
        />
        <s-icon-font
          img-module="https://gw.alipayobjects.com/zos/rmsportal/tXlLQhLvkEelMstLyHiN.svg"
          :img-style="{ width: '24px' }"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="tsx">

// antd 图标

import { AlertOutlined } from '@ant-design/icons-vue'

// 自定义图标组件

const CustomIcon1 = () => (
  <svg viewBox="64 64 896 896" width="1em" height="1em" fill="currentColor">
    <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" />
  </svg>
);
</script>

<style scoped>
.icon-demo {
  display: flex;
  gap: 24px;
}
.demo-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.title {
  font-size: 14px;
  color: #666;
}
.icons {
  display: flex;
  gap: 16px;
  align-items: center;
}
</style>

Props

参数	说明	类型	默认值
type	图标类型(iconfont渲染时用到)	string	-
prefix	图标样式前缀	string	'icon-'
color	图标颜色	string	-
size	图标大小	string | number	14
scriptUrl	自定义 iconfont 脚本地址(支持全局配置)	string[]	[]
imgModule	图片模块地址	string	-
imgStyle	图片样式	object	{}
iconRender	自定义图标渲染函数	Function	-