react simple badges

反应简单的badges

对您的个人资料和项目的反应徽章。

找到徽章中1400多个徽章的完整列表。

安装

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="" />必需：字符串

您试图使用EG的徽章名称。 “ Instagram”

<Badge label="" />可选：字符串

自定义字符串以替换徽章上的单词。 “ Insta”

<Badge logoColor="" />可选：字符串：十六进制颜色

替换默认为白色的徽标的颜色。 “＃ffb900”

<Badge backgroundColor="" />可选：字符串：HEX颜色

取代徽章的背景的颜色，例如。 “＃00e1ff”