react simple badges

React-simple-badges

Reaja crachás para seu perfil e projetos.

Encontre uma lista completa de mais de 1400 crachás em crachás.md

Instalar

pnpm add react-simple-badges

npm i react-simple-badges

yarn add react-simple-badges

bun add react-simple-badges

O que é esse componente?

Um componente que torna uma imagem de um crachá do Shields.io usando a lista Simpleicons.org de ícones. A cada 24 horas, uma ação do GitHub é executada para verificar se há novos ícones. Se eles forem novos, uma nova versão do módulo NPM será lançada com ele. Este módulo deve ser usado como um componente do React Server. Usando o novo componente assíncrono. Isso significa que ele pode importar a lista de ícones grandes para obter a cor de fundo necessária, mas sem aumentar a página dos usuários finais tempo de carregamento. Mas isso significa que você precisa de uma estrutura que suporta componentes do servidor e reaja 18.2.0 ou posterior.

Uso

 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" />
    </ >
  )
}

Exemplo de projeto em Stackblitz.com

adereços para <Badge />

<Badge name="" /> Necessário: String

O nome do crachá que você está tentando usar, por exemplo. "Instagram"

<Badge label="" /> Opcional: String

Uma string personalizada para substituir a palavra no crachá, por exemplo. "Insta"

<Badge logoColor="" /> Opcional: String: Cor hexadecimal

Substitui a cor do logotipo que o padrão é o branco, por exemplo. "#ffb900"

<Badge backgroundColor="" /> Opcional: String: Cor hexadecimal

Substitui a cor do fundo do crachá, por exemplo. "#00E1FF"