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} />
相关文章
|
4月前
|
前端开发 JavaScript UED
React 图标库使用指南
本文详细介绍如何在 React 项目中使用 `react-icons` 等图标库,涵盖环境搭建、基础使用、常见问题与易错点、高级用法等内容,并通过代码案例进行说明。适合初学者和进阶开发者参考。
193 8
|
7月前
|
JavaScript 前端开发 API
[译] 用 Vue 3 Composition API 实现 React Context/Provider 模式
[译] 用 Vue 3 Composition API 实现 React Context/Provider 模式
|
6月前
|
前端开发
React给antd中TreeSelect组件左侧加自定义图标icon
本文介绍了如何在React中为Ant Design的TreeSelect组件的每个树节点添加自定义图标,并解决了因缺少key属性而导致的警告问题,展示了如何通过递归函数处理treeData数据并为每个节点添加图标。
275 2
React给antd中TreeSelect组件左侧加自定义图标icon
|
6月前
|
前端开发 JavaScript
React技术栈-React UI之ant-design使用入门
关于React技术栈中使用ant-design库的入门教程,包括了创建React应用、搭建开发环境、配置按需加载、编写和运行代码的步骤,以及遇到错误的解决方法。
69 2
React技术栈-React UI之ant-design使用入门
|
10月前
|
存储 前端开发 数据可视化
构建基于React的动态数据可视化应用
【5月更文挑战第27天】构建基于React的动态数据可视化应用,通过Create React App快速搭建环境,使用Recharts等库封装组件。在`useState`和`useEffect` Hooks管理状态,处理动态数据。优化性能,添加交互功能,实现响应式设计,确保可访问性,打造高性能、用户体验佳的可视化应用。
|
8月前
|
前端开发
Vue3 【仿 react 的 hook】封装 useTitle
Vue3 【仿 react 的 hook】封装 useTitle
77 0
|
8月前
|
前端开发 API
Vue3 【仿 react 的 hook】封装 useLocation
Vue3 【仿 react 的 hook】封装 useLocation
61 0
|
10月前
|
前端开发 JavaScript Linux
relectron框架——打包前端vue3、react为pc端exe可执行程序
relectron框架——打包前端vue3、react为pc端exe可执行程序
211 1
|
10月前
|
JavaScript 前端开发
vue3中使用jsx报错React is not defined和h is not defined
vue3中使用jsx报错React is not defined和h is not defined
1132 0
|
10月前
|
前端开发 API
【亮剑】在Web开发中,我们经常需要使用下拉选择框(Select)来让用户从多个选项中选择一个
【4月更文挑战第30天】在React Web开发中,创建下拉选择框通常使用`<select>`标签。要设置占位符,可添加一个`value=""`的`<option>`标签。
292 0