react-accessbile-avatarpeeps

Get SVG Avatar component accessible and hand-drawn style for ReactJS.

• react-accessbile-avatarpeeps was inspired by Open Peeps which is a hand-drawn illustration library under the CC0 License.
• An avatar component is generated by svgr.

🌈 Try it

online playground storybook

🎉 Getting Started

npm i react-accessbile-avatarpeeps

or

yarn add react-accessbile-avatarpeeps

💫 Usage

Default avatar

import PeepAvatar from 'react-accessbile-avatarpeeps'

const Avatar = () => {
  return (
    <>
      <PeepAvatar
        name={'Peep1'}
        title={'a man width big smile'}
      />
    </>
  )
}

👉 result

Customized avatar

import PeepAvatar from 'react-accessbile-avatarpeeps'

const Avatar = () => {
  return (
    <>
      <PeepAvatar
        name={'Peep1'}
        title={'a man width big smile'}
        color={'#000'}
        backgroundColor={'#96C7C1'}
        borderRadius={'50%'}
        fontSize={'7em'}
      />
    </>
  )
}

👉 result

⚒ API

• name
• title
• fontSize
• borderRadius
• color
• backgroundColor

---

name

Type of name

• Identify avatar component

Type	Required
Peep1, Peep2,, Peep3, Peep4,Peep5,Peep6,Peep7,Peep8,Peep9,Peep10,Peep11,Peep12,Peep13,Peep14,Peep15,Peep16,Peep17,Peep18,Peep19,Peep20,Peep21,Peep22,Peep23,Peep24,Peep25,Peep26,Peep27,Peep28,Peep29,Peep30	Yes

title

• An accessible, short-text description of any SVG Type of title

• In order to be reliable and valid SVG Accessibility, NOT recommend "peep1". Insted, prefer "Man with big smile"

  Type	Required
  string	Yes

fontSize

• SVG width and height value are replaced by 1em.
• default vallue : 1em

Type	Required
string	No

borderRadius

• border-radius of avatar

Type	Required
string	No

color

• The color of the avatar outline

• default : #000

  Type	Required
  string	No

backgroundColor

• The color of the background
• default: none

Type	Required
string	No