aptos-avatars-react

Aptos Avatars React

Implementation of the Aptos Avatars shape library for React applications.

Installation

pnpm add aptos-avatars-react

How to Use

The avatar compoennt can be imported as a React component which renders an inline SVG element. If you choose to use a single shape, you can import the shape avatars directly. The package is built with ES Modules so the rest of the package will be tree-shaken out of your bundle.

import { AptosAvatar, Shape2 } from "aptos-avatars-react";

// Usage
const App = () => {
  return (
    <div>
      <AptosAvatar value="0xd2cf...cff23" border shadow />
      <Shape2 value="0xd2cf...dff23" />
    </div>
  );
};

export default App;

Props

name	type	default	description
value*	string	required	Unique identifier for the user (e.g., address or Aptos Name) to randomly generate a shape and color
size	number	32	Size of the icon
shadow	boolean	false	Toggle the border
border	boolean	false	Toggle the shadow
borderSize	number	2	Width of the border, in pixels
borderColor	string	#fff	Color of the border
radius	number	size	Border radius of the avatar, in pixels
displayValue	string	N/A	Value to be displayed on the avatar instead of value. This can be a name instead of an identifier
style	"character" | "shape"	"character"	Style of the avatar (either "character" or "shape")