电商网站的意义,wordpress 建站系统,wordpress首页打不开,学ui wordpress模板需求
最近在更新自己的博客系统#xff0c;从 vue2 升到 vue3#xff0c;同步的也把 ant-design 从 1.7.8 跨越多个大版本升级到了 4.0.8#xff0c;发现菜单上的 icon 报错了。
查询官方文档发现自从 2.0 版本以后的 icon 就不再支持通过 a-icon / 组件动态 type…需求
最近在更新自己的博客系统从 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 typeHeartTwoTone two-tone-color#eb2f96/
Icon typecheck-circle-two-tone two-tone-color#52c41a stylefont-size: 20px :spintrue/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();});
});
/scripttemplatecomponent :isicons[iconName] v-bind$attrs/component
/template注意仅支持 ant-design 原生的图标而且仅是 icon 图标不包含 svg 图标不支持 iconfont。
