react-accessbile-avatarpeeps v1.4.0

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

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

borderRadius

• border-radius of avatar

color

• The color of the avatar outline

• default : #000

  Type	Required
  string	No

backgroundColor

• The color of the background
• default: none