Avatune
Themes

@avatune/yanliu-theme

Avatar theme for Avatune using Yanliu assets.

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

Avatar theme for Avatune using yanliu design assets.

Installation

npm install @avatune/yanliu-theme

Usage

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

React

import { Avatar } from '@avatune/react'
import theme from '@avatune/yanliu-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/yanliu-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/yanliu-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/yanliu-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/yanliu-theme/vanilla'

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

container?.appendChild(svg)

Swift

Add avatune-swift and depend on its AvatuneYanliu product:

import AvatuneYanliu
import AvatuneRender
import SwiftUI

struct AvatarPreview: View {
    var body: some View {
        AvatarView(
            YanliuAvatar(seed: .string("optional-seed-for-random-generation"))
        )
        .frame(width: 300, height: 300)
    }
}

Customization

You can override specific avatar parts:

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

Design Assets

This theme uses Yanliu 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/yanliu-assets package.

Using Assets Directly

SVG Paths

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

React Components

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

Svelte Components

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

Vue Components

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

Available Assets

Body

PreviewFilename
blouse
flowerCardigan
simpleCardigan
simpleOverall
striped
sweaterVest
sweaterWavy
teeBasic
teeButtoned
teePocket
teeRound

Ears

PreviewFilename
standard

Eyes

PreviewFilename
standard

FaceDetails

PreviewFilename
blushes

FaceHair

PreviewFilename
bigBeard
chevronMustache
mustache

Forelock

PreviewFilename
bubble
curve
short
split
straight
underCut

Glasses

PreviewFilename
glass

Hair

PreviewFilename
braids
hijab
medium
puff
straightLong
straightMedium

Hats

PreviewFilename
beanie
hat
PreviewFilename
standard

Mouth

PreviewFilename
smile

Neck

PreviewFilename
standard

Nose

PreviewFilename
standard

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 Yan Liu. Modifications were made to adapt them for composable SVG avatars.

For full details, see CREDITS.md.

Development

# Build the theme
bun run build

# Build in watch mode
bun run dev

# Type checking
bun run check-types

On this page