如何在反应中使用fontawesome？

Question

我想在我的react项目中使用fontawesome，我读了并在纱线中添加fontawesome：

$ yarn add @fortawesome/fontawesome-svg-core
$ yarn add @fortawesome/free-solid-svg-icons
$ yarn add @fortawesome/react-fontawesome

并创建一个如下所示的组件：

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

class Todo extends Component {
    render() {
        return (
            <div>
                font: <FontAwesomeIcon icon="coffee" />

            </div>
        );
    }
}

export default Todo;

但是不显示图标，如何解决？

Answer 1

您似乎缺少一些进口商品。

import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faIgloo } from '@fortawesome/free-solid-svg-icons'

library.add(faIgloo)

https://fontawesome.com/how-to-use/on-the-web/using-with/react

Answer 2

如果要通过图标名称引用该图标，则必须声明一个库：

import ReactDOM from 'react-dom'
import { library } from '@fortawesome/fontawesome-svg-core'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { faCheckSquare, faCoffee } from '@fortawesome/free-solid-svg-icons'

library.add(fab, faCheckSquare, faCoffee)

然后像这样使用它：

import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

export const Beverage = () => (
  <div>
    <FontAwesomeIcon icon="check-square" />
    Favorite beverage: <FontAwesomeIcon icon="coffee" />
  </div>
)

否则，您可以使用显式导入：

import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'

const element = <FontAwesomeIcon icon={faCoffee} />

ReactDOM.render(element, document.body)

所有这些详细信息都是explained here。上面的示例是从那里开始的。

Answer 3

可能是您在拼写“ fortawesome”而不是“ fontawesome”

Answer 4

首先，您应该使用npm安装react软件包

  

npm i -g纱线

     

添加纱线react-native-fontawesome

此后，您必须导入数据以在项目中开始使用

import FontAwesome, { Icons } from 'react-native-fontawesome';

...
render() {
  return (
    <View>
      <Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}>
        <FontAwesome>{Icons.chevronLeft}</FontAwesome>
        Text
      </Text>
    </View>
  );
},

如果您想要更完整的教程，可以访问教程clicking here