React 렌더링()에 Font Awesome 아이콘을 포함하는 방법

React 렌더링()에 Font Awesome 아이콘을 포함하는 방법

폰트 어썸에서 어썸 을 하려고 할 render()의 HTMLHTML 의 경우, Web 의 경우, Web 의 경우, Web 의 경우는 표시되지 않습니다.

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

다음은 라이브 예시입니다.http://jsfiddle.net/pLWS3/

어디에 결함이 있습니까?

React JS를 처음 사용하는 경우 create-react-app cli 명령을 사용하여 응용 프로그램을 만든 경우 다음 NPM 명령을 실행하여 최신 버전의 font-awesome을 포함합니다.

npm install --save font-awesome

import font-module을 index.module 파일로 가져옵니다.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>;
}

는 ""를 합니다.classNameDOM 、 DOM 、 DOM 。

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

경고:알 수 없는 DOM 속성 클래스입니다.className을 말하는 건가요?

https://github.com/FortAwesome/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.displaces에 있습니다.

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;

이 경우에도 하실 수 있습니다.react-fontawesome아이콘 라이브러리링크는 다음과 같습니다.리액션-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">

가장 간단한 해결책은 다음과 같습니다.

인스톨:

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

Import:

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

용도:

<FontAwesomeIcon icon={ faThumbsUp }/>

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>

모듈 Import 및 npm 설치를 하지 않고 폰트 어썸라이브러리를 포함시키고 싶은 경우 React index.html 페이지의 머리 부분에 다음 내용을 입력합니다.

public/index.displic(헤드섹션 내)

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

그리고 컴포넌트(App.js 등)에서는 표준 글꼴의 멋진 클래스 규칙을 사용합니다.가 아닌 className을 .class 신 className 。

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

먼저 패키지를 설치해야 합니다.

npm install --save react-fontawesome

또는

npm i --save @fortawesome/react-fontawesome

꼭 사용하세요.classNameclass.

나중에 사용할 파일로 Import해야 합니다.

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

또는

import FontAwesomeIcon from '@fortawesome/react-fontawesome'

한동안 고민하다가 다음 절차를 생각해 냈습니다(여기에 있는 Font Awesome 문서 참조).

앞에서 설명한 바와 같이 폰트대박, 리액트대박 및 폰트대박 아이콘 라이브러리를 설치해야 합니다.

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

모든 것을 React 앱으로 Import합니다.

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 문구(매우 명백한...)를 나타냅니다.따라서 angry, gem 및 check-mark 아이콘을 추가하는 방법은 다음과 같습니다.

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

행운을 빕니다.

'Praveen M P'가 말한 것처럼 폰트-어썸을 패키지로 설치할 수 있습니다.실이 있는 경우 실행할 수 있습니다.

 yarn add font-awesome

만약 당신이 실이 없다면 프라빈의 말대로 하고 다음을 하세요.

npm install --save font-awesome

그러면 패키지가 프로젝트 의존관계에 추가되고 패키지가 node_delects 폴더에 설치됩니다.App.js 파일 추가

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

위에서 보낸 알렉산더의 대답이 정말 도움이 되었어요!

리액트로 만든 앱 바닥글에 소셜 계정 아이콘을 넣으려고 했습니다.JS를 사용하면 소셜 계정을 링크하는 동시에 쉽게 호버 상태를 추가할 수 있습니다.이게 내가 해야 할 일이야.

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

마법처럼 작동했어.

개인적으로 리액트 폰은 각각의 아이콘을 개별적으로 Import해야 하기 때문에 다루기 어렵다는 것을 알았습니다.React-fontawome을 사용하지 않고 React와 함께 Font Awesome 버전 5를 사용하고 싶다면 다음과 같이 할 수 있습니다.

• https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself에서 폰트 자체에서 폰트 자체에서 폰트 자체에서 폰트 자체 무료 패키지를 다운로드하십시오.

• 리액트 앱의 'public' 디렉터리에 'fontawesome' 디렉터리를 만듭니다.

• 다운로드한 zip에서 이 폴더로 'css' 및 'webfonts' 디렉토리를 복사합니다.

• 'index.html' 파일의 'head' 태그에 다음 행을 추가합니다.

<link href="%PUBLIC_URL%/fontawesome/css/all.css" rel="stylesheet">

이제 Font Awesome 아이콘을 일반적인 방법으로 사용할 수 있습니다.

<i className="fas fa-globe-europe"></i>

저는 이 사례를 경험했습니다.생산 시 완벽하게 동작해야 할 리액트/리듀스 사이트가 필요합니다.

하지만 '엄격한 모드'가 있었습니다. 이 명령으로 점심식사를 하면 안 됩니다.

yarn global add serve
serve -s build

build/index.html 파일만 클릭합니다.npm 폰트 어썸과 함께 폰트 어썸을 사용했을 때 개발 모드에서는 동작하고 있었지만, 'strict 모드'에서는 동작하지 않았습니다.

저의 솔루션은 다음과 같습니다.

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.displaces에 있습니다.

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

위의 단계를 모두 거치면 폰타썸이 잘 작동합니다!!!

누군가가 공식 문서를 통해 그것을 하기를 원하는 경우.내가 한 일과 내가 이해한 것은 이렇다.

1. 폰트 awesome 페이지에 언급된 대로 라이브러리를 설치합니다. 예를 들어 npm이나 warn을 사용합니다.

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

2. 일반적으로 또는 글로벌하게 사용하려면 '@fortawesome/fontawesome-svg-core'에서 Import 라이브러리가 2개 필요합니다.이 라이브러리는 프로젝트 내 모든 아이콘에 액세스할 수 있습니다.

  import { library } from '@fortawesome/fontawesome-svg-core';

3. 아이콘을 사용하려면 설치한 npm 또는 실 라이브러리를 기반으로 아이콘을 Import해야 합니다.App.js에서 쉽게 볼 수 있는 Import를 추천합니다.예를 들어, 프리티어 쇼핑 카트 아이콘을 사용하고 있는 경우, 아래와 같이 Import 할 수 있습니다(솔리드인지 일반인지, 아이콘을 클릭하기만 하면 다른 버전이 나열되며, 마음에 드는 아이콘을 기반으로 라이브러리를 Import하여 반응할 수 있습니다).

  import { faShoppingCart } from '@fortawesome/free-solid-svg-icons';

• 를 작성하고 스테이트먼트와 라이브러리 에 "Import"를 합니다.fa이름을 입력하기 시작하면 VSCode에서 체크박스를 켜는 즉시 자동으로 권장되므로 찾기 작업이 덜 복잡해집니다.

4. 프로젝트에서 글로벌하게 액세스할 수 있도록 하려면 라이브러리에 아이콘을 쉼표로 구분하여 추가해야 합니다.

library.add( faCheckSquare, faAmbulance, faShoppingCart);

5. 그런 다음 다음 구성 요소를 가져올 수 있습니다.

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

아이콘을 원하는 곳에 사용할 수 있습니다.이름은 FontAwesome 사이트의 스타일 클래스에 나와 있는 아이콘과 동일합니다.예: 쇼핑카트가 쇼핑카트로 표시됩니다.

<FontAwesomeIcon icon="shopping-cart" />

이제 작동해야 합니다.

체크 아웃 리액션 아이콘은 꽤 훌륭하고 잘 작동했습니다.

에는 제, 음, 음, 음, 음, 음, 음, 음, in, in, in, in, in, in, in, in, in, in, in, in, in, in, in, 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 입니다.

Font Awesome v6.x.x의 경우

폰토썸은 아이콘을 사용하는 세 가지 방법을 제공합니다.

사용 편의성과 번들 크기를 고려한 후.다음 방법이 가장 적합합니다.

yarn add @fortawesome/fontawesome-svg-core

# free icons styles
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/free-regular-svg-icons

yarn add @fortawesome/react-fontawesome@latest

원하는 아이콘을 가져옵니다.

import { faClipboard } from "@fortawesome/free-solid-svg-icons";
import { faClipboard as farClipboard } from "@fortawesome/free-regular-svg-icons";

주의: 솔리드 아이콘이 필요한 경우 에서 가져와야 합니다.@fortawesome/free-solid-svg-icons[ Regular ]아이콘이 필요할 경우@fortawesome/free-regular-svg-icons

일반 아이콘 앞에 추가far대신fa관례로서

사용방법:

  <p>
    This is a free Solid Icon <FontAwesomeIcon icon={faClipboard} />
  </p>
  <p>
    This is a free Regular Icon <FontAwesomeIcon icon={farClipboard} />
  </p>

주의: Fontawesome 문서에서 아이콘을 검색하여 코드를 복사하면 다음과 같은 메시지가 나타납니다.그러나 아이콘을 표시하려면 아이콘 받침대를 위의 값으로 변경해야 합니다.

<FontAwesomeIcon icon="fa-solid fa-clipboard" />

이것은 상기 스니펫의 Code Sandbox입니다.

자세한 내용은 공식 문서를 참조하십시오.

---

PS: 무료 요금제에서는 Free Solid 및 Free Regular 아이콘만 사용할 수 있습니다.

다음은 무료 요금제로 제공되는 아이콘 목록입니다.

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