如何在React按钮组件中通过图标名称使用react-feather图标？

要实现直接传入字符串形式的图标名称来渲染react-feather图标，你可以通过图标映射表的方式来处理，具体步骤如下：

修改AppButton组件 #

在组件内部维护一个字符串与react-feather图标的映射关系，根据传入的icon字符串动态渲染对应的图标组件：

import React from 'react';
import { Plus, Settings } from 'react-feather';

// 建立图标名称与组件的映射表，键名要和react-feather的组件名完全一致
const iconMap = {
  Plus,
  Settings
};

function AppButton({ icon, text, onclick, iconSize = 20 }) {
  // 根据传入的图标名称获取对应的组件
  const IconComponent = iconMap[icon];

  return (
    <div className="button" onClick={onclick}>
      {/* 仅当存在对应图标组件时才渲染 */}
      {IconComponent && <IconComponent size={iconSize} />}
      <span>{text}</span>
    </div>
  );
}

export default AppButton;

调用组件 #

现在你可以直接传入字符串形式的图标名称，还能通过iconSize属性自定义图标大小：

import AppButton from './component/AppButton';

function App() {
  return (
    <main className="app">
      <div>
        <AppButton icon="Settings" text="Settings" onclick={()=>console.log("clicked")}/>
        <AppButton icon="Plus" text="Add" iconSize={24} onclick={()=>console.log("add clicked")}/>
      </div>
    </main>
  );
}

export default App;

补充说明 #

• 后续需要新增图标时，只需在iconMap中添加对应的键值对，同时导入对应的react-feather组件即可；
• 如果传入的图标名称在映射表中不存在，组件会自动跳过图标渲染，避免报错；
• iconSize设置了默认值20，你也可以在调用组件时传入自定义值覆盖默认设置。

内容的提问来源于stack exchange，提问作者rens