avataaars-svelte
v0.0.37
Published
Svelte Avataaars Generator is a reimplementation of the original Avataaars generator, originally developed by Fang-Pen Lin in React and designed by Pablo Stanley. This version is built with [Svelte](https://svelte.dev/) and TypeScript, offering a modern a
Downloads
19
Readme
Svelte Avataaars Generator
Svelte Avataaars Generator is a reimplementation of the original Avataaars generator, originally developed by Fang-Pen Lin in React and designed by Pablo Stanley. This version is built with Svelte and TypeScript, offering a modern and lightweight alternative to the React-based implementation.
You can check out the original project here: Avataaars Generator.
Features
- Avatar customization: Easily generate avatars with customizable options.
- Svelte-based: Built with Svelte for a highly performant and reactive user experience.
- TypeScript support: Fully typed for better developer experience and safer code.
- Web-based app: Run the app locally or deploy it to generate avatars on the web.
Getting Started
Prerequisites
Running the App Locally
Clone the repository:
git clone <your-repo-url> cd svelte-avataaars-generator
Install the dependencies:
yarn install # or npm install
Start the development server:
yarn dev # or npm run dev
Open your browser and navigate to
http://localhost:5000
to see the app running.
React Alternative
The original project provided a React component to easily integrate avatars into React applications. While this reimplementation focuses on Svelte, you can integrate the avatars generated from this app into any frontend project by exporting the avatars as SVGs.
License
This project is licensed under the MIT License, the same as the original Avataaars Generator.
Version
0.0.2
Implement all clothing alternatives to match the original Avataaars Generator
0.0.3x
Fix exports on index.ts to completely implement Avataaars style selection
TODO
- Implement the rest of the options
- GraphicShirt and GraphicShirtColor bug fix
- Update state automatically when changing style
- ~~Expose getBlob function to user~~
- ~~Expose blobUrl to user~~
- ~~Implement all hair options~~