无法在Reaction JS中导入字体-AWOWE [英] Can't import font-awesome in React JS

问题描述

我正在学习Reaction JS，我正在尝试使用NPM模块导入字体很棒的内容以显示此图标：

import React, { Component } from "react";

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

export default Like;

文件顶部的&IMPORT&QOOT；语句对于此图标应该是什么样子？我试着阅读官方文档，但不能真正理解模式...

推荐答案

如果安装了所需的模块

$ 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;

这篇关于无法在Reaction JS中导入字体-AWOWE的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！