boring-avatars

Install the boring-avatars package using npm to use the React component for generating unique SVG-based user profile avatars.

npm install boring-avatars

Import the Avatar component from boring-avatars and provide a name prop (username, email, or any random string) to generate a unique avatar.

import Avatar from 'boring-avatars';

<Avatar name="Maria Mitchell" />;

Pass an array of color strings to the colors prop to define a custom color palette for the avatar.

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

Add the square boolean prop to render the avatar as a square instead of the default circular shape.

<Avatar name="Helen Keller" square/>

Use the size prop to set the dimensions of the avatar using a number or a string (e.g., 88 or "88px").

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

Use the variant prop to switch between different visual themes. Available options are: marble, beam, pixel, sunset, ring, and bauhaus.

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

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

• name (string): The seed used to generate the avatar. Defaults to Clara Barton.
• variant (oneOf: marble, beam, pixel, sunset, ring, bauhaus): Changes the visual theme. Defaults to marble.
• size (number | string): Sets the dimensions. Defaults to 40px.
• colors (array): An array of color strings to define the palette.
• square (boolean): If true, renders a square avatar instead of circular. Defaults to false.
• title (boolean): Enables a title attribute. Defaults to false.

The Avatar component is the primary entrypoint for generating various avatar styles. It accepts a variant to choose the visual style, a colors array for the color palette, and a name for seed-based generation.

Available variants include:

• pixel
• bauhaus
• ring
• beam
• sunset
• marble

Note: geometric is deprecated (use beam) and abstract is deprecated (use bauhaus).

The Avatar component accepts the following props: