React component derived from the Avataaars package. Built on TypeScript, bundled with Webpack, and published on NPM.
This modification of Avataaars 1.2.1 includes new SAP-branded clothing and hat options.
Install this package from NPM here.
The available clothes are:
- SapBestRunHoodie
- SapCrewneckShirt
- SapIxpBlazer
The available tops (hats) are:
- SapBaseballCap
- SapCowboyHat
- SapToque
All other avatar customizations from Avataaars 1.2.1 are also available. To explore non-SAPataaar options, see Avataaars Generator.
The original Avataaars Generator is developed by Fang-Pen Lin, and was based on the Sketch library Avataaars designed by Pablo Stanley.
A working React project is required as a base.
Install the package:
yarn add sapataaars
// or
npm install sapataaars --save
In the React project, import the SAPataaar component with the preferred character customization:
import * as React from 'react'
import Avatar from 'sapataaars'
export default class MyComponent extends React.Component {
render () {
return
<div>
Your avatar:
<Avatar
style={{width: '100px', height: '100px'}}
avatarStyle='Circle'
topType='SapBaseballCap'
accessoriesType='Prescription02'
hairColor='BrownDark'
facialHairType='Blank'
clotheType='SapBestRunHoodie'
clotheColor='PastelBlue'
eyeType='Happy'
eyebrowType='Default'
mouthType='Smile'
skinColor='Light'
/>
</div>
}
}
TypeScript and Webpack are both required to build the component.
Install all dependencies:
npm install
Update package.json
with the version number to publish, and optionally create a Git tag for tracking.
Create the package to publish:
npm run build
Finally, publish the package to NPM:
npm publish