[reactjs] 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'