React-Avataaars v2.0.0: React component for avataaars

icon
Latest Release: v2.0.0

Changes:

  • React upgraded to 17.0.0
  • Upgrade other packages
  • Fixed security deps warnings
  • React legacy method now prefixed with UNSAFE
  • Added Blue color for hair
  • Fix SVG ids not unique so multiple avataaars on the same page will be broken issue
Source code(tar.gz)
Source code(zip)

React component for Avataaars

The core React component for Avataaars Generator developed by Fang-Pen Lin, based on the Sketch library Avataaars designed by Pablo Stanley.

Features

  • SVG based
  • Light weight
  • Scalable
  • Easy to use
  • Easy to integrate with custom editor
  • Comes with official editor

Usage

First, you need to install the avataaars component package, here you run

yarn add avataaars

or

npm install avataaars --save

if you are using npm. Then, in your React app, import the Avataaar component and put it where you like it to be, for example

import * as React from 'react'
import Avatar from 'avataaars'

export default class MyComponent extends React.Component {
  render () {
    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'
        />
      </div>
  }
}

To showcase individual pieces of the avatar you can use the Piece component, for example:

import * as React from 'react'
import {Piece} from 'avataaars';

export default class MyComponent extends React.Component {
  render () {
    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" />
      </div>
  }
}

To explore avatar options and generate the React code, please use Avataaars Generator

Collect options

To build your own avatar editor, you may want to use lower level Avatar component along with OptionContext. For more details usage, please reference to source code of avataaars-generator, see how it uses OptionContext to collection available options.

Comments

  • fill-opacity not available on <g>
    fill-opacity not available on

    Jan 1, 2021

    Following docs https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-opacity fill-opacity attribute has no effect on

    As a presentation attribute, it can be applied to any element but it has effect only on the following eleven elements: <altGlyph>, <circle>, <ellipse>, <path>, <polygon>, <polyline>, <rect>, <text>, <textPath>, <tref>, and <tspan>

    The results (don't be scared ^^): image

    I will create a PR to avoid this behavior to move fill-opacity to the right element. Hope this package is still maintained

    Reply
  • <g> not support fillOpacity attribute
    not support fillOpacity attribute

    Jan 1, 2021

    Regarding #38 not support fill-opacity. This PR allow to get opacity on right elements

    Reply
  • avataaars@1.2.2 requires a peer of react@^16.0.0 but none is installed
    [email protected] requires a peer of [email protected]^16.0.0 but none is installed

    Mar 7, 2021

    I have used the latest version of react17

    Reply
  • Lots of bug fixes and program improvements
    Lots of bug fixes and program improvements

    Aug 1, 2021

    This project has some historical PRs that cannot be merged because of file conflicts, so I updated the code and resolved the conflict. Below is the merged code (Thank these authors for their hard work).

    • https://github.com/fangpenlin/avataaars/pull/49
    • https://github.com/fangpenlin/avataaars/pull/44
    • https://github.com/fangpenlin/avataaars/pull/31
    • https://github.com/fangpenlin/avataaars/pull/26
    • https://github.com/fangpenlin/avataaars/pull/16
    • https://github.com/fangpenlin/avataaars/pull/5

    In addition, I upgraded the dependencies to the latest, which resolved the security issues that prompted when installing the dependencies.

    And it solves a warning generated when the no-op function is executed when the server is rendering. Currently, the newer v16 version and the latest version of react are supported.

    I wonder if the maintainer can merge these changes and release a new version?

    Before the author merges the code, if you have a need for the above functions, you can install a temporary replacement package:

    npm i @bugfix/avataaars --save
    
    Reply
  • Add 'fillCircle' prop
    Add 'fillCircle' prop

    Aug 20, 2021

    Hi, fangpenlin. Glad to see your great work! I add a prop ‘fillCircle' to change the circle background. Here is the usage:

    <Avatar
      avatarStyle='Circle'
      fillCircle="#f00"
      // ... other props
    />
    

    Hoping to merge.

    Reply
  • Legacy context API has been detected within a strict-mode tree & Unsafe life cycle methods
    Legacy context API has been detected within a strict-mode tree & Unsafe life cycle methods

    Dec 23, 2021

    Reply
  • ranem to UNSAFE_componentWillUpdate
    ranem to UNSAFE_componentWillUpdate

    Mar 27, 2021

    Warning: Legacy context API has been detected within a strict-mode tree.

    The old API will be supported in all 16.x releases, but applications using it should migrate to the new version.

    Please update the following components: AvatarComponent, Selector

    Learn more about this warning here: https://reactjs.org/link/legacy-context

    Reply
  • Can I use this in my react native application?
    Can I use this in my react native application?

    May 27, 2021

                                                                                                                                                                                                           
    Reply
  • Does it work in react-native components?
    Does it work in react-native components?

    Oct 18, 2018

                                                                                                                                                                                                           
    Reply
  • Adding uniqueId-ification to masks/paths in main component
    Adding uniqueId-ification to masks/paths in main component

    Jul 13, 2020

    It looks like effort was made to ensure masks and path elements would have unique ids in the various pieces. But that same effort wasn't done in the main Avatar class. In our app, this caused the avatars to disappear if the first avatar on the page was destroyed or hidden (assumedly because all the avatars were reusing the masks/paths from that initial svg).

    The diff is quite noisy because I think I compiled it with a newer version of typescript (not sure though, I'm not a heavy typescript user). All of my changes were isolated in src/avatar/index.tsx.

    Reply
  • How to add custom components?
    How to add custom components?

    Jul 16, 2019

    Hello,

    I'm wondering what the workflow is for adding additional components to this system. I've got the original Avatar Library open in Sketch, but I'm not clear on how to export components into the React Component format used to store the individual elements in this project. Any help would be greatly appreciated!!! Thanks for making this, it's awesome!

    Reply
  • Ability to link directly to a generated SVG/PNG
    Ability to link directly to a generated SVG/PNG

    Dec 29, 2017

    The ability to download a generated SVG or PNG is great, but I'd love to be able to link directly to the SVG or PNG file.

    Use case here is generating random avatars for user profiles on a web app.

    Basically want to use this app as an API server for generating these and then link to randomly generated images.

    example.com/?accessoriesType=Prescription01&avatarStyle=Transparent&clotheColor=Blue01&clotheType=BlazerShirt&eyeType=Hearts&eyebrowType=SadConcerned&facialHairColor=Black&facialHairType=BeardLight&graphicType=Resist&hairColor=Black&mouthType=Smile&skinColor=Light&topType=LongHairMiaWallace.svg
    

    (Note the added .svg on the end of the URL)

    Reply