在反应组件中使用字体真棒图标而不是 Material Design 图标

Question

我正在尝试将 this timeline plugin 与 React 一起使用：

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

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

问题是我想使用 fontAwesome Icon

所以，我做到了：

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} />} />