React'in renderına () Font Awesome simgesi nasıl eklenir

Ne zaman React'te bir Font Awesome simgesi kullanmaya çalışsam render(), normal HTML'de çalışmasına rağmen ortaya çıkan web sayfasında görüntülenmiyor.

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

İşte canlı bir örnek: http://jsfiddle.net/pLWS3/

Hata nerede?

React className, DOM gibi özelliği kullanır .

Geliştirme yapısını kullanırsanız ve konsola bakarsanız, bir uyarı vardır. Bunu jsfiddle'da görebilirsiniz.

Uyarı: Bilinmeyen DOM özelliği sınıfı. ClassName mi demek istediniz?

Eğer varsa JS Tepki için yeni ve kullanma oluşturmak-tepki-app cli uygulama oluşturmak için komut, daha sonra yazı-korku en son sürümünü içerecek şekilde aşağıdaki NPM komutunu çalıştırın.

npm install --save font-awesome

font-awesome'i index.js dosyanıza aktarın. Sadece index.js dosyanıza aşağıdaki satırı ekleyin

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

veya

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

Öznitelik olarak className'i kullanmayı unutmayın

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

Ayrıca react-fontawesomesimge kitaplığını da kullanabilirsiniz . İşte bağlantı: react-fontawesome

NPM sayfasından npm ile kurmanız yeterlidir:

npm install --save react-fontawesome

Modülü gerektir:

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

Son olarak, <FontAwesome />bileşeni kullanın ve simge ve stili belirtmek için nitelikleri aktarın:

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)' }}
      />
    );
  }
});

İndex.html'ye yazı tipi harikası CSS'yi eklemeyi unutmayın:

<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 yükleyin

$ 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

sonra bileşeninizde

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'de

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

sonra aşağıdaki gibi simgeleri kullanın:

import React, { Component } from "react";

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

export default Like;

En basit çözüm şudur:

Yüklemek:

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

İthalat:

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

Kullanım:

<FontAwesomeIcon icon={ faThumbsUp }/>

Önce paketi kurmanız gerekir.

npm install --save react-fontawesome

VEYA

npm i --save @fortawesome/react-fontawesome

Bunun classNameyerine kullanmayı unutmayın class.

Daha sonra bunları kullanmak istediğiniz dosyaya aktarmanız gerekir.

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

veya

import FontAwesomeIcon from '@fortawesome/react-fontawesome'

Bununla bir süre uğraştıktan sonra bu prosedürü buldum (Font Awesome'in buradaki belgelerine göre ):

Belirtildiği gibi, fontawesome , react-fontawesome ve fontawesome simgeleri kitaplığını yüklemeniz gerekecek :

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

ve ardından her şeyi React uygulamanıza aktarın:

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

library.add(faStroopwafel)

İşte işin zor kısmı:

Simgeleri değiştirmek veya eklemek için, düğüm modülleri kitaplığınızda mevcut simgeleri bulmanız gerekir, örn.

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

Her simgenin iki ilgili dosyası vardır: .js ve .d.ts ve dosya adı içe aktarma ifadesini gösterir (oldukça açık ...), bu nedenle kızgın , mücevher ve onay işareti simgelerinin eklenmesi aşağıdaki gibi görünür:

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

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

React js kodunuzdaki simgeleri kullanmak için şunu kullanın:

<FontAwesomeIcon icon=icon_name/>

Simge adı, ilgili simgenin .js dosyasında bulunabilir:

için örneğin faCheckCircle iç görünüm faCheckCircle.js 'için iconName ' değişkeni:

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

ve React kodu şöyle görünmelidir:

<FontAwesomeIcon icon=check-circle/> 

İyi şanslar!

Modül içe aktarmaları ve npm kurulumları yapmak zorunda kalmadan font harika kitaplığını dahil etmek istiyorsanız, bunu React index.html sayfanızın baş bölümüne koyun :

public / index.html (baş bölümünde)

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

Daha sonra bileşeninizde (App.js gibi) sadece standart yazı tipi harika sınıf kuralını kullanın. Sadece class yerine className kullanmayı unutmayın:

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

Alexander'ın yukarıdan cevabı gerçekten bana yardımcı oldu!

ReactJS ile oluşturduğum uygulamamın altbilgisinde sosyal hesap simgeleri almaya çalışıyordum, böylece onlara kolayca bir fareyle üzerine gelme durumu ekleyebiliyor ve aynı zamanda sosyal hesaplarımı bağlamalarını sağlayabiliyordum. Bunu yapmak zorunda kaldım:

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

Sonra altbilgi bileşenimin en üstüne şunu ekledim:

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

Bileşenim daha sonra şöyle görünüyordu:

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

Bir cazibe gibi çalıştı.

npm install --save font-awesome

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

sonra

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

'Praveen MP'nin dediği gibi font-awesome'i bir paket olarak kurabilirsiniz. eğer ipliğiniz varsa koşabilirsiniz:

 yarn add font-awesome

İpliğiniz yoksa Praveen'in dediği gibi yapın ve yapın:

npm install --save font-awesome

bu, paketi proje bağımlılıklarınıza ekleyecek ve paketi node_modules klasörünüze kuracaktır. App.js dosyanıza ekleyin

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

Ben bu vakayı yaşadım; Üretimde mükemmel çalışması gereken react / redux sitesine ihtiyacım var.

ancak bir 'katı mod' vardı; Bu komutlarla öğle yemeği yememeli.

yarn global add serve
serve -s build

Yalnızca build / index.html dosyasını tıklayarak çalışmalıdır. Fontawesome'ı npm font-awesome ile kullandığımda, geliştirme modunda çalışıyordu ancak 'katı modda' çalışmıyordu.

İşte benim çözümüm:

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'de

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

Yukarıdaki tüm adımlardan sonra fontawesome, ZEVKLİ çalışır !!!

Ödeme simgeleri oldukça iyi tepki verdi ve iyi çalıştı.

Benim durumumda aşağıdaki belgeleri takip ediyordum react-fontawesome paket , ancak simgeleri kitaplığa yerleştirirken simgeyi nasıl arayacakları konusunda net değiller

yaptığım buydu:

App.js dosyası

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

Bileşen dosyası

<FontAwesomeIcon icon={"coffee"} />

Ama bu hatayı alıyordum

Ardından, simge prop'unu şu şekilde geçirirken takma adı ekledim:

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

Ve çalışıyor, önek değerini icon.js dosyasında bulabilirsiniz, benim durumumda: faCoffee.js