无法在 React JS 中导入 font-awesome

Question

我正在学习 React JS，我正在尝试使用 npm 模块导入 font-awesome 以显示此图标：

import React, { Component } from "react";

class Like extends Component {
  render() {
    return <i class="far fa-heart"></i>;
  }
}

export default Like;

文件顶部的“import”语句对于这个图标应该是怎样的？我试图阅读官方文档，但无法真正理解模式......

Answer 1

如果安装了所需的模块

$ npm i --save @fortawesome/fontawesome-svg-core
$ npm i --save @fortawesome/free-solid-svg-icons
$ npm i --save @fortawesome/react-fontawesome
$ npm i --save @fortawesome/fontawesome-free-regular

你可以像这样使用它们

import React, { Component } from "react";
import { FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import { faHeart } from '@fortawesome/fontawesome-free-regular';

class Like extends Component {
  render() {
    return <FontAwesomeIcon icon={faHeart}/>;
  }
}

export default Like;

更多详情请参考official github repo

如果您是专业会员，您也可以安装其他模块，列出的一次免费使用。

要同时使用这两种类型，您可以导入别名

import React, { Component } from "react";
import { FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import { faHeart as regularHeart } from '@fortawesome/fontawesome-free-regular';
import { faHeart as solidHeart } from '@fortawesome/free-solid-svg-icons';

class Like extends Component {
  render() {
    return {this.props.solid ? <FontAwesomeIcon icon={solidHeart}/> : <FontAwesomeIcon icon={regularHeart}/>};
  }
}

export default Like;