fangpenlin / avataaars

React component for avataaars

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.

avataaars's Issues

Does it work in react-native components?

add ref prop to access svg html

Hey I would like to use a ref to get the HTML from the avatar svg, it would help with the avataaar-generator too because that seems to use ReactDOM to get the node to download. Thanks!

React 18 update

npm ERR! react@"^18.2.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^17.0.0" from [email protected]
npm ERR! node_modules/avataaars
npm ERR! avataaars@"*" from the root project

Is this a react native library?

Is this a react native library if yes, how can i use it in my android+ ios app..if not, than what is it nd how can i covert it into react native..Thanks in advance✌️

the background is filled with a skinColor square.

If the mobile side menu and the body display avatars at the same time, the background is filled with a skinColor square.
When Avatar disappears by folding items in the side menu, the square of body disappears.
This is what happens when they are on a different page.

fill-opacity not available on <g>

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 ^^):

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

npmjs package requires 'npm' as a dependency

Hi,
When installing avataaars with npm install avataaars it includes the npm v6.4.1 package and all of it's dependencies with it - 388 packages.

The npmjs.org page lists npm as a dependency, yet the package.json file in this repo doesn't list it.

What's going on here?

Usage with require vs import

Is it possible to use this component when importing it as
let Avatars = require('avataaars');?

I was hoping the following would work

       ReactDOM.render( 
            React.createElement( Avatars, {avatarStyle:'Circle'}, null),
            document.getElementById('root')
        );

But Avatars is an object and createElement needs a class or function.

is there some API?

Hi!

Exists som API for this? Should be a great feature!

Thanks!

Duplicate id in svg

I render multiple avatars in a custom avatar editor and when some of them are removed from the DOM, then the remaining svg does not render well anymore on Safari only.

I have tried the following code (shivam1410/fangpenlin-avataaars-generator-angular#5) but it did not work, on the contrary, it broke the svg:

var svgSel = '#root > div > div > main > main > div > div > div.avatar-main-preview > svg';
document.querySelectorAll(svgSel + ' [mask^="url("]').forEach(node => {
    var attributMask = node.getAttribute("mask");
    node.setAttribute("mask",  + attributMask.replace('url(', 'url(' + location.href));
});
document.querySelectorAll(svgSel + ' [filter^="url("]').forEach(node => {
    var attributFilter = node.getAttribute("filter");
    node.setAttribute("filter",  + attributFilter.replace('url(', 'url(' + location.href));
});
document.querySelectorAll(svgSel + ' [fill^="url("]').forEach(node => {
    var attributFill = node.getAttribute("fill");
    node.setAttribute("fill",  + attributFill.replace('url(', 'url(' + location.href));
});

Could this be because:

• there is a duplicate id of "Avataaar" inside src/avatar/index.tsx?
• there is id="Mask" in 2 separate files: src/avatar/index.tsx and src/avatar/top/WinterHat1.tsx?

My confusion here is:

• should we use a class instead of an id
• or have completely 2 different names for the 2 ids that are conflicting here?

Thank you!

Can I use this in my react native application?

Warning on componentWillMount

There is an error in the terminal every time an avatar is rendered. It should be easy to solve since it is just asking to change the used method. This is the error:

Warning: componentWillMount has been renamed, and is not recommended for use. See https://reactjs.org/link/unsafe-component-lifecycles for details.

* Move code from componentWillMount to componentDidMount (preferred in most cases) or the constructor.

And the line it is referring to is this one:

avataaars/src/index.tsx

Line 42 in e16cf02

componentWillMount () {

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

I have used the latest version of react17

How to add custom components?

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!

ranem to UNSAFE_componentWillUpdate

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

How do I change the circle background color?

How do I change the circle background color?

Uncaught TypeError: Cannot read property 'addStateChangeListener' of undefined

I get the above issue when including the avatar in a package. I'm building the package using create-react-library.

React version: 16.8.6

how to export/render individual components for custom selectors

I'm trying to design an UI similar to Google Allo,
where the selector is a grid with the different elements shown as icons.
To render individually the different elements I'd need to be able to do something like

import { BlazerShirt } from 'avataaars/clothes'

Would this be an easy addition? I'm not familiar with TypeScript otherwise I'd attempt a PR.
Thanks.
Here is the desired UI

Supporting react-native

I love this library and would like to help porting it to react-native 🎉

@fangpenlin Would you prefer me to create a seperate react-native-avataaar repo and import the original avataaar as a dependency or try to work on a pull request so this repo supports both web and react-native (via react-native-svg)?

Issue displaying in Firefox

When the Avataaar component displays in Firefox, it's HUGE. Is there a workaround for this?

Any suggestions on how to implement this in angular 9?

Random seed

Hey there!

This library looks amazing and I'm about to implement it into a project now. Any chance you'd be interested in having an avatar generated given a seed phrase? It could look something like this:

<Avatar seed="[some-random-string]" />

Any time Avatar received that seed string it would output the same avatar, similar to the way you can replicate Minecraft worlds by providing it with the same seed phrase upon generation.

Awesome work and thanks for building this!!

When I update any style the avataaar , got a warning.

When the 1st time to change one style of avataaar. the develop tools has a warning message.
but when I change style again , there is no warning.
There is occured when the 1st time page loaded.

Head-export-handler-for-browser.js:72 Warning: Can't perform a React state update on a component that hasn't mounted yet. This indicates that you have a side-effect in your render function that asynchronously later calls tries to update the component. Move this work to useEffect instead.
 
at Selector (webpack-internal:///./node_modules/avataaars/dist/options/Selector.js:31:47)
    at FacialHair (webpack-internal:///./node_modules/avataaars/dist/avatar/top/facialHair/index.js:29:42)
    at g
    at g
    at g
    at Hat (webpack-internal:///./node_modules/avataaars/dist/avatar/top/Hat.js:24:47)
    at Selector (webpack-internal:///./node_modules/avataaars/dist/options/Selector.js:31:47)
    at Top (webpack-internal:///./node_modules/avataaars/dist/avatar/top/index.js:58:42)
    at g
    at g
    at g
    at g
    at svg
    at Avatar (webpack-internal:///./node_modules/avataaars/dist/avatar/index.js:34:47)
    at AvatarComponent (webpack-internal:///./node_modules/avataaars/dist/index.js:34:47)

My code show below

import React from 'react'
import { Dialog, DialogTitle, DialogContent, DialogActions, Button, Select, MenuItem, InputLabel, Box } from '@mui/material'
import { useContext } from 'react'
import { ProfileContext } from './ProfileContextProvider'
import { debugLog } from '51cloudclass-utilities/src/utils'
import Avatar, {  } from 'avataaars';


const MyAvataaar = () => {

    const { topStyle } = useContext(ProfileContext)

    return <Avatar
        style={{ width: '200px', height: '200px' }
        }
        avatarStyle='Circle'
        topType={topStyle}
        // accessoriesType='Prescription02'
        hairColor='BrownDark'
        facialHairType='Blank'
        // clotheType='Hoodie'
        // clotheColor='PastelBlue'
        eyeType='Happy'
        eyebrowType='Default'
        mouthType='Smile'
        skinColor='Light'
    />
}

const AvataaarDialog = () => {

    const { open, closeDialog, topStyle, setTopStyle } = useContext(ProfileContext);


    const handleChangeAvataaar = () => {
        debugLog("change avataaar")
    }

    const changeStyle = (e) => {
        const target = e.target;
        debugLog("name of target: ", target.name);
        switch (target.name) {
            case "top-style":
                setTopStyle(e.target.value);
                break;
            default:
                return
        }

    }

    return (
        <Dialog open={open} onClose={closeDialog} >
            <DialogTitle>
                我们不一样，头像也扮靓
            </DialogTitle>
            <DialogContent className="flex flex-col gap-2">
                <MyAvataaar />
                <Box className="w-full flex flex-col gap-2">
                    <InputLabel id="top-style">发型</InputLabel>
                    <Select defaultValue='NoHair' size="small" name="top-style" labelId='top-style' value={topStyle} onChange={changeStyle}>
                        <MenuItem value="NoHair">我佛慈悲</MenuItem>
                        <MenuItem value="Hat">牛仔帽</MenuItem>
                        <MenuItem value="LongHairDreads">脏发</MenuItem>
                    </Select>
                </Box>
            </DialogContent>
            <DialogActions>
                <Button
                    onClick={closeDialog}
                    color="primary"
                >
                    取消
                </Button>
                <Button variant="contained" onClick={handleChangeAvataaar}>
                    更换
                </Button>
            </DialogActions>
        </Dialog>

    )
}

export default AvataaarDialog

How can I built the dist folder?

I made some modifications but I can't seem to know how to build the dist folder.

Thanks!

Ability to link directly to a generated SVG/PNG

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)

List of all possible avatar option variants per type.

I see that generator uses quite complicated logic with context to get list of all possible variants for each avatar prop. Is there any reason behind that? Is it possible to get simple object of all possible variants per prop? something like:

{
  'facialHairType': ['MoustacheFancy', 'MoustacheMagnum', ...],
  'facialHairColor': ['Auburn', 'Black', ...],
  ...
}

It will simplify creation of custom generators. I can make a PR with hardcoded object if there is not better way to do it.

Request: support className in addition to style

It would be nice to style the avatar using CSS classes instead of a style object. Should be a simple change to propagate className to the main div.

Please update to work with latest React!

hatColor prop is not defined

export interface Props {
avatarStyle: string;
style?: React.CSSProperties;
topType?: string;
accessoriesType?: string;
hairColor?: string;
facialHairType?: string;
facialHairColor?: string;
clotheType?: string;
clotheColor?: string;
graphicType?: string;
eyeType?: string;
eyebrowType?: string;
mouthType?: string;
skinColor?: string;
pieceType?: string;
pieceSize?: string;
}

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

This is done on [email protected] and [email protected]

Custom shirt and colors

Hey there

Awesome library ! Thanks for that first !

Now, we'd like to change the shirt color and the logo of the Graphic shirt, is it easily doable?

Cheers