DOCSEARCHbyAlgolia
Submit Docs

avvvatars-react

repository·main·Indexed 23 days ago

https://github.com/nusu/avvvatars

A lightweight React library for generating unique, deterministic placeholder avatars based on a provided string. It supports 40 colors and 60 shapes, allowing for customization of size, style (character or shape), borders, and shadows. The library includes the Avvvatars component and individual SVG shape components.

Tokens
1.9K
Snippets
3
Records
17
Agent score
84%

What's inside avvvatars-react

  2. Get started with Avvvatars

    main

    Import the Avvvatars component and provide a required value prop. The value string determines the unique avatar generated; the same string will always produce the same avatar.

    import Avvvatars from 'avvvatars-react'

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

  6. Configure Avvvatars props

    main

    The Avvvatars component accepts several props to customize the appearance of the generated avatar:

    • value (string, required): The seed string used to generate a unique avatar.
    • displayValue (string, optional): Overrides the default text (which is typically the first two letters of the value).
    • style (character | shape, default: 'character'): Determines whether to use letters or unique shapes.
    • size (number, default: 32): The dimensions of the avatar in pixels.
    • shadow (boolean, default: false): Enables or disables a shadow around the avatar.
    • radius (number, default: size): Sets the corner radius. Setting it to the size value results in a circle.
    • border (boolean, default: false): Toggles a border around the avatar.
    • borderSize (number, default: 2): Sets the width of the border.
    • borderColor (string, default: '#fff'): Sets the color of the border.

  8. Use the Avvvatars component

    main

    The Avvvatars component generates unique, visually consistent avatars based on a provided value. The value should be a unique identifier for a user (such as an email, user ID, or full name) to ensure the same user always receives the same avatar.

    By default, the component renders a 'character' style (initials on a colored background). You can switch to a 'shape' style or customize the size, shadow, border, and radius.

  9. Use available shape components

    main
    Avvvatars provides a collection of SVG shape components that can be used as the style property for an avatar. Each component accepts standard ShapeProps (which include SVG attributes like className, style, etc.). These shapes are exported as individual React components named Shape40 through Shape60 (based on their Figma design IDs).

  10. Use the Shape component

    main

    The Shape component renders a geometric or character-based shape based on a provided name. It is wrapped in a ShapeWrapper that handles layout (inline-flex, middle alignment) and color application via CSS.

    To use it, provide a name from the available ShapeNames, a color string, and an optional size.

  11. Use individual shape components in Avvvatars

    main
    The avvvatars-react package exports several individual SVG shape components (e.g., Shape17, Shape18, etc.) that can be used directly. These components accept standard ShapeProps, allowing you to customize their appearance via props like size, color, or other SVG attributes. They are designed to be used as the style property when configuring an avatar.

  12. Use Shape components for custom avatar styles

    main

    The avvvatars package exports several individual React components representing different geometric shapes (e.g., Shape1, Shape2, ..., Shape16). These components can be used directly to render specific SVG-based avatar backgrounds. Each shape component accepts standard SVG props and a width prop via the ShapeProps interface.

    All shapes use currentColor for their fill, allowing you to control the shape's color using the CSS color property on the component or its parent.