Як включити значок Awesome Font у візуалізацію React ()

Кожен раз, коли я намагаюся використовувати піктограму Awesome Font у React render(), вона не відображається на отриманій веб-сторінці, хоча вона працює у звичайному HTML.

render: function() {
    return <div><i class="fa fa-spinner fa-spin">no spinner but why</i></div>;
}

Ось живий приклад: http://jsfiddle.net/pLWS3/

Де вина?

React використовує classNameатрибут, як DOM.

Якщо ви використовуєте версію розробки та дивитесь на консоль, з’являється попередження. Ви можете побачити це на jsfiddle.

Попередження: Невідомий клас властивостей DOM. Ви мали на увазі className?

Якщо ви новачок у React JS та використовуєте команду create-react-app cli для створення програми, виконайте наступну команду NPM, щоб включити останню версію font-awesome.

npm install --save font-awesome

імпортувати шрифтові файли у файл index.js. Просто додайте нижній рядок у файл index.js

import '../node_modules/font-awesome/css/font-awesome.min.css'; 

або

import 'font-awesome/css/font-awesome.min.css';

Не забудьте використовувати атрибут className

 render: function() {
    return <div><i className="fa fa-spinner fa-spin">no spinner but why</i></div>;
}

Ви також можете використовувати react-fontawesomeбібліотеку іконок. Ось посилання: реагувати-приємно

На сторінці NPM просто встановіть через npm:

npm install --save react-fontawesome

Потрібен модуль:

var FontAwesome = require('react-fontawesome');

І, нарешті, використовуйте <FontAwesome />компонент та передайте атрибути, щоб вказати піктограму та стиль:

var MyComponent = React.createClass({
  render: function () {
    return (
      <FontAwesome
        className='super-crazy-colors'
        name='rocket'
        size='2x'
        spin
        style={{ textShadow: '0 1px 0 rgba(0, 0, 0, 0.1)' }}
      />
    );
  }
});

Не забудьте додати приголомшливий шрифт CSS до index.html:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">

https://github.com/FortAwesome/react-fontawesome

встановити fontawesome & react-fontawesome

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

то у своєму компоненті

import React, { Component } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCheckSquare, faCoffee } from '@fortawesome/fontawesome-free-solid'
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>
          <FontAwesomeIcon icon={faCoffee} />
        </h1>
      </div>
    );
  }
}

export default App;

npm install --save-dev @fortawesome/fontawesome-free

в index.js

import '@fortawesome/fontawesome-free/css/all.min.css';

потім використовуйте значки, як показано нижче:

import React, { Component } from "react";

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

export default Like;

Найпростіше рішення:

Встановити:

npm install --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/react-fontawesome

Імпорт:

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faThumbsUp } from '@fortawesome/free-solid-svg-icons';

Використання:

<FontAwesomeIcon icon={ faThumbsUp }/>

Потрібно спочатку встановити пакет.

npm install --save react-fontawesome

АБО

npm i --save @fortawesome/react-fontawesome

Не забудьте використовувати classNameзамість цього class.

Пізніше вам потрібно імпортувати їх у файл, де ви хочете їх використовувати.

import 'font-awesome/css/font-awesome.min.css'

або

import FontAwesomeIcon from '@fortawesome/react-fontawesome'

Після деякого бою з цим я придумав цю процедуру (на основі документації на шрифт Awesome тут ):

Як зазначено, вам доведеться встановити бібліотеку значків fontawesome , react-fontawesome та fontawesome :

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

а потім імпортувати все до вашої програми React:

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

library.add(faStroopwafel)

Ось така складна частина:

Щоб змінити або додати піктограми, вам доведеться знайти наявні значки в бібліотеці модулів вузлів, тобто

<your_project_path>\node_modules\@fortawesome\free-solid-svg-icons  

Кожна піктограма має два відповідні файли: .js та .d.ts, а ім'я файлу вказує фразу імпорту (досить очевидно ...), тому додавання значків гніву , коштовності та галочки виглядає приблизно так:

import { faStroopwafel, faAngry, faGem, faCheckCircle } from '@fortawesome/free-solid-svg-icons'

