高版本ant-design动态引用icon

需求

最近在更新自己的博客系统,从 vue2 升到 vue3,同步的也把 ant-design 从 1.7.8 跨越多个大版本升级到了 4.0.8,发现菜单上的 icon 报错了。

查询官方文档发现自从 2.0 版本以后的 icon 就不再支持通过 <a-icon /> 组件动态 type 的方式引入 icon 了。

但是目录这个部分不可能是写死的 icon。

解决方案

下载 ant-design/icons-vue 项目发现所有的图标都作为导出出现在项目中,故使用 import * 的方式进行全部引入,再通过动态组件的方式进行加载即可。

使用方法

javascript 复制代码
<Icon type="HeartTwoTone" two-tone-color="#eb2f96"/>
<Icon type="check-circle-two-tone" two-tone-color="#52c41a" style="font-size: 20px" :spin="true"/>

API

  1. 支持"大驼峰式"组件写法
  2. 支持"短横线"分隔组件写法
  3. 支持 rotate【图标旋转角度】
  4. 支持 spin 【是否有旋转动画】
  5. 支持 style 【设置图标的样式】
  6. 支持 twoToneColor 【仅适用双色图标。设置双色图标的主要颜色】

组件源码

javascript 复制代码
<script setup>
import {computed, defineProps} from "vue";
import * as icons from "@ant-design/icons-vue";

const props = defineProps({
    // icon图标名称
    type: {
        type: String,
        default: 'FireOutlined'
    }
});

/** 转化icon名称 */
const iconName = computed(() => {
    if (!props.type.includes("-")) {
        return props.type;
    }
    return props.type.charAt(0).toUpperCase() + props.type.slice(1).replace(/-([a-z])/g, function (g) {
        return g[1].toUpperCase();
    });
});
</script>

<template>
    <component :is="icons[iconName]" v-bind="$attrs"></component>
</template>

注意:仅支持 ant-design 原生的图标,而且仅是 icon 图标,不包含 svg 图标,不支持 iconfont。

相关推荐
90后的晨仔1 天前
Vue 3 组合式函数(Composables)全面解析:从原理到实战
前端·vue.js
今天头发还在吗1 天前
【React】动态SVG连接线实现:图片与按钮的可视化映射
前端·javascript·react.js·typescript·前端框架
小刘不知道叫啥1 天前
React 源码揭秘 | suspense 和 unwind流程
前端·javascript·react.js
szial1 天前
为什么 React 推荐 “不可变更新”:深入理解 React 的核心设计理念
前端·react.js·前端框架
mapbar_front1 天前
面试是一门学问
前端·面试
90后的晨仔1 天前
Vue 3 中 Provide / Inject 在异步时不起作用原因分析(二)?
前端·vue.js
90后的晨仔1 天前
Vue 3 中 Provide / Inject 在异步时不起作用原因分析(一)?
前端·vue.js
90后的晨仔1 天前
Vue 异步组件(defineAsyncComponent)全指南:写给新手的小白实战笔记
前端·vue.js
木易 士心1 天前
Vue 与 React 深度对比:底层原理、开发体验与实际性能
前端·javascript·vue.js
冷冷的菜哥1 天前
react多文件分片上传——支持拖拽与进度展示
前端·react.js·typescript·多文件上传·分片上传