@avatune/toon-flat-theme

Source: packages/assets/toon-flat-assets/README.md

Avatar theme for Avatune using toon flat design assets.

Installation

npm install @avatune/toon-flat-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/toon-flat-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/toon-flat-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/toon-flat-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/toon-flat-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/toon-flat-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 AvatuneToonFlat product:

import AvatuneToonFlat
import AvatuneRender
import SwiftUI

struct AvatarPreview: View {
    var body: some View {
        AvatarView(
            ToonFlatAvatar(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="beanie"          // Choose specific hair style
  hairColor="#FF5733"    // Custom hair color
  body="halfZip"     // Choose specific clothing
  bodyColor="#3498DB"    // Custom clothing color
/>

Design Assets

This theme uses Toon Flat 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/toon-flat-assets package.

Using Assets Directly

SVG Paths

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

React Components

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

Svelte Components

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

Vue Components

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

Available Assets

Body

Preview	Filename
	`halfZip`
	`hoodie`
	`jacket`
	`shirt`
	`sweater`
	`tshirt`
	`turtleneck`
	`vest`

Eyes

Preview	Filename
	`almond`
	`big`
	`narrow`

Hair

Preview	Filename
	`beanie`
	`bowlerHat`
	`bun`
	`dreads`
	`messy`
	`ponyTail`
	`short`
	`sidePart`

Head

Preview	Filename
	`standard`

Mouth

Preview	Filename
	`flat`
	`laugh`
	`openSmile`
	`smile`
	`smirk`

Nose

Preview	Filename
	`curve`
	`flat`
	`thin`

License & Credits

Theme License

This theme package is licensed under a modified MIT license that permits any use except repackaging its avatar assets into other avatar libraries such as DiceBear (see LICENSE.md).

Design Assets License

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

@avatune/toon-flat-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/toon-flat-theme

On this page