Avatar

The way of water has no beginning and no end.

Example

Show Code

<script lang="ts" setup>
import { RAvatar, RInput, RSpace } from 'roughness'
import { ref } from 'vue'

const name = ref('Cameron')
</script>

<template>
  <RSpace align="center">
    <RAvatar :name="name" />
    <RInput v-model="name" />
    <RAvatar :name="[...name].reverse().join('')" round />
  </RSpace>
</template>

Usage

Props

Name	Type	Default Value	Description
graphicsOptions
name		Required
round

Styles

Name	Type	Default Value	Description
--r-avatar-size
--r-avatar-border-color
--r-avatar-border-width
--r-avatar-border-dash