Question

我在React中使用Fontawesome图标，在React中使用CSS模块。现在，我想使用此图标，因此使用以下语法：<i className={styles['fa-user-circle']} ></i> 由于fontawesome图标名称中的连字符，我无法使用常规语法styles.someClassName，而且我还需要组合fas和fa-user-circle classNames。我该怎么办？

谢谢。

Answer 1

您可以使用FontAwesome React版本here

它的实现看起来像

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。

在React中的CSS模块中组合CSS类

1 个答案: