react simple badges

react-simple-badges

Bereaksi lencana untuk profil dan proyek Anda.

Temukan daftar lengkap lebih dari 1.400 lencana di lencana.md

Memasang

pnpm add react-simple-badges

npm i react-simple-badges

yarn add react-simple-badges

bun add react-simple-badges

Komponen apa ini?

Komponen yang membuat gambar lencana dari Shields.io menggunakan daftar ikon Simpleicons.org. Setiap 24 jam tindakan github dijalankan untuk memeriksa ikon baru. Jika mereka adalah versi baru, versi modul NPM baru dirilis dengannya. Modul ini dimaksudkan untuk digunakan sebagai komponen React Server. Menggunakan komponen async baru. Ini berarti dapat mengimpor daftar ikon besar untuk mendapatkan warna latar belakang yang Anda butuhkan tetapi tanpa meningkatkan waktu pemuatan halaman pengguna akhir. Tetapi ini berarti Anda membutuhkan kerangka kerja yang mendukung komponen server dan bereaksi 18.2.0 atau lebih baru.

Penggunaan

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

Contoh proyek di stackblitz.com

alat peraga untuk <Badge />

<Badge name="" /> diperlukan: string

Nama lencana yang Anda coba gunakan misalnya. "Instagram"

<Badge label="" /> opsional: string

String khusus untuk mengganti kata pada lencana misalnya. "Insta"

<Badge logoColor="" /> Opsional: String: Warna Hex

Menggantikan warna logo yang default ke putih misalnya. "#ffb900"

<Badge backgroundColor="" /> opsional: string: warna hex

Menggantikan warna latar belakang lencana misalnya. "#00e1ff"