Avatar Builder

An avatar builder, built in React that outputs SVG code.

Note: These docs will be expanded out over time. This package is playing a role in one of Barr Media's current projects so getting this built for purpose and live has been the priority and therefore, breaking changes and additions are highly likely.

Installation

This package is a React component that you can import into a project. It'll render an avatar builder allowing you to customise an avatar and at the end, output the final SVG.

You can install it via NPM:

npm install @barr-media/avatar-builder

Usage

You can simply import the component and use it as any other in your React project.

import { AvatarBuilder } from '@barr-media/avatar-builder';

<AvatarBuilder onFinish={(svg, json) => {
    // `svg` = output SVG
    // `json` = output JSON
}}/>

This will automatically render the builder.

The builder component requires the prop onFinish as a callback to when you finish and will provide the output SVG and JSON as arguments for you to do what you will with.

Note: This builder contains no CSS rules meaning the output styles will require manual implementation within your project. However, all elements have clear ID's and Classes that use the following convention: AvatarBuilder__[class or id]. This ensures there's no clashing with existing styles.

Roadmap

As mentioned this package has been rapidly built for a current Barr Media piece of work and kept purposefully "barebone" whilst we're building it into the project.

However, the plan will be to fine tune this package to make it more useful for generalised projects.

For Development

To develop, clone this repo to your local machine and in the root of the project run, npm install.

To build for development, simply run npm run build-dev and for production npm run build-prod. This outputs a single JavaScript file in ./dist.

The package is also uploaded to NPM, so to update the package here, bump the version appropriately in package.json and run npm publish.

Credits

The SVG assets used in the builder are from Personas by Draftbit – thanks to these guys for providing these open source.