글꼴이 좋은 아이콘 라이브러리의 반응 구성 요소.
Font Awesome V5+를 사용하는 경우 공식 React 구성 요소를 사용하십시오!. react-fontawesome Fontawesome V5를 지원하지 않습니다!
이 프로젝트는 더 이상 적극적으로 유지되지 않습니다. 가능하다면 위의 공식 구성 요소를 사용해보십시오!
npm install --save react-fontawesome참고 : 이 구성 요소에는 굉장한 CSS 또는 글꼴이 포함되어 있지 않으므로 빌드 프로세스에 추가하거나 CDN 버전에 연결하여 끝에있는 것을 포함시켜야합니다.
시작하는 가장 빠른 방법은 페이지의 <head> 에 링크 태그로 fontawesome을 가져 오는 것입니다.
< link href =" https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css " rel =" stylesheet " />원하는 버전의 Fontawesome 버전을 사용할 수 있도록 버전 번호를 변경할 수 있습니다.
WebPack을 사용하는 경우 fontawesome을 설치하고 Fontawesome Sass/Less를 가져 오며 글꼴 경로를 구성해야합니다. Webpack과 Fontawesome을 함께 작동시키는 방법에 대한이 블로그 게시물을 참조하십시오.
var React = require ( 'react' )
var FA = require ( 'react-fontawesome' )
React . render ( < FA name = "rocket" /> , document . body ) className 이름, 스타일 및 기타 소품을 추가하십시오 (모든 추가 소품은 구성 요소에 직접 전달됩니다). 정기적 인 사용
var React = require ( 'react' )
var FontAwesome = require ( 'react-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)' } }
/>
)
} ,
} )CSS 모듈 사용으로
import React from 'react'
import FontAwesome from 'react-fontawesome'
import faStyles from 'font-awesome/css/font-awesome.css'
var MyComponent = React . createClass ( {
render : function ( ) {
return (
< FontAwesome
className = "super-crazy-colors"
name = "rocket"
cssModule = { faStyles }
size = "2x"
spin
style = { { textShadow : '0 1px 0 rgba(0, 0, 0, 0.1)' } }
/>
)
} ,
} )위는 다음과 같은 출력을 만듭니다.
<span class="font-awesome__fa___2otTb font-awesome__fa-rocket___lfSov font-awesome__super-crazy-colors___3k583"></span>
전체 문서는 API 문서를 참조하십시오.
요청을 당기는 것을 환영합니다!
npm test 로 테스트 스위트를 실행하고 npm run format 으로 코드를 포맷하십시오. 테스트가 통과되고 새로운 기능에 대한 테스트를 작성하고 JSDOC에 대한 업데이트를 통해 API에 대한 문서 변경 사항을 작성해야합니다.
풀 요청을 제출하기 전에 npm run dist 실행하여 프로젝트를 구축하고 변경 사항을 커밋하십시오.
MIT © DANA WOODMAN