library.add(faStroopwafel, faAngry, faGem, faCheckCircle)

Для використання піктограм у коді React js використовуйте:

<FontAwesomeIcon icon=icon_name/>

Ім'я піктограми можна знайти у відповідному файлі .js відповідного значка:

наприклад, для прогляду faCheckCircle всередині faCheckCircle.js для змінної ' iconName ':

...
var iconName = 'check-circle'; 
... 

і код React повинен виглядати так:

<FontAwesomeIcon icon=check-circle/> 

Удачі!

Відповідь Олександра згори справді допомогла мені!

Я намагався отримати піктограми соціальних акаунтів у нижній частині нижнього колонтитулу свого додатка, який я створив із ReactJS, щоб я міг легко додати до них стан наведення, а також пов'язуючи мої соціальні акаунти. Ось що я закінчив робити:

$ npm i --save @fortawesome/fontawesome-free-brands

Потім у верхній частині компонента колонтитулу я включив це:

import React from 'react';
import './styles/Footer.css';
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import {faTwitter, faLinkedin, faGithub} from '@fortawesome/fontawesome-free-brands';

Тоді мій компонент виглядав так:

<a href='https://github.com/yourusernamehere'>
  <FontAwesomeIcon className ='font-awesome' icon={faGithub} />
</a>

Працював як шарм.

Якщо ви хочете включити дивовижну бібліотеку шрифтів без необхідності імпорту модуля та встановлення npm, покладіть це в головний розділ вашої сторінки React index.html :

public / index.html (у головному розділі)

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>

Тоді у своєму компоненті (наприклад, App.js) просто використовуйте стандартну конвенцію класу шрифтів. Просто пам’ятайте, щоб використовувати className замість класу:

<button className='btn'><i className='fa fa-home'></i></button>

npm install --save font-awesome

import 'font-awesome/css/font-awesome.min.css';

тоді

<i className="fa fa-shopping-cart" style={{fontSize:24}}></i>  
        <span className="badge badge-danger" style={{position:"absolute", right:5, top:5}}>number of items in cart</span>

Я пережив цей випадок; Мені потрібен сайт для реагування / редукції, який повинен чудово працювати у виробництві.

але був "суворий режим"; Не слід обідати його цими командами.

yarn global add serve
serve -s build

Потрібно працювати лише з файлом build / index.html. Коли я використовував fontawesome з шрифтом npm-awesome, він працював у режимі розробки, але не працював у «суворому режимі».

Ось моє рішення:

public/css/font-awesome.min.css
public/fonts/font-awesome.eot 
*** other different types of files(4) ***
*** I copied these files for node_module/font-awesome ***
*** after copied then can delete the font-awesome from package.json ***

у public / index.html

<link rel="stylesheet" href="%PUBLIC_URL%/css/font-awesome.min.css">

Після всіх вищезазначених кроків, приємний працює НІКОЛЬНО !!!

як "Praveen MP" сказав, що ви можете встановити шрифт-awesome як пакет. якщо у вас є пряжа, ви можете запустити:

 yarn add font-awesome

Якщо у вас немає пряжі, виконайте так, як сказав Правен:

npm install --save font-awesome

це додасть пакунок до залежностей ваших проектів та встановить його у папку node_modules. у вашому файлі App.js додати

import 'font-awesome/css/font-awesome.min.css'

Каса реагує на іконки симпатично і добре працює.

У моєму випадку я слідкував за документацією щодо react-fontawesomeпакету, але їм не зрозуміло, як викликати піктограму під час встановлення піктограм у бібліотеку

ось що я робив:

Файл App.js

import {faCoffee} from "@fortawesome/pro-light-svg-icons";
library.add(faSearch, faFileSearch, faCoffee);

Файл компонента

<FontAwesomeIcon icon={"coffee"} />

Але я отримував цю помилку

Тоді я додав псевдонім при передачі опорної іконки, наприклад:

<FontAwesomeIcon icon={["fal", "coffee"]} />

І він працює, ви можете знайти префікс у файлі icon.js, у моєму випадку: faCoffee.js