React中使用map渲染FontAwesome图标不显示问题求助

你的问题出在Menus数组中图标值的定义方式：你用{faChartSimple}这种包裹格式，会把icon变成一个包含该图标的对象（例如{ faChartSimple: faChartSimple }），而FontAwesomeIcon组件需要直接传入图标本身，不是对象。

修正步骤： #

把Menus数组里每个icon的值从{faXXX}改成直接写faXXX即可：

const Menus = [
    { title: "Dashboard", icon: faChartSimple, route: "/" },
    { title: "Experiment", icon: faFlask, route: "/experiment", gap: true },
    { title: "Lab", icon: faCode, route: "/lab" },
    { title: "Account", icon: faUser, route: "/account", gap:true },
    { title: "Setting", icon: faGear, route: "/setting" }, // 顺便修正路由路径，加上开头斜杠避免跳转异常
    { title: "Logout", icon: faRightFromBracket, route: "/logout" },
]

为什么直接写faCoffee能正常显示？ #

因为直接传入faCoffee时，你传递的是从@fortawesome/free-solid-svg-icons导入的图标本身（一个符合组件要求的SVG对象），而不是包裹它的对象。

修正后，map渲染时menu.icon就会正确传递图标给FontAwesomeIcon组件，图标就能正常显示了。

内容的提问来源于stack exchange，提问作者P.Chian