Warning
This package highly experimental it needs a lot of work PR is appriciated :)
This library provides functionalities for generating and manipulating avatars in Svelte applications. It is heavly inspired by notion avatar
To install the library, run:
npm install svelte-faces
yarn add svelte-faces
or
pnpm add svelte-faces
- Import the library:
import { avatarGenerator } from 'svelte-faces';
- Initialize the avatar generator:
It's recommended to initialize the library once in your application, potentially in a top-level component or a dedicated initialization service.
await avatarGenerator.initialize();
- Generate feature options:
- This retrieves options for customizing specific parts of the avatar.
const featureOptions = avatarGenerator.getFeatureOptions(['hair', 'eyes', 'mouth']);
featureOptions
will be an array of objects, each containing:max
: The maximum number of styles available for that feature.parts
: An array of available options for that feature, including their SVG content and path information.
- Generate random avatar:
const randomConfig = await avatarGenerator.generateRandomAvatar();
randomConfig
will contain an object with keys corresponding to avatar parts and their corresponding chosen styles.
- Generate avatar preview:
const previewSvg = avatarGenerator.generatePreview(randomConfig);
- Replace
randomConfig
with your desired avatar configuration object. previewSvg
will be a string containing the SVG code for the generated avatar preview.
- Get PNG of avatar:
const avatarElement = document.getElementById('my-avatar'); // Replace with your element ID
const pngDataUrl = await avatarGenerator.getPng({ element: avatarElement, width: 150, height: 175 });
pngDataUrl
will be a string containing the base64 encoded data URL of the avatar PNG image.
- Illustration designer: @Felix Wong on ProductHunt
- Pack of illustrations: Noto avatar
- Assets licensed under CC0
- Refer to the library code for detailed information about available functions and their parameters.
- This is a basic overview of usage. Consider exploring the library's source code and experimenting for a more comprehensive understanding of its capabilities.