찾을 수 없는 아이콘 리액션-대박

찾을 수 없는 아이콘 리액션-대박

리액트에 대한 프로젝트가 있는데 FontAwesome을 통합해야 합니다.공식 라이브러리를 찾아서 readme의 지시에 따라 설치했습니다.

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

내 코드에서 이렇게 사용하려고 하면:

<FontAwesomeIcon icon='plus'/>
<FontAwesomeIcon icon={['fa', 'coffee']}/>

콘솔에 다음 오류가 나타납니다.

Could not find icon {prefix: "fas", iconName: "plus"}
Could not find icon {prefix: "fa", iconName: "coffee"}

나는 FontAwesome css 링크를 머리에 포함시키려고 했지만 도움이 되지 않았다.사용하고 있다npm v4.6.1;node v8.9.1;react v16.2.

쉽게 참조할 수 있도록 "라이브러리"에 사용할 아이콘을 쉽게 참조할 수 있습니다.

import React from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import fontawesome from '@fortawesome/fontawesome'
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import { faCheckSquare, faCoffee } from '@fortawesome/fontawesome-free-solid'

const styles = {
  fontFamily: 'sans-serif',
  textAlign: 'center',
};

fontawesome.library.add(faCheckSquare, faCoffee);

const App = () => (
  <div style={styles}>
    <FontAwesomeIcon icon="check-square" /><br /><br />
    <FontAwesomeIcon icon="coffee" />
  </div>
);

render(<App />, document.getElementById('root'));

작업 코드는, https://codesandbox.io/s/8y251kv448 를 참조해 주세요.

또한 https://www.npmjs.com/package/ @fortawesome/fort-whappesome #build-a-whapps-reference-icons-to-reference-your-application을 보다 효율적으로 읽어보십시오.

나 같은 바보가 또 있을지도 모르니까 아이콘에 적절한 이름을 붙이도록 해.

나는 가지고 있었다

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { library } from "@fortawesome/fontawesome-svg-core";
import { faUser } from "@fortawesome/free-solid-svg-icons";

library.add(faUser);

그리고.

render() {
  return (        
    <FontAwesomeIcon icon="faUser" />
  );
}

실제 아이콘 이름이 "faUser"가 아닌 "user"인 경우:

render() {
  return (        
    <FontAwesomeIcon icon="user" />
  );
}

라이브러리 없이 다음과 같이 FontAwesome 아이콘을 사용할 수 있습니다.

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

<FontAwesomeIcon icon={faCoffee} />

react-fontawesome에서 말하는 대로 필요한 패키지를 모두 설치했습니다.

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

또한 faTrashAlt(또는 유사한 이름의 아이콘)를 표시하려고 할 때 아이콘이 보이지 않으면 실제로 아이콘을 사용할 때 'fa'를 삭제해야 할 뿐만 아니라 아이콘 이름을 comeCase에서 'lisp-case'로 변환해야 합니다.

따라서 대체 휴지통 아이콘을 로드한 후 다음과 같이 하십시오.

fontawesome.library.add(faTrashAlt);

그런 다음 다음과 같이 사용됩니다.

<FontAwesomeIcon icon="trash-alt" />

20분 동안 소중한 시간을 낭비하지 않도록 하세요.

웹 사이트에 멋진 아이콘을 삽입하는 방법이 여러 가지가 있다고 해서 리액션과 글꼴, 그리고 명시적인 Import의 예를 제시하겠습니다.명시적인 수입은 검소하다.FontAwesome 아이콘 세트의 정확한 아이콘만 가져오고 FontAwesome은아이콘 구성 요소 아이콘 특성이 이름 대신 가져온 개체로 설정됩니다.

예:

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';
import { faHistory } from '@fortawesome/pro-regular-svg-icons';

function exampleReactComponent() {
   return (
     <div>
       <p><FontAwesomeIcon icon={faCoffee}/></p>
       <p><FontAwesomeIcon icon={faHistory}/></p>
     </div>
   );
}

FontAwesome의 아이콘 속성을 설정하는 것에 반대하지 않습니다.이름별 아이콘 이름별 아이콘 찾기 콘솔 오류가 발생하여 개체를 참조하는 해결 방법이 발견되었습니다.아이콘={} 표기법은 따옴표로 둘러싸인 아이콘 이름의 문자열을 사용하는 것과는 다르므로 주의해 주십시오.

명시적 가져오기...반응-최고 npm 패키지 기트허브 링크

npm과 함께 설치하는 중...npm 링크를 사용한 폰타썸 설치

다음과 같은 배열을 사용하여 아이콘 경로를 전달하려면

icon={['fa', 'fa']}

라이브러리의 모든 참조를 파일로 가져오고 이 파일을 React 앱의 인덱스로 가져와야 합니다.

예를 들어 fonts.js라는 이름의 파일을 만듭니다.

import { library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/pro-solid-svg-icons';
import { far } from '@fortawesome/pro-regular-svg-icons';
import { fal } from '@fortawesome/pro-light-svg-icons';
import { fad } from '@fortawesome/pro-duotone-svg-icons';
import { fab } from '@fortawesome/free-brands-svg-icons';

library.add(fab);
library.add(fas);
library.add(far);
library.add(fal);
library.add(fad);

이제 앱의 index.js에서 생성된 파일을 가져옵니다.

import '../configs/fonts.js'

이 경로는 예시일 뿐이므로 올바른 경로를 사용하고 있는지 확인하십시오.

무료 버전의 FontAwesome ;) @fortawesome

Font 설치 기가 막히다

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

사용하다

...
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'
import '@fortawesome/fontawesome-free'
import {library} from '@fortawesome/fontawesome-svg-core'
import {far} from '@fortawesome/free-regular-svg-icons'
import {fas} from '@fortawesome/free-solid-svg-icons'
import {fab} from '@fortawesome/free-brands-svg-icons'
library.add(far,fas,fab);


...

<span className='fa fa-coffee'/>
<FontAwesomeIcon icon='coffee' />
<FontAwesomeIcon icon={['fas', 'coffee']}/>
<FontAwesomeIcon icon={['fab','react']}/>

언급URL : https://stackoverflow.com/questions/48002619/cound-not-find-icon-react-fontawesome