Объединение CSS-классов в CSS-модулях в React

Question

Я использую иконки Fontawesome в своей реакции, и я использую модули CSS в реакции. Теперь я хочу использовать этот значок, поэтому я использую следующий синтаксис: <i className={styles['fa-user-circle']} ></i>Я не могу использовать нормальный синтаксис styles.someClassName из-за дефисов в названии красивых иконок, а также мне нужно объединить fas и fa-user-circle classNames . Как я могу это сделать?

Благодарю.

Answer 1

Вы можете использовать версию FontAwesome React здесь

Реализация выглядит так

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

и ваш компонент рендеринга выглядит так

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

Как вы можете видеть в className, мы можем дать любой дополнительный CSS, который вы хотите дать.