无法在 React JS 中导入真棒字体

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;

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

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;

无法在 React JS 中导入真棒字体

Can't import font-awesome in React JS

npm

font-awesome

reactjs