CODEWITHSUNDEEP
reactjsfont-awesome
Juliatzin
Juliatzin

Reputation: 19695

Using fontawesome icon intead of Material Design icon in a react component

I'm trying to use this timeline plugin with React:

This works well, but the plugin use Material Design icons, here is a demo example.

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

Problem is I want to use fontAwesome Icon

So, I did: 

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

And using it:

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

But I get:

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)

I also tried to use it without tag:

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

But now I have no more error, but it doesn't show anyway.

Any idea how to fix it ?

Upvotes: 0

Views: 1307

Answers (1)

MjZac
MjZac

Reputation: 3526

You have to install react-fontawesome package.

npm i --save @fortawesome/react-fontawesome

Then you can include icons like:

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>
    );
  }
}

To use in VerticalTimelineElement, you can just pass the <FontAwesomeIcon icon={faBuilding} /> as icon prop.

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

Upvotes: 3

Related Questions