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サーバーコンポーネントとして使用することを目的としています。新しい非同期コンポーネントを使用します。つまり、大きなアイコンリストをインポートして、必要な背景色を取得できますが、エンドユーザーページの読み込み時間を増やすことはできません。しかし、これは、サーバーコンポーネントをサポートし、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="" />必須：文字列

EGを使用しようとしているバッジの名前。 「Instagram」

<Badge label="" />オプション：文字列

バッジ上の単語を置き換えるカスタム文字列。 「Insta」

<Badge logoColor="" /> optional：string：hex color

デフォルトの白にデフォルトのロゴの色を置き換えます。 「＃FFB900」

<Badge backgroundColor="" /> optional：string：hex color

バッジの背景の色を交換します。 「＃00e1ff」