@avatune/kyute-theme

Source: packages/assets/kyute-assets/README.md

Avatar theme for Avatune using kyute design assets.

Installation

npm install @avatune/kyute-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/kyute-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/kyute-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/kyute-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/kyute-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/kyute-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="bob"          // Choose specific hair style
  hairColor="#FF5733"    // Custom hair color
  body="casual"     // Choose specific clothing
  bodyColor="#3498DB"    // Custom clothing color
/>

Design Assets

This theme uses Kyute 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/kyute-assets package.

Using Assets Directly

SVG Paths

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

React Components

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

Svelte Components

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

Vue Components

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

Available Assets

Body

Preview	Filename
	`casual`
	`shirt`
	`tshirt`
	`turtleneck`

Ears

Preview	Filename
	`standard`

Eyebrows

Preview	Filename
	`thick1`
	`thick2`
	`thickSad`
	`thin`
	`thinCurly`
	`thinWide`

Eyes

Preview	Filename
	`big`
	`huge`
	`medium`
	`oval`
	`standard`

FaceDetails

Preview	Filename
	`blushes`
	`freckles`

FaceHair

Preview	Filename
	`beard`
	`bigBeard`
	`mustache`

Glasses

Preview	Filename
	`aviator`
	`harry`
	`round`
	`standard`

Hair

Preview	Filename
	`bob`
	`curly`
	`curlyMedium`
	`elvis`
	`long`
	`longThick`
	`longWavy`
	`ponyTail`
	`rapunzel`
	`short`
	`stylish`
	`thick`
	`topKnot`

Head

Preview	Filename
	`standard`

Mouth

Preview	Filename
	`lips1`
	`lips2`
	`lipsSmile`
	`open`
	`openDimples`
	`smile1`
	`smile2`
	`smileOpen`
	`smirk`
	`wideOpen`

License & Credits

Theme License

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

Design Assets License

This project uses avatar design assets licensed under CC BY 4.0.

Original designs by Aaron Gitlin. Modifications were made to adapt them for composable SVG avatars.

For full details, see CREDITS.md.

@avatune/kyute-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

@avatune/kyute-theme

On this page