svelte-faces
v0.0.3
Published
A dynamic Svelte library for effortlessly creating and customizing SVG avatars.
Downloads
8
Readme
[!WARNING]
This package highly experimental it needs a lot of work PR is appriciated :)
Svelte face
This library provides functionalities for generating and manipulating avatars in Svelte applications.
Installation
To install the library, run:
npm install svelte-faces
or
yarn add svelte-faces
Usage
- 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(avatarElement);
pngDataUrl
will be a string containing the base64 encoded data URL of the avatar PNG image.
Additional Notes
- 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.