@avatune/orks-theme

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

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

container?.appendChild(svg)

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

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

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

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

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

# Build the theme
bun run build

# Build in watch mode
bun run dev

# Type checking
bun run check-types