@avatune/cyberpunk-theme

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

Avatar theme for Avatune using cyberpunk design assets.

Installation

npm install @avatune/cyberpunk-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/cyberpunk-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/cyberpunk-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/cyberpunk-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/cyberpunk-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/cyberpunk-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="hoodie"     // Choose specific clothing
  bodyColor="#3498DB"    // Custom clothing color
/>

Design Assets

This theme uses Cyberpunk 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/cyberpunk-assets package.

Using Assets Directly

SVG Paths

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

React Components

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

Svelte Components

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

Vue Components

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

Available Assets

Body

Preview	Filename
	`hoodie`
	`jacket1`
	`jacket2`
	`jacket3`
	`jacket4`
	`poncho`
	`poncho1`

Eyes

Preview	Filename
	`anxious`
	`brave`
	`curious`
	`focused`
	`husky`
	`round`
	`sharp`

Hair

Preview	Filename
	`bob`
	`braids`
	`forehead`
	`medium`
	`short`
	`stylish`

Head

Preview	Filename
	`oval`
	`rhombus`
	`robot`
	`squaredOval`

Mouth

Preview	Filename
	`hooky`
	`lips`
	`nervous`
	`open`
	`smiling`

Nose

Preview	Filename
	`clothespin`
	`metal`
	`narrow`
	`standard`
	`wide1`
	`wide2`

License & Credits

Theme License

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

Design Assets License

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

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

On this page