高版本ant-design动态引用icon
2024-01-07 19:08:58
需求
最近在更新自己的博客系统,从 vue2 升到 vue3,同步的也把 ant-design 从 1.7.8 跨越多个大版本升级到了 4.0.8,发现菜单上的 icon 报错了。
查询官方文档发现自从 2.0 版本以后的 icon 就不再支持通过 <a-icon /> 组件动态 type 的方式引入 icon 了。
但是目录这个部分不可能是写死的 icon。
解决方案
下载 ant-design/icons-vue 项目发现所有的图标都作为导出出现在项目中,故使用 import * 的方式进行全部引入,再通过动态组件的方式进行加载即可。
使用方法
<Icon type="HeartTwoTone" two-tone-color="#eb2f96"/>
<Icon type="check-circle-two-tone" two-tone-color="#52c41a" style="font-size: 20px" :spin="true"/>
API
- 支持“大驼峰式”组件写法
- 支持“短横线”分隔组件写法
- 支持 rotate【图标旋转角度】
- 支持 spin 【是否有旋转动画】
- 支持 style 【设置图标的样式】
- 支持 twoToneColor 【仅适用双色图标。设置双色图标的主要颜色】
组件源码
<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。
文章来源:https://blog.csdn.net/Feng_ye__/article/details/135422452
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!