react simple icons

반응 단순 아이콘

이 패키지는 반응 구성 요소 세트로 패키지 된 간단한 아이콘 13.18.0을 제공합니다.

설치

프로젝트 디렉토리에 패키지를 다음과 같이 설치하십시오.

// with yarn
yarn add @icons-pack/react-simple-icons

// with npm
npm add @icons-pack/react-simple-icons

// with pnpm
pnpm add @icons-pack/react-simple-icons

// with bun
bun add @icons-pack/react-simple-icons

타입 스크립트 지원

용법

simpleicons.org를 사용하여 특정 아이콘을 찾을 수 있습니다. 아이콘을 가져올 때 아이콘의 이름은 상단 카멜 케이스임을 명심하십시오.

• Material Design { SiMaterialdesign } from @icons-pack/react-simple-icons
• azure devOps { SiAzuredevops } from @icons-pack/react-simple-icons 로 노출됩니다.

데모

Codesandbox를 편집합니다

기본 예

 import { SiReact } from '@icons-pack/react-simple-icons' ;

function BasicExample ( ) {
  return < SiReact color = '#61DAFB' size = { 24 } /> ;
} 

제목 변경

@icons-pack/react-simple-icons 구성 요소 이름을 참조하는 기본 제목을 제공합니다.

<title> 요소는 SVG 컨테이너 요소 또는 그래픽 요소에 대한 액세스 가능한 짧은 텍스트 설명을 제공합니다.

 import { SiReact } from '@icons-pack/react-simple-icons' ;

// title default "React"
function ChangeTitle ( ) {
  return < SiReact title = 'My title' color = '#61DAFB' size = { 24 } /> ;
} 

기본 색상을 사용하십시오

각 아이콘의 기본 색상을 사용하려면 색상을 default 으로 설정합니다.

 import { SiReact } from '@icons-pack/react-simple-icons' ;

function DefaultColorExample ( ) {
  return < SiReact color = 'default' size = { 24 } /> ;
}

기본 색상을 16 진로 사용하십시오

기본 색상을 16 진 문자로 사용하려면 Hex 아이콘 이름으로 추가하십시오.

 import { SiReact , SiReactHex } from '@icons-pack/react-simple-icons' ;

function DefaultColorExample ( ) {
  return < SiReact color = { SiReactHex } size = { 24 } /> ;
} 

맞춤형 스타일

 import { SiReact } from '@icons-pack/react-simple-icons' ;

function CustomStyles ( ) {
  return < SiReact className = 'myStyle' /> ;
} 

. myStyle {
  width : 35 px ;
  height : 35 px ;
}