React의 render ()에 Font Awesome 아이콘을 포함하는 방법

React의 Font Awesome 아이콘을 사용하려고 할 때마다 render()일반 HTML에서 작동하지만 결과 웹 페이지에 표시되지 않습니다.

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

다음은 실제 예입니다. http://jsfiddle.net/pLWS3/

결함은 어디입니까?

React는 classNameDOM과 같은 속성을 사용합니다 .

개발 빌드를 사용하고 콘솔을 보면 경고가 있습니다. jsfiddle에서 볼 수 있습니다.

경고 : 알 수없는 DOM 속성 클래스입니다. className을 의미 했습니까?

당신이 경우 JS 반응하는 새로운 및 사용하여 만들-반응-응용 프로그램을 CLI의 응용 프로그램을 작성하는 명령을, 다음 글꼴 멋진의 최신 버전을 포함하는 다음 NPM 명령을 실행합니다.

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아이콘 라이브러리를 사용할 수도 있습니다 . 링크 : 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)' }}
      />
    );
  }
});

index.html에 글꼴 멋진 CSS를 추가하는 것을 잊지 마십시오.

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

잠시 동안 이것으로 어려움을 겪은 후이 절차를 생각해 냈습니다 ( 여기 에 Font 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라는 두 개의 관련 파일이 있으며 파일 이름은 가져 오기 구문을 나타냅니다 (아주 분명합니다 ...). 따라서 angry , gem 및 확인 표시 아이콘을 추가하는 것은 다음과 같습니다.

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 페이지 의 head 섹션에 넣으십시오 .

public / index.html (head 섹션)

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

그런 다음 구성 요소 (예 : App.js)에서 표준 글꼴 멋진 클래스 규칙을 사용하십시오. class 대신 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>

나는이 사건을 경험했다. 프로덕션에서 완벽하게 작동해야하는 react / redux 사이트가 필요합니다.

그러나 '엄격 모드'가있었습니다. 이 명령으로 점심을 먹으면 안됩니다.

yarn global add serve
serve -s build

작업하려면 build / index.html 파일을 클릭하십시오. npm font-awesome과 함께 fontawesome을 사용했을 때 개발 모드에서 작동했지만 '엄격 모드'에서는 작동하지 않았습니다.

내 해결책은 다음과 같습니다.

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

위의 모든 단계를 마치면 fontawesome이 멋지게 작동합니다!

'Praveen MP'가 말했듯이 멋진 글꼴을 패키지로 설치할 수 있습니다. 원사가 있으면 다음을 실행할 수 있습니다.

 yarn add font-awesome

원사가 없으면 Praveen이 말한대로 수행하십시오.

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였습니다.