react icons
v5.3.0
프로젝트에서 사용하는 아이콘만 포함할 수 있는 ES6 가져오기를 활용하는 react-icons 사용하여 React 프로젝트에 인기 있는 아이콘을 쉽게 포함하세요.
yarn add react-icons
# or
npm install react-icons --save사용 예
import { FaBeer } from "react-icons/fa" ;
function Question ( ) {
return (
< h3 >
Lets go for a < FaBeer / > ?
< / h3 >
) ;
} 추가 사용 예와 다른 패키지의 아이콘을 사용하는 방법은 설명서를 참조하세요. 참고 : 각 아이콘 패키지에는 가져온 react-icons 아래에 자체 하위 폴더가 있습니다.
예를 들어 Material Design 의 아이콘을 사용하려면 import { ICON_NAME } from 'react-icons/md';
참고 이 옵션은 한동안 새 릴리스가 출시되지 않았습니다. 추가 정보 #593
프로젝트 크기가 커지면 이 옵션을 사용할 수 있습니다. 이 방법에는 패키지를 설치하는 데 시간이 오래 걸린다는 단점이 있습니다.
yarn add @react-icons/all-files
# or
npm install @react-icons/all-files --save사용 예
import { FaBeer } from "@react-icons/all-files/fa/FaBeer" ;
function Question ( ) {
return (
< h3 >
Lets go for a < FaBeer / > ?
< / h3 >
) ;
} | 아이콘 라이브러리 | 특허 | 버전 | 세다 |
|---|---|---|---|
| 순환 아이콘 | MPL-2.0 라이센스 | 1.0.0 | 288 |
| 폰트 굉장 5 | CC BY 4.0 라이센스 | 5.15.4-3-gafecf2a | 1612 |
| 폰트 굉장 6 | CC BY 4.0 라이센스 | 6.5.2 | 2045년 |
| 아이오니콘 4 | MIT | 4.6.3 | 696 |
| 아이오니콘 5 | MIT | 5.5.4 | 1332 |
| 머티리얼 디자인 아이콘 | Apache 라이센스 버전 2.0 | 4.0.0-98-g9beae745bb | 4341 |
| 타이피콘 | CC BY-SA 3.0 | 2.1.2 | 336 |
| Github Octicons 아이콘 | MIT | 18.3.0 | 264 |
| 깃털 | MIT | 4.29.1 | 287 |
| 루시드 | ISC | v5.1.0-6-g438f572e | 1215 |
| 게임 아이콘 | CC BY 3.0 | 12920d6565588f0512542a3cb0cdfd36a497f910 | 4040 |
| 날씨 아이콘 | 실 OFL 1.1 | 2.0.12 | 219 |
| 데비콘 | MIT | 1.8.0 | 192 |
| 개미 디자인 아이콘 | MIT | 4.4.2 | 831 |
| 부트스트랩 아이콘 | MIT | 1.11.3 | 2716 |
| 리믹스 아이콘 | Apache 라이센스 버전 2.0 | 4.2.0 | 2860 |
| 플랫 컬러 아이콘 | MIT | 1.0.2 | 329 |
| 그로멧 아이콘 | Apache 라이센스 버전 2.0 | 4.12.1 | 635 |
| 영웅 아이콘 | MIT | 1.0.6 | 460 |
| 영웅 아이콘 2 | MIT | 2.1.3 | 888 |
| 간단한 아이콘 | CC0 1.0 유니버설 | 12.14.0 | 3209 |
| 간단한 라인 아이콘 | MIT | 2.5.5 | 189 |
| IcoMoon 무료 | CC BY 4.0 라이센스 | d006795ede82361e1bac1ee76f215cf1dc51e4ca | 491 |
| 상자아이콘 | MIT | 2.1.4 | 1634년 |
| css.gg | MIT | 2.1.1 | 704 |
| VS 코드 아이콘 | CC BY 4.0 | 0.0.35 | 461 |
| 테이블러 아이콘 | MIT | 3.2.0 | 5237 |
| Themify 아이콘 | MIT | v0.1.2-2-g9600186 | 352 |
| 기수 아이콘 | MIT | @radix-ui/[email protected] | 318 |
| 형광체 아이콘 | MIT | 2.1.1 | 9072 |
| Icons8 라인 굉장 | MIT | 1.3.1 | 1544년 |
풀 요청을 제출하거나 이슈를 생성하여 더 많은 아이콘을 추가할 수 있습니다.
React Context API를 사용하여 반응 아이콘 소품을 구성할 수 있습니다.
React 16.3 이상이 필요합니다.
import { IconContext } from "react-icons" ;
< IconContext . Provider value = { { color : "blue" , className : "global-class-name" } } >
< div >
< FaFolder / >
< / div >
< / IconContext . Provider > ;| 열쇠 | 기본 | 메모 |
|---|---|---|
color | undefined (상속) | |
size | 1em | |
className | undefined | |
style | undefined | 크기와 색상을 덮어쓸 수 있습니다. |
attr | undefined | 다른 속성으로 덮어쓰기 |
title | undefined | 접근성을 위한 아이콘 설명 |
가져오기 경로가 변경되었습니다. 이전 스타일에서 다시 작성해야 합니다.
// OLD IMPORT STYLE
import FaBeer from "react-icons/lib/fa/beer" ;
function Question ( ) {
return (
< h3 >
Lets go for a < FaBeer / > ?
< / h3 >
) ;
} // NEW IMPORT STYLE
import { FaBeer } from "react-icons/fa" ;
function Question ( ) {
return (
< h3 >
Lets go for a < FaBeer / > ?
< / h3 >
) ;
}대규모 JS 번들로 끝나나요? 이 문제를 확인하세요.
버전 3부터는 vertical-align: middle 자동으로 제공되지 않습니다. IconContext를 사용하여 className을 지정하거나 인라인 스타일을 지정하세요.
< IconContext . Provider value = { { style : { verticalAlign : 'middle' } } } > className 스타일링요소
< IconContext . Provider value = { { className : 'react-icons' } } >CSS
. react-icons {
vertical-align : middle;
} @types/react-icons 에 대한 종속성을 삭제할 수 있습니다.
yarn remove @types/react-iconsnpm remove @types/react-icons ./build-script.sh 전체 프로젝트를 빌드합니다. 자세한 내용은 CI 스크립트를 참조하세요.
yarn
cd packages/react-icons
yarn fetch # fetch icon sources
yarn build먼저 아이콘 세트를 추가하려는 사람이 있는지 토론을 확인하십시오.
https://github.com/react-icons/react-icons/discussions/categories/new-icon-set
가져올 SVG 파일은 이 파일에서 관리됩니다. 이 파일을 편집하고 yarn fetch && yarn check && yarn build 실행하세요.
https://github.com/react-icons/react-icons/blob/master/packages/react-icons/src/icons/index.ts
참고 현재 프로젝트는 미리 보기 사이트에 대한 PR을 적극적으로 받아들이지 않습니다.
미리보기 사이트는 Astro+React로 구축된 react-icons 웹사이트입니다.
cd packages/react-icons
yarn fetch
yarn build
cd ../preview-astro
yarn start 데모는 쉬운 테스트를 위해 종속성으로 react-icons 추가된 Create React App 상용구입니다.
cd packages/react-icons
yarn fetch
yarn build
cd ../demo
yarn start SVG는 모든 주요 브라우저에서 지원됩니다. react-icons 사용하면 하나의 큰 글꼴 파일 대신 필요한 아이콘만 사용자에게 제공할 수 있으므로 프로젝트에서 어떤 아이콘이 사용되는지 인식하는 데 도움이 됩니다.
MIT
