Question

我在React Project中使用FontAwesome作为图标，这就是我通常显示图标的方式

<FontAwesomeIcon icon={stroopwafel} />

我有一个组件库，所有必需的组件都从FA库中导入并导出到基础项目中

现在有一种情况是，图标名称作为道具从父组件中向下传递

<AccordionPanel id='favFood' title='Fav Food' icon='stroopwafel'>
  ....
</AccordionPanel>

现在我的孩子手风琴面板组件需要显示它

const { id, title, icon} = this.props

     <Panel.Heading>
         <Panel.Title toggle>
            <Icon icon={icon} color='orange'/> 
         </Panel.Title>
     </Panel.Heading>

但这似乎不起作用。知道怎么了吗？

Answer 1

FontAwesome图标需要前缀：<i class="fas fa-stroopwafel"></i> 这是来自最新的FA：https://fontawesome.com/icons/stroopwafel?style=solid 如果使用旧版本的FA，则可能需要不同的前缀。尝试通过“ fas fa-stroopwafel”而不是“ stroopwafel”作为图标道具。

具有响应功能的Font Awesome，如何显示作为道具传递的图标

1 个答案: