랭킹으로 돌아가기

boringdesigners/boring-avatars

TypeScriptboringavatars.com

Boring avatars is an open source React library that generates custom, SVG-based avatars from any username and color palette.

reactjavascriptsvgavataravatar-componentavatar-generatoravatar-serviceavatar-placeholderrandom-avatarsavatars-constructorbeautiful-avatarsopen-source
스타 성장
스타
6.3k
포크
212
주간 성장
이슈
0
2k4k6k
2020년 12월2022년 10월2024년 9월2026년 7월
아티팩트npmnpm install boring-avatars
README

Boring avatars

Boring avatars is an open source React library and a subscription-based service that generates unique SVG-based user profile avatars from usernames, emails or any random strings.

hi

Install

npm install boring-avatars

Usage

import Avatar from 'boring-avatars';

<Avatar name="Maria Mitchell" />;

Props

Prop Type Default
size number or string 40px
square boolean false
title boolean false
name string Clara Barton
variant oneOf: marble, beam, pixel,sunset, ring, bauhaus marble
colors array ['#92A1C6', '#146A7C', '#F0AB3D', '#C271B4', '#C20D90']

Name

The name prop is used to generate the avatar. It can be the username, email or any random string.

<Avatar name="Maria Mitchell"/>

Variant

The variant prop is used to change the theme of the avatar. The available variants are: marble, beam, pixel, sunset, ring and bauhaus.

<Avatar name="Alice Paul" variant="beam"/>

Size

The size prop is used to change the size of the avatar.

<Avatar name="Ada Lovelace" size={88}/>

Colors

The colors prop is used to change the color palette of the avatar.

<Avatar name="Grace Hopper" colors={["#fb6900", "#f63700", "#004853", "#007e80", "#00b9bd"]}/>

Square

The square prop is used to make the avatar square.

<Avatar name="Helen Keller" square/>

API service

If you need to generate avatars on a large scale or if you just want to avoid using the React library, we offer a subscription plan for our API service.

Gumroad subscription.

Sponsors

TestMu AI

Boring avatars is generously sponsored by TestMu AI.

TestMu AI (formerly LambdaTest) is the world's first full-stack agentic AI quality engineering platform. Autonomous AI agents plan, author, execute, analyze, and optimize tests with humans in the loop, across 3,000+ browser/OS combinations and 10,000+ real devices. Trusted by 18,000+ enterprises including Microsoft, OpenAI, NVIDIA, and Vimeo.

Explore the platform: https://www.testmuai.com

관련 저장소
freeCodeCamp/freeCodeCamp

freeCodeCamp.org's open-source codebase and curriculum. Learn math, programming, and computer science for free.

TypeScriptnpmBSD 3-Clause "New" or "Revised" Licenselearn-to-codenonprofits
contribute.freecodecamp.org
452.4k45.6k
react/react

The library for web and native user interfaces.

JavaScriptnpmMIT Licensejavascriptreact
react.dev
246.7k51.3k
facebook/react

The library for web and native user interfaces.

JavaScriptnpmMIT Licensejavascriptreact
react.dev
233k47.8k
vercel/next.js

The React Framework

JavaScriptnpmMIT Licensereactserver-rendering
nextjs.org
141.1k31.5k
react/react-native

A framework for building native applications using React

C++MIT Licenseandroidapp-framework
reactnative.dev
126.2k25.2k
facebook/react-native

A framework for building native applications using React

C++MIT Licenseandroidapp-framework
reactnative.dev
120.9k24.5k
shadcn-ui/ui

A set of beautifully-designed, accessible components and a code distribution platform. Works with your favorite frameworks. Open Source. Open Code.

TypeScriptnpmMIT Licensecomponentsnextjs
ui.shadcn.com
119.5k9.5k
justjavac/free-programming-books-zh_CN

:books: 免费的计算机编程类中文书籍,欢迎投稿

GNU General Public License v3.0pythonjavascript
weibo.com/justjavac
117.7k28.2k
nextlevelbuilder/ui-ux-pro-max-skill

An AI SKILL that provide design intelligence for building professional UI/UX multiple platforms

PythonPyPIMIT Licenseai-skillsantigravity
uupm.cc
108.6k11.6k
react/create-react-app

Set up a modern web app by running one command.

JavaScriptnpmMIT Licensereactzero-configuration
create-react-app.dev
103.3k26.9k
facebook/create-react-app

Set up a modern web app by running one command.

JavaScriptnpmMIT Licensereactzero-configuration
create-react-app.dev
103.1k27k
ant-design/ant-design

An enterprise-class UI design language and React UI library

TypeScriptnpmMIT Licensereactui-kit
ant.design
98.8k54.7k