예쁜 리액트 프로필 아바타 라이브러리 - avvvatars

세 번째 아바타 라이브러리 소개입니다. 이번에는 리액트에서 사용할 수 있는 리액트용 라이브러리입니다.

저는 리액트를 사용하지 않지만, 그래도 좋은 라이브러리이고 디자인도 예뻐서 소개하고 싶었습니다.

 

리액트를 모르는 저도 알 정도로 사용법도 간단합니다.

필요한 분이 이 글을 보고 좋은 영향을 받았으면 하는 마음으로 이렇게 소개합니다.

 

AVVVATARS

Free UI Avatars for Your Next React Project!!

라이브 데모

avvvatars는 알파벳 글자와 도형으로 사용자의 프로필을 표현해줍니다.

40가지 색상과 60가지 모양의 조합이라 총 2400개의 개성 있는 프로필을 만들 수 있습니다.

사이즈는 가볍고 다양한 옵션도 있어서 예쁜 랜덤 프로필 만드는데 함께 사용하면 좋을 것 같습니다.

 

 

웹사이트 (website)

https://avvvatars.com/

Avvvatars - Open Source React UI Avatar Library

Github

https://github.com/nusu/avvvatars

GitHub - nusu/avvvatars: Beautifully crafted unique avatar placeholder for your next react project

데모 (Live Demo)

https://avvvatars-demo-nusualabuga.vercel.app/

https://avvvatars-demo-nusualabuga.vercel.app/

 

 

사용법 (How to use)

설치 (installation)

yarn과 npm에서 아래와 같이 터미널에 입력하면 설치할 수 있습니다.

 

yarn

yarn add avvvatars-react

npm

npm install avvvatars-react

 

 

사용 (Getting Started)

avvvatars-react를 import 하고 <Avvvatars>컴포넌트를 사용하면 끝입니다.

기본적으로 <Avvvatars>컴포넌트에 value 값을 넣어야 합니다. value는 이메일, 닉네임, 이름 등의 텍스트입니다.

import Avvvatars from 'avvvatars-react'

export default function MyAvatar() {
  return (
    <Avvvatars value="best_user@gmail.com" />
  )
}

 

옵션 (Option)

value

• 설명 : 필수값 입니다. 각 값은 이 값에 고유한 임의의 아바타를 생성하므로 플러그인이 렌더링될 때마다 동일한 결과를 얻을 수 있습니다.
• 필수 여부 : ⭕
• 타입 : string
• 기본값 :
• 예시 : <Avvvatars value="best_user@gmail.com" />

displayValue

• 설명 : 기본 텍스트 재정의
• 필수 여부 : ❌
• 타입 : string
• 기본값 :
• 예시 : <Avvvatars value="best_user@gmail.com" displayValue="BE" />

style

• 설명 : 모양 또는 캐릭터의 아바타 스타일을 선택합니다.
• 필수 여부 : ❌
• 타입 : character | shape
• 기본값 : character
• 예시 : <Avvvatars value="best_user@gmail.com" style="character" />

size

• 설명 : 아바타 크기 (px)
• 필수 여부 : ❌
• 타입 : number
• 기본값 : 32
• 예시 : <Avvvatars value="best_user@gmail.com" size={32} />

shadow

• 설명 : 아바타 주변에 그림자를 표현합니다.
• 필수 여부 : ❌
• 타입 : boolean
• 기본값 : false
• 예시 : <Avvvatars value="best_user@gmail.com" shadow={false} />

radius

• 설명 : 아바타 모서리의 모양 (숫자가 작을수록 날카로운 모서리를 만듭니다.)
• 필수 여부 : ❌
• 타입 : number
• 기본값 :
• 예시 : <Avvvatars value="best_user@gmail.com" radius={10} />

border

• 설명 : 테두리 여부
• 필수 여부 : ❌
• 타입 : boolean
• 기본값 : false
• 예시 : <Avvvatars value="best_user@gmail.com" border={false} />

borderSize

• 설명 : 테두리 크기
• 필수 여부 : ❌
• 타입 : number
• 기본값 : 2
• 예시 : <Avvvatars value="best_user@gmail.com" borderSize={2} />

borderColor

• 설명 : 테두리 색
• 필수 여부 : ❌
• 타입 : string
• 기본값 : #fff
• 예시 : <Avvvatars value="best_user@gmail.com" borderColor="#fff" />

 

 

피그마 파일 (figma)

https://www.figma.com/community/file/1084861895116393858/Avvvatars.com---Open-Source-React-UI-Avatar-Library-(Community) 

Figma

 

보너스

위의 아바타의 Shape가 예뻐서 따로 SVG를 얻고 싶으면 아래의 사이트로 가서 이용할 수 있습니다.

 

https://shapes.framer.website/

✤ SVG Shapes