How to use it with React FontAwesome component?

Hello.

Would be great to replace icons with React FontAwesome component.

I have no idea what is the rbc rbc-* icons do you use into React Bulma component, for example, Dropdown component? But…

Code is:

import React, { Component } from 'react';

import Hero from 'react-bulma-components/lib/components/hero';
import Dropdown from 'react-bulma-components/lib/components/dropdown';

class SliderHero extends Component {
  render () {
    return (
      <Hero size="fullheight" color="link">
        <Hero.Body>
          <Dropdown hoverable>
            <Dropdown.Item value="item">
              Dropdown item
            </Dropdown.Item>
            <Dropdown.Item value="other">
              Other Dropdown item
            </Dropdown.Item>
            <Dropdown.Item value="active">
              Active Dropdown item
            </Dropdown.Item>
            <Dropdown.Item value="other 2">
              Other Dropdown item
            </Dropdown.Item>
            <Dropdown.Divider/>
            <Dropdown.Item value="divider">
              With divider
            </Dropdown.Item>
          </Dropdown>
        </Hero.Body>
      </Hero>
    );
  }
}

export default SliderHero;

HTML is:

<section className="hero is-link is-fullheight">
  <div className="hero-body">
    <div className="dropdown is-hoverable">
      <div className="dropdown-trigger" role="presentation">
        <a tabIndex="0" className="button">
          <span>Dropdown item</span>
          <span className="icon is-small"><i className="rbc rbc-angle-down"></i></span>
        </a>
      </div>
      <div className="dropdown-menu" id="dropdown-menu" role="menu">
        <div className="dropdown-content">
          <div title="item" role="presentation" className="dropdown-item">Dropdown item</div>
          <div title="other" role="presentation" className="dropdown-item">Other Dropdown item</div>
          <div title="active" role="presentation" className="dropdown-item">Active Dropdown item</div>
          <div title="other 2" role="presentation" className="dropdown-item">Other Dropdown item</div>
          <hr className="dropdown-divider">
          <div title="divider" role="presentation" className="dropdown-item">With divider</div>
        </div>
      </div>
    </div>
  </div>
</section>

And output is:

How to solve this OR use FontAwesome instead strange rbc-* icons? Please help me.

[LaRuaNa]

Honestly i also didn’t understand exactly how to use Icon component but this was my solution:

import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import Icon from 'react-bulma-components/lib/components/icon';
import faUserPlus from '@fortawesome/fontawesome-free-solid/faUserPlus';

<Icon>
            <FontAwesomeIcon icon={faUserPlus} />
</Icon>

[couds]

Hi @koddr Can you show me your webpack configuration and how are you importing the Dropdown component? (I was not able to replicate the missing icon).

About the icon set I only include the angle-down there are no icons inside the library that mean to be used externally, the idea of the Icon component its to be composed to generate the Icons you need your your project and avoid to be attached to a icon library.

If you want to use React-bulma-components with FA you can do it (see this example code https://github.com/couds/react-bulma-components-example/tree/font-awesome to get an idea).

btw: the class rbc-* its from React-Bulma-Components =)