Как использовать Fontawesome в реакции? - PullRequest
Новая
       14

Как использовать Fontawesome в реакции?

0 голосов
/ 18 января 2019

Я хочу использовать fontawesome в своем реактивном проекте, я читаю document и добавляю 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;

Но не показывать значок, как это исправить?

Ответы [ 4 ]

0 голосов
/ 18 января 2019

Во-первых, вы должны использовать npm для установки пакета реакции

нпм i -g пряжа

пряжа с добавлением реакционно-нативного-потрясающего

После этого вы должны импортировать данные, чтобы начать использовать в вашем проекте 

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>
  );
},

если вы хотите получить более полный учебник, вы можете получить доступ к учебнику , нажав здесь

0 голосов
/ 18 января 2019

Кажется, вам не хватает некоторых импортов.

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

0 голосов
/ 18 января 2019

Если вы хотите сослаться на иконку по ее имени, вы должны объявить библиотеку : 

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)

Все эти подробности объяснены здесь . Приведенные выше примеры оттуда.

0 голосов
/ 18 января 2019

Может случиться так, что вы пишете «удивительный», а не «внушительный»

...