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") |