programing

리액션: 아이콘을 표시하지 않음

mailnote 2023. 4. 6. 21:54
반응형

리액션: 아이콘을 표시하지 않음

react-swesome을 사용하여 readme와 똑같이 구현하려고 합니다.https://github.com/danawoodman/react-fontawesome/blob/master/readme.md

import React from 'react';
import FontAwesome from 'react-fontawesome'
...
export default class ComponentName extends React.Component {
    render() {
        return (
            <div>
                <div>
                    <span>
                        <FontAwesome
                            className='super-crazy-colors'
                            name='rocket'
                            size='2x'
                            spin
                            style={{ textShadow: '0 1px 0 rgba(0, 0, 0, 0.1)' }}
                        />
                        SOME TEXT
                    </span>
                </div>
                ...
            </div>
        )
    }
}

하지만 DOM에 아이콘이 보이지 않습니다.Chrome Dev Tools에는 다음과 같은 내용이 표시됩니다.

<span style="text-shadow:0 1px 0 rgba(0, 0, 0, 0.1);" aria-hidden="true" class="fa fa-rocket fa-2x fa-spin super-crazy-colors" data-reactid=".0.$/=11.0.0.$/=10.$/=10.$/=10"></span>

은 ...인 것 같다.<i>요. 저는 이 태그의<span>...</span> <i>...</i>개발 도구의 "HTML로 편집"에서 아이콘을 볼 수 없습니다.

내 플러그인에 add-module-exports가 있고, 내 webpack.config의 프리셋에 stage-2가 있습니다.

제가 뭘 놓쳤는지 말씀해 주실 수 있나요?이 작업을 수행하려면 리액트 펀치 말고 다른 패키지가 필요합니까?표준 폰트 awesome.css를 Import해야 합니까, 아니면 폰트 awesome CDN을 로드해야 합니까?어떤 도움이라도 주시면 감사하겠습니다!

저도 같은 문제가 있었어요.Readme.md 를 참조해 주세요.다음의 주의사항이 있습니다.

주의: 이 컴포넌트에는 Font Awesome CSS나 글꼴은 포함되어 있지 않으므로 빌드 프로세스에 추가하거나 CDN 버전에 링크하여 반드시 포함시켜야 합니다.

따라서 가장 간단한 방법은 html의 fontawesome cdn에 링크하는 것입니다.

<head>
<meta charset="UTF-8">    
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css" rel="stylesheet" integrity="sha384-
wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" 
crossorigin="anonymous">
</head>

실행합니다.npm install font-awesome --save

고객님의 고객명index.js ★★★★★★★★★★★★★★★★★」App.js ★★★★★★★★★★★★★★★★★」YourComponent.jsCSS Import

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

다른 답변에서 언급했듯이 페이지에 아이콘을 포함해야 합니다..react-fontawesome예: https://github.com/danawoodman/react-fontawesome/blob/master/examples/index.html

개발자가 #5 행에 글꼴에 놀라운 CSS를 포함했음을 알 수 있습니다.

또, Font Awesome v5가 발매되고 있기 때문에, 이행을 검토해 주십시오.https://www.npmjs.com/package/ @forthamesome/hothamesome-whothamesome 관련 문서를 참조하십시오.

v5를 사용하려면:

설치 종속성:

$ npm i --save @fortawesome/fontawesome
$ npm i --save @fortawesome/react-fontawesome
$ npm i --save @fortawesome/fontawesome-free-solid

그러면 컴포넌트는 다음과 같은 아이콘을 사용할 수 있습니다.

import ReactDOM from 'react-dom';
import FontAwesomeIcon from '@fortawesome/react-fontawesome'
import { faCoffee } from '@fortawesome/fontawesome-free-solid'

const element = (
  <FontAwesomeIcon icon={faCoffee} />
)

ReactDOM.render(element, document.body);

또한 쉽게 참조할 수 있도록 앱에 일반적으로 사용되는 아이콘 라이브러리를 만들 수 있습니다.작업 코드는, https://codesandbox.io/s/8y251kv448 를 참조해 주세요.

라이브러리 기능에 대한 자세한 내용은 여기를 참조하십시오.https://www.npmjs.com/package/ @fortawesome / portawesome / portawesome # build - a - resference - to - reference - icons - out------- 。

실제로 최신인 것 같고 "cannot resolve" 오류를 발생시키지 않은 유일한 예는 다음과 같습니다.

https://scotch.io/tutorials/using-font-awesome-5-with-react

import React from "react";
import { render } from "react-dom";

// get our fontawesome imports
import { faHome } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

// create our App
const App = () => (
  <div>
    <FontAwesomeIcon icon={faHome} />
  </div>
);

// render to #root
render(<App />, document.getElementById("root"));

Font Awesome에는 React 어플리케이션에서 아이콘을 사용할 수 있는 공식 React 컴포넌트가 추가되었습니다.

스텝 1 : npm과 같은 패키지 매니저를 사용하여 프로젝트에 3개의 중요한 패키지를 설치해야 합니다.

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

스텝 2: 아이콘을 스타일링할 예정이라면 다음 2개의 추가 패키지를 다운로드해야 합니다.

     npm install --save @fortawesome/free-brands-svg-icons
     npm install --save @fortawesome/free-regular-svg-icons

3단계: 프로젝트에 필요한 패키지를 모두 설치했으면 아이콘을 사용할 수 있습니다.다음과 같이 컴포넌트에 다음 패키지를 Import합니다.

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

그런 다음 다음과 같이 아이콘을 구성 요소로 가져올 수 있습니다(예: 클래스가 "fas fa-atom"인 아이콘을 사용).

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

추신: 하나의 Import에 여러 아이콘을 Import할 수 있습니다.각 아이콘 사이에 혼수 상태를 추가할 수도 있습니다.

순서 4: Import한 아이콘을 사용합니다.

const element = <FontAwesomeIcon icon={faAtom} />

출처 : https://fontawesome.com/v5.15/how-to-use/on-the-web/using-with/react

은 리액트에서는 것 같습니다.

설치:

$ yarn add @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome

사용방법:

import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'

const element = <FontAwesomeIcon icon={faCoffee} />

ReactDOM.render(element, document.body)

폰트 어썸5 리액트

@Alee가 지적했듯이 Fontaewome 글꼴은 패키지에 포함되어 있지 않습니다.직접 수입하셔야 합니다.

  1. npm 을 설치합니다.font-awesome npm을 실행합니다.npm install font-awesome --save 실을 한다면 '실질하다'를 한다.yarn add font-awesome

  2. '가져오기'만 요.font-awesome.less아래less ('디렉토리'로 표시)import 'font-awesome/less/font-awesome.less'

이것으로 아이콘이 동작하고 있는 것을 알 수 있습니다. : )

외부 css를 로드하지 않고 패키지 자체에서 글꼴 멋진 스타일을 가져옵니다.

import "@fortawesome/fontawesome-svg-core/styles.css"; // import Font Awesome CSS
import { config } from "@fortawesome/fontawesome-svg-core";
config.autoAddCss = false; // Tell Font Awesome to skip adding the CSS automatically since it's being imported above

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

복사하여 html에 붙여넣기...

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">

다음 JS - 다음 jS를 사용하는 경우 스타일을 가져옵니다.

import '../node_modules/@fortawesome/fontawesome-svg-core/styles.css'

FontAwesome이 필요로 하는 CSS를 아직 Import하지 않은 것 같습니다.- FontAwesome 웹사이트에서 최소화된 CSS 파일을 다운로드하여 app.scss 파일이나 다른 스타일시트를 Import하는 다른 곳으로 Import합니다.

react-fonthome 라이브러리를 사용하면 '위 화살표'와 같은 클래스 이름을 가진 요소를 만들 수 있지만 스타일시트가 없으면 프로젝트에 해당 클래스에 대응하는 아이콘이 있는지 알 수 없습니다.

모든 것을 한 번에 설치하고 원하는 아이콘만 Import하는 것이 좋습니다.

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

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

팩에서 .ctrl+space아이콘 가져오기 시 아이콘 숨기기 및 팩 변경에 제안의 힘을 사용합니다.

추가해 보다

<script src='https://use.fontawesome.com/3bd7769ce1.js'></script>

리액트 프로젝트 내의 메인 인덱스.인덱스로 이동합니다.

언급URL : https://stackoverflow.com/questions/42522233/react-fontawesome-not-displaying-icons

반응형

'programing' 카테고리의 다른 글

멀티레벨/네스트된 JSON을 평평하게 하는 방법  (0) 2023.04.06
AngularJS 데이터 바인딩 유형  (0) 2023.04.06
Wordpress 기본 갤러리 출력 변경  (0) 2023.04.06
변환합니다.뷰의 JSON 개체에 대한 순 개체  (0) 2023.04.06
Woocommerce 카테고리 설명 표시 방법  (0) 2023.04.06

'programing'의 다른글

  • 현재글리액션: 아이콘을 표시하지 않음

관련글

댓글

티스토리툴바