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

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

구성 요소보다

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 @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라는 두 개의 관련 파일이 있으며 파일 이름은 가져 오기 구문을 나타냅니다 (아주 분명합니다 ...). 따라서 화난 , gem 및 확인 표시 아이콘 추가는 다음과 같습니다.

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

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

React js 코드에서 아이콘을 사용하려면 다음을 사용하십시오.

<FontAwesomeIcon icon=icon_name/>

The icon name can be found in the relevant icon's .js file:

e.g. for faCheckCircle look inside faCheckCircle.js for 'iconName' variable:

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

and the React code should look like this:

<FontAwesomeIcon icon=check-circle/> 

Goodluck!

---

Alexander's answer from above really helped me out!

I was trying to get social accounts icons in the footer of my app I created with ReactJS so that I could easily add a hover state to them while also having them link my social accounts. This is what I ended up having to do:

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

Then at the top of my footer component I included this:

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

My component then looked like this:

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

Worked like a charm.

---

I was experienced this case; I need the react/redux site that should be working perfectly in production.

but there was a 'strict mode'; Shouldn't lunch it with these commands.

yarn global add serve
serve -s build

Should working with only click the build/index.html file. When I used fontawesome with npm font-awesome, it was working in development mode but not working in the 'strict mode'.

Here is my solution:

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

in public/index.html

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

After all of above steps, the fontawesome works NICELY!!!

---

as 'Praveen M P' said you can install font-awesome as a package. if you have yarn you can run:

 yarn add font-awesome

If you don't have yarn do as Praveen said and do:

npm install --save font-awesome

this will add the package to your projects dependencies and install the package in your node_modules folder. in your App.js file add

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

---

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

in index.js

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

then use icons like below :

import React, { Component } from "react";

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

export default Like;

---

Checkout react icons pretty dope and worked well.

---

In my case I was following the documentation for react-fontawesome package, but they aren't clear about how to call the icon when setting the icons into the library

this is was what I was doing:

App.js file

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

Component file

<FontAwesomeIcon icon={"coffee"} />

But I was getting this error

Then I added the alias when passing the icon prop like:

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

And it is working, you can find the prefix value in the icon.js file, in my case was: faCoffee.js

참고URL : https://stackoverflow.com/questions/23116591/how-to-include-a-font-awesome-icon-in-reacts-render