在react组件中使用"材质设计"图标的内部字体图标

Question

我正在尝试将这个时间线插件与React:一起使用

这很好，但插件使用了Material Design图标，这里是一个演示示例。

https://github.com/stephane-monnot/react-vertical-timeline/blob/master/docs/index.js#L50

问题是我想使用fontAwesome图标

所以，我做到了：

import { buildingIcon } from '@fortawesome/free-solid-svg-icons/faBuilding'

使用它：

<VerticalTimelineElement
className="vertical-timeline-element--work"
contentStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
contentArrowStyle={{ borderRight: '7px solid  rgb(33, 150, 243)' }}
date="2016"
iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
icon={<buildingIcon />}
>

但我得到了：

index.js:1375 Warning: <buildingIcon /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
in buildingIcon (at TeamLayout.js:246)
in span (created by VerticalTimelineElement)
in div (created by VerticalTimelineElement)
in VisibilitySensor (created by VerticalTimelineElement)
in div (created by VerticalTimelineElement)
in VerticalTimelineElement (at TeamLayout.js:240)
in div (created by VerticalTimeline)
in VerticalTimeline (at TeamLayout.js:239)
in div (at TeamLayout.js:238)
in div (at TeamLayout.js:41)
in main (at TeamLayout.js:40)
in div (at TeamLayout.js:34)
in TeamLayout (at App.js:18)
in Route (at App.js:17)
in Switch (at App.js:13)
in div (at App.js:12)
in Router (created by BrowserRouter)
in BrowserRouter (at App.js:11)
in App (at src/index.js:8)
console.<computed> @ index.js:1375
printWarning @ react-dom.development.js:89
error @ react-dom.development.js:61
createElement @ react-dom.development.js:5880
createInstance @ react-dom.development.js:7499
completeWork @ react-dom.development.js:18858
completeUnitOfWork @ react-dom.development.js:22054
performUnitOfWork @ react-dom.development.js:22027
workLoopSync @ react-dom.development.js:21992
performSyncWorkOnRoot @ react-dom.development.js:21610
scheduleUpdateOnFiber @ react-dom.development.js:21042
updateContainer @ react-dom.development.js:24191
(anonymous) @ react-dom.development.js:24574
unbatchedUpdates @ react-dom.development.js:21760
legacyRenderSubtreeIntoContainer @ react-dom.development.js:24573
render @ react-dom.development.js:24656
./src/index.js @ index.js:8
__webpack_require__ @ bootstrap:785
fn @ bootstrap:150
0 @ serviceWorker.js:135
__webpack_require__ @ bootstrap:785
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
index.js:1375 Warning: The tag <buildingIcon> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
in buildingIcon (at TeamLayout.js:246)
in span (created by VerticalTimelineElement)
in div (created by VerticalTimelineElement)
in VisibilitySensor (created by VerticalTimelineElement)
in div (created by VerticalTimelineElement)
in VerticalTimelineElement (at TeamLayout.js:240)
in div (created by VerticalTimeline)
in VerticalTimeline (at TeamLayout.js:239)
in div (at TeamLayout.js:238)
in div (at TeamLayout.js:41)
in main (at TeamLayout.js:40)
in div (at TeamLayout.js:34)
in TeamLayout (at App.js:18)
in Route (at App.js:17)
in Switch (at App.js:13)
in div (at App.js:12)
in Router (created by BrowserRouter)
in BrowserRouter (at App.js:11)
in App (at src/index.js:8)

我还试着在没有标签的情况下使用它：

<VerticalTimelineElement
className="vertical-timeline-element--work"
contentStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
contentArrowStyle={{ borderRight: '7px solid  rgb(33, 150, 243)' }}
date="2016"
iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
icon={buildingIcon}
>

但现在我没有更多的错误，但它无论如何都没有显示出来。

知道怎么修吗？

Answer 1

您必须安装react-fontawesome软件包。

npm i --save @fortawesome/react-fontawesome

然后你可以包括像这样的图标：

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faBuilding } from '@fortawesome/free-solid-svg-icons'
class App extends Component {
render() {
return (
<div className="App">
<h1>
<FontAwesomeIcon icon={faBuilding} />
</h1>
</div>
);
}
}

要在VerticalTimelineElement中使用，只需将<FontAwesomeIcon icon={faBuilding} />作为icon道具传递即可。

<VerticalTimelineElement ... 
icon={<FontAwesomeIcon icon={faBuilding} />} />