Avataaars for FluentDoc

A fork of the original Avataaars React component, extended and maintained by the FluentDoc team to support enhanced avatar customization, worldbuilding traits, and identity expression for creative platforms.

Created by Pablo Stanley, originally implemented as a React component by Fang-Pen Lin. This version has been extended and modernized by Patrick Gaston for the FluentDoc platform.

Published packages are available at 👉 https://www.npmjs.com/org/fluentdoc

✨ Key Differences from Original

• Scoped to @fluentdoc/avataaars
• Added new identity traits for more diverse representation
• Built to support worldbuilding traits (fantasy, sci-fi, cultural additions)
• Maintained for use in FluentDoc, a platform for language creation & storytelling
• New identity traits:
  • 🧝 earringType: Hoop, Stud, Tribal
  • 🧑‍🎨 markingType: Warpaint, Scar, Tattoo
  • 🧑🏽 Expanded skinColor: Greenish, Ashen, BlueGray

🚀 Installation

npm install @fluentdoc/avataaars

Or with yarn:

yarn add @fluentdoc/avataaars

💡 Usage

import * as React from 'react'
import Avatar from '@fluentdoc/avataaars'

export default function MyComponent() {
  return (
    <div>
      Your avatar:
      <Avatar
        style={{ width: '100px', height: '100px' }}
        avatarStyle="Circle"
        topType="LongHairMiaWallace"
        accessoriesType="Prescription02"
        hairColor="BrownDark"
        facialHairType="Blank"
        clotheType="Hoodie"
        clotheColor="PastelBlue"
        eyeType="Happy"
        eyebrowType="Default"
        mouthType="Smile"
        skinColor="Light"
        earringType="Hoop"
        markingType="Warpaint"
      />
    </div>
  )
}

🧩 Piece Component

To render individual pieces of the avatar:

import { Piece } from '@fluentdoc/avataaars';

export default function Pieces() {
  return (
    <div>
      <Piece pieceType="mouth" pieceSize="100" mouthType="Eating" />
      <Piece pieceType="eyes" pieceSize="100" eyeType="Dizzy" />
      <Piece pieceType="eyebrows" pieceSize="100" eyebrowType="RaisedExcited" />
      <Piece pieceType="accessories" pieceSize="100" accessoriesType="Round" />
      <Piece pieceType="top" pieceSize="100" topType="LongHairFro" hairColor="Red" />
      <Piece pieceType="facialHair" pieceSize="100" facialHairType="BeardMajestic" />
      <Piece pieceType="clothe" pieceSize="100" clotheType="Hoodie" clotheColor="Red" />
      <Piece pieceType="graphics" pieceSize="100" graphicType="Skull" />
      <Piece pieceType="skin" pieceSize="100" skinColor="Brown" />
      <Piece pieceType="marking" pieceSize="100" markingType="Tattoo" />
    </div>
  )
}

🔧 Advanced Usage & Customization

To build your own avatar editor, use the Avatar component directly along with option props.

For inspiration, explore the original Avataaars Generator or reference this fork’s additions in the src/avatar directory.

📦 Publish Location

All FluentDoc-scoped packages are published at:

🔗 https://www.npmjs.com/org/fluentdoc

🧙 Future Plans

• Additional fantasy traits (horns, elemental features)
• Cultural headwear & clothing
• Mood presets and dynamic expressions
• World-themed packs for use across conlangs, character creation, and storytelling

License

MIT (based on the original work by Pablo Stanley and Fang-Pen Lin)