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.
npm install @avatune/yanliu-theme
This theme is available for multiple frameworks: React, Vue, Svelte, Angular, Vanilla JavaScript, and Swift.
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"
/>
)
}
< 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 >
< 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"
/>
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
}
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)
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 )
}
}
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
/>
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.
import { hair, eyes, mouth } from '@avatune/yanliu-assets' ;
import { HairShort, EyesBoring, MouthSmile } from '@avatune/yanliu-assets/react' ;
import { HairShort, EyesBoring, MouthSmile } from '@avatune/yanliu-assets/svelte' ;
import { HairShort, EyesBoring, MouthSmile } from '@avatune/yanliu-assets/vue' ;
Preview Filename blouseflowerCardigansimpleCardigansimpleOverallstripedsweaterVestsweaterWavyteeBasicteeButtonedteePocketteeRound
Preview Filename bigBeardchevronMustachemustache
Preview Filename bubblecurveshortsplitstraightunderCut
Preview Filename braidshijabmediumpuffstraightLongstraightMedium
This theme package is licensed under MIT (see LICENSE.md ).
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 .
# Build the theme
bun run build
# Build in watch mode
bun run dev
# Type checking
bun run check-types