react simple badges

반응-간단한 바지

프로필 및 프로젝트에 배지에 반응합니다.

배지에서 1400 개가 넘는 배지의 전체 목록을 찾으십시오 .md

설치하다

pnpm add react-simple-badges

npm i react-simple-badges

yarn add react-simple-badges

bun add react-simple-badges

이 구성 요소는 무엇입니까?

simpleicons.org 아이콘 목록을 사용하여 shields.io의 배지 이미지를 렌더링하는 구성 요소. 24 시간마다 새로운 아이콘을 확인하기 위해 GitHub 조치가 실행됩니다. 새로운 NPM 모듈 버전이 새로 릴리스되면 해당됩니다. 이 모듈은 React Server 구성 요소로 사용됩니다. 새로운 비동기 구성 요소 사용. 즉, 큰 아이콘 목록을 가져와 필요한 배경색을 얻을 수 있지만 최종 사용자 페이지로드 시간을 늘리지 않으면 서 있습니다. 그러나 이것은 서버 구성 요소를 지원하고 18.2.0 이상 반응하는 프레임 워크가 필요하다는 것을 의미합니다.

용법

 import { Badge } from "react-simple-badges"

export default async function HomePage ( ) {
  return (
    < >
      < Badge name = "Node.js" style = { { width : 200 } } logoColor = "#eb4034" />
      < Badge name = "YouTube Gaming" label = "Youtube" />
      < Badge name = "Valve" label = "Value Please fix" style = { { padding : 10 } } />
      < Badge name = "Tesla" backgroundColor = "#32a853" />
    </ >
  )
}

stackblitz.com의 예제 프로젝트

<Badge /> 에 대한 소품

<Badge name="" /> 필수 : ​​문자열

예를 들어 사용하려는 배지의 이름. "인스 타 그램"

<Badge label="" /> 선택 사항 : 문자열

배지에서 단어를 대체하기위한 사용자 정의 문자열. "Insta"

<Badge logoColor="" /> 선택 사항 : 문자열 : hex 색상

기본적으로 로고의 색상을 기본적으로 흰색으로 대체합니다. "#ffb900"

<Badge backgroundColor="" /> 선택 사항 : 문자열 : hex 색상

배지 배경의 색상을 대체합니다. "#00e1ff"