@avatune/ashleyy-theme

Source: packages/assets/ashleyy-theme/README.md

Avatar theme for Avatune using ashleyy design assets.

Installation

npm install @avatune/ashleyy-theme

yarn add @avatune/ashleyy-theme

pnpm add @avatune/ashleyy-theme

bun add @avatune/ashleyy-theme

Usage

This theme is available for multiple frameworks: React, Vue, Svelte, Angular, and Vanilla JavaScript.

React

import { Avatar } from '@avatune/react'
import theme from '@avatune/ashleyy-theme/react'

function App() {
  return (
    <Avatar
      theme={theme}
      size={300}
      seed="optional-seed-for-random-generation"
    />
  )
}

Vue

<script setup lang="ts">
import { Avatar } from '@avatune/vue'
import theme from '@avatune/ashleyy-theme/vue'
</script>

<template>
  <Avatar
    :theme="theme"
    :size="300"
    seed="optional-seed-for-random-generation"
  />
</template>

Svelte

<script lang="ts">
  import { Avatar } from '@avatune/svelte'
  import theme from '@avatune/ashleyy-theme/svelte'
</script>

<Avatar
  theme={theme}
  size={300}
  seed="optional-seed-for-random-generation"
/>

Angular

import { Component } from '@angular/core'
import { Avatar } from '@avatune/angular'
import theme from '@avatune/ashleyy-theme/angular'

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [Avatar],
  template: `
    <avatune-avatar
      [theme]="theme"
      [inputSize]="300"
      seed="optional-seed-for-random-generation"
    />
  `,
})
export class AppComponent {
  theme = theme
}

Vanilla JavaScript

import { avatar } from '@avatune/vanilla'
import theme from '@avatune/ashleyy-theme/vanilla'

const container = document.getElementById('avatar-container')
const svg = avatar({
  theme,
  size: 300,
  seed: 'optional-seed-for-random-generation',
})

container?.appendChild(svg)

Customization

You can override specific avatar parts:

<Avatar
  theme={theme}
  size={300}
  hair="afro"          // Choose specific hair style
  hairColor="#FF5733"    // Custom hair color
  body="buttonShirt"     // Choose specific clothing
  bodyColor="#3498DB"    // Custom clothing color
/>

Design Assets

This theme uses Ashleyy style SVG assets for creating customizable avatars. Assets include various options for hair, eyes, eyebrows, mouth, nose, ears, head shape, and body/clothing.

The assets are available in the @avatune/ashleyy-assets package.

Using Assets Directly

SVG Paths

import { hair, eyes, mouth } from '@avatune/ashleyy-assets';

React Components

import { HairShort, EyesBoring, MouthSmile } from '@avatune/ashleyy-assets/react';

Svelte Components

import { HairShort, EyesBoring, MouthSmile } from '@avatune/ashleyy-assets/svelte';

Vue Components

import { HairShort, EyesBoring, MouthSmile } from '@avatune/ashleyy-assets/vue';

Available Assets

Accessories

Preview	Filename
	`earrings`
	`mask`

Body

Preview	Filename
	`buttonShirt`
	`doubleCollarShirt`
	`knitSweater`
	`peterPanCollarShirt`
	`polkaDotShirt`
	`tieShirt`
	`turtleneckShirt`

Eyes

Preview	Filename
	`standard`

Glasses

Preview	Filename
	`glasses`

Hair

Preview	Filename
	`afro`
	`curlyBun`
	`longWavy`
	`mediumStraigh`
	`ponyTail`
	`short`
	`shortCurly`
	`sideSwept`

Head

Preview	Filename
	`standard`

Mouth

Preview	Filename
	`smile`
	`standard`

Nose

Preview	Filename
	`standard`

License & Credits

Theme License

This theme package is licensed under MIT (see LICENSE.md).

Design Assets License

The design assets used in this theme are separately licensed. See the asset package for details.

@avatune/ashleyy-assets - SVG assets used by this theme
@avatune/react - React avatar renderer
@avatune/vue - Vue avatar renderer
@avatune/svelte - Svelte avatar renderer
@avatune/angular - Angular avatar renderer
@avatune/vanilla - Vanilla JavaScript avatar renderer

Development

# Build the theme
bun run build

# Build in watch mode
bun run dev

# Type checking
bun run check-types