Vue3/React 动态设置 ant-design/icons 图标

简介: Vue3/React 动态设置 ant-design/icons 图标
  • 图标 iconsVue3antdv 已经放弃 <a-icon type='xxx'> 的用法了,跟 React 一样使用 <PlusCircleFilled /> 这种标签方式,当需要像以前一样动态切换使用 icons 时,就不能通过修改 icon 名称切换图标了。
  • 现在希望在新的 icons 使用方式上,依然达到使用图片名称就能使用图标,下面以 react 的方式实现一下,Vue3 做法一样。
    1、新建一个 Icon.tsIcon.tsx 文件,相当于自己做一个 Icon 组件:
import React from 'react'
import * as icons from '@ant-design/icons'
const Icon = (props: { name: string }) => {
  const { name } = props
  const antIcon: { [key: string]: any } = icons
  return React.createElement(antIcon[name])
}
export default Icon
  • 2、使用
import Icon from './icon'
{/* 直接将 icon 全名完整填入即可 */}
<Icon name='PlusCircleFilled' />
{/* item.icon 为动态传入的标签名称 */}
<Icon name={item.icon} />
相关文章
|
2月前
|
JavaScript 前端开发 API
[译] 用 Vue 3 Composition API 实现 React Context/Provider 模式
[译] 用 Vue 3 Composition API 实现 React Context/Provider 模式
|
8天前
|
前端开发
React给antd中TreeSelect组件左侧加自定义图标icon
本文介绍了如何在React中为Ant Design的TreeSelect组件的每个树节点添加自定义图标,并解决了因缺少key属性而导致的警告问题,展示了如何通过递归函数处理treeData数据并为每个节点添加图标。
19 2
React给antd中TreeSelect组件左侧加自定义图标icon
|
1月前
|
前端开发 JavaScript
React技术栈-React UI之ant-design使用入门
关于React技术栈中使用ant-design库的入门教程,包括了创建React应用、搭建开发环境、配置按需加载、编写和运行代码的步骤,以及遇到错误的解决方法。
24 2
React技术栈-React UI之ant-design使用入门
|
3月前
|
前端开发
Vue3 【仿 react 的 hook】封装 useTitle
Vue3 【仿 react 的 hook】封装 useTitle
30 0
|
3月前
|
前端开发 API
Vue3 【仿 react 的 hook】封装 useLocation
Vue3 【仿 react 的 hook】封装 useLocation
26 0
|
5月前
|
存储 前端开发 数据可视化
构建基于React的动态数据可视化应用
【5月更文挑战第27天】构建基于React的动态数据可视化应用,通过Create React App快速搭建环境,使用Recharts等库封装组件。在`useState`和`useEffect` Hooks管理状态,处理动态数据。优化性能,添加交互功能,实现响应式设计,确保可访问性,打造高性能、用户体验佳的可视化应用。
|
5月前
|
前端开发 JavaScript Linux
relectron框架——打包前端vue3、react为pc端exe可执行程序
relectron框架——打包前端vue3、react为pc端exe可执行程序
147 1
|
5月前
|
JavaScript 前端开发
vue3中使用jsx报错React is not defined和h is not defined
vue3中使用jsx报错React is not defined和h is not defined
515 0
|
5月前
|
前端开发 API
【亮剑】在Web开发中,我们经常需要使用下拉选择框(Select)来让用户从多个选项中选择一个
【4月更文挑战第30天】在React Web开发中,创建下拉选择框通常使用`<select>`标签。要设置占位符,可添加一个`value=""`的`<option>`标签。
145 0
|
5月前
|
前端开发 JavaScript 安全
【亮剑】探讨了在React TypeScript应用中如何通过道具(props)传递CSS样式,以实现模块化、主题化和动态样式
【4月更文挑战第30天】本文探讨了在React TypeScript应用中如何通过道具(props)传递CSS样式,以实现模块化、主题化和动态样式。文章分为三部分:首先解释了样式传递的必要性,包括模块化、主题化和动态样式以及TypeScript集成。接着介绍了内联样式的基本用法和最佳实践,展示了一个使用内联样式自定义按钮颜色的例子。最后,讨论了使用CSS模块和TypeScript接口处理复杂样式的方案,强调了它们在组织和重用样式方面的优势。结合TypeScript,确保了样式的正确性和可维护性,为开发者提供了灵活的样式管理策略。
64 0
下一篇
无影云桌面