Использование fontawesome значка intead значка Material Design в компоненте реагирования - PullRequest
Новая
       5

Использование fontawesome значка intead значка Material Design в компоненте реагирования

0 голосов
/ 09 апреля 2020

Я пытаюсь использовать этот плагин временной шкалы с 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}
    >

Но теперь у меня больше нет ошибки, но это не так все равно не показывать.

Есть идеи как это исправить?

1 Ответ

1 голос
/ 09 апреля 2020

Вы должны установить 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 prop. 

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