如何在React中将字符串映射为Font Awesome图标？

直接给你两种可行的实现方案，按需选择：

方案一：手动创建图标映射表（体积友好） #

如果你的图标数量不多，建议用这种方式，避免导入不必要的图标：

import { faSave, faEdit, faTrash } from '@fortawesome/pro-light-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

// 建立图标映射：键与item.iconName的字符串完全对应
const iconMap = {
  save: faSave,
  edit: faEdit,
  trash: faTrash
};

// 遍历生成目标数组
const tmpArray = icons.map(item => ({
  [item.iconName]: iconMap[item.iconName]
}));

方案二：批量导入+动态属性访问（便捷高效） #

如果需要处理大量图标，可通过批量导入的方式，用字符串动态匹配图标变量：

import * as AllIcons from '@fortawesome/pro-light-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { upperFirst, camelCase } from 'lodash'; // 或自定义工具函数实现大小写转换

const tmpArray = icons.map(item => {
  // 生成和Font Awesome图标变量一致的字符串（比如"save"转成"faSave"）
  const iconVariableName = `fa${upperFirst(camelCase(item.iconName))}`;
  // 通过对象属性访问获取实际图标对象
  return {
    [item.iconName]: AllIcons[iconVariableName]
  };
});

注意：这种方式会导入pro-light-svg-icons下的所有图标，可能增加打包体积，若对包体积敏感优先选方案一。

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