Combining CSS Classes in CSS Modules in React

Question

I am using Fontawesome icons in my react and I am using CSS modules in react. Now I want to use this Icon so I am using the following syntax : <i className={styles['fa-user-circle']} ></i> I cant use normal syntax styles.someClassName because of hyphens in the name of fontawesome icons and also I need to combine fas and fa-user-circle classNames . How do I do that?

Thanks.

Answer 1

You can use the FontAwesome React version here

Implementation of it looks like

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faPlus } from '@fortawesome/free-solid-svg-icons'

and your render component looks like

 export default (props) => {
  return (
    <div>
      <FontAwesomeIcon icon={faPlus} className="pointer" onClick={props.onAdd} id={props.id} />
    </div>
 )
}

As you can see className we can give so whatever the extra CSS you want to give you can.