Font Awesome 5는 리액트에 소셜/브랜드 아이콘을 사용합니다.

Font Awesome 5는 리액트에 소셜/브랜드 아이콘을 사용합니다.

Font Awesome 문서에는 일반/솔리드 글꼴을 React에 추가하는 방법만 나와 있습니다.소셜 아이콘은 어떤가요?

먼저 짐을 집어들었다.

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

주의: 교체했습니다.npm i --save @fortawesome/free-solid-svg-icons \와 함께npm i --save @fortawesome/free-brands-svg-icons \

그런 다음 반응:

import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faFacebookF } from '@fortawesome/free-brands-svg-icons' 

library.add(faFacebookF); 

컴포넌트를 사용해 보았다.

<FontAwesomeIcon icon="fa-facebook-f" />

시도조차 하지 않았다.

콘솔에 계속 접속하여

{prefix: "fas", iconName: "fa-facebook-f"} 아이콘을 찾을 수 없습니다.

어떻게 해서든 그 돈을 받아야 할 수 있어야 한다고 생각한다.fab프레픽스를 사용합니다.

https://fontawesome.com/icons/facebook-f?style=brands 를 사용하고 싶은 아이콘입니다.

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faFacebook } from "@fortawesome/free-brands-svg-icons"

const icon = <FontAwesomeIcon icon={faFacebook} />

FontAwesome의 GitHub에서 브랜드 아이콘의 철자/케이스를 찾았습니다.

시험:

<FontAwesomeIcon icon={['fab', 'facebook-f']} />

폰트 awesome에는 다른 아이콘 세트가 있습니다.솔리드 세트(fas디폴트는 ) 입니다.facebook 아이콘은 브랜드 세트에 있습니다(fab).

먼저 실행한 명령을 실행해야 합니다.

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

먼저 설치하지 않고 Import를 시도했는데, 물론 잘 되지 않았습니다.

일단은

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

다음으로 프로젝트에 Import합니다.

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {  faFacebookF , } from '@fortawesome/free-brands-svg-icons';

이것을 사용하다

<FontAwesomeIcon icon={faFacebookF} />

먼저 이러한 종속성을 설치합니다.

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

커스텀 라이브러리 작성initFontAwesome.js이 코드를 붙여넣습니다.

import { library } from "@fortawesome/fontawesome-svg-core";
import {fab, faTwitterSquare, faFacebook, faLinkedin, faGithub} from "@fortawesome/free-brands-svg-icons";

function initFontAwesome() {
    library.add(fab, faTwitterSquare, faFacebook, faLinkedin, faGithub);
}
export default initFontAwesome;

에서App.js다음 코드를 포함하다

import initFontAwesome from "./initFontAwesome";
initFontAwesome();

function App() {
  return (

   {/*---------Some code----------*/}

  );
}
export default App;

인Home.jsx다음 코드를 포함하다

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

{/*-------some Code---------*/}

<FontAwesomeIcon icon={['fab', 'twitter']} />

<FontAwesomeIcon icon={['fab', 'facebook']} />

<FontAwesomeIcon icon={['fab', 'linkedin']} />

<FontAwesomeIcon icon={['fab', 'github']} />

{/*-------Some Code---------*/}

This worked for me. I hope this helps!

언급URL : https://stackoverflow.com/questions/52687229/font-awesome-5-use-social-brand-icons-in-react