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.

have you checked this out? fontawesome.com/how-to-use/on-the-web/using-with/react — Peter Ambruzs
– Peter Ambruzs, Commented Dec 18, 2018 at 7:59
ill check it out and let you know if it works . fingers crossed! — sriram hegde
– sriram hegde, Commented Dec 18, 2018 at 8:01
If you want to use multiple classnames, you can achieve it using something like: <div classNames={[styles['fa-user-circle'], styles['fas'] ].join(' ')} /> — nirazlatu
– nirazlatu, Commented Dec 18, 2018 at 8:05
Thanks it works but how do I customize I want to change its color and so on ? — sriram hegde
– sriram hegde, Commented Dec 18, 2018 at 8:05

Dhaval Patel · Accepted Answer · 2018-12-18 08:22:45Z

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.

answered Dec 18, 2018 at 8:22

Dhaval Patel

7,6116 gold badges43 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Combining CSS Classes in CSS Modules in React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related