Avatar

Variants

<DemoSpaceX>
  <VelvetAvatar @variant="emerald" @name="Jake Peralta" />
  <VelvetAvatar @variant="amber" @name="Jake Peralta" />
  <VelvetAvatar @variant="rose" @name="Jake Peralta" />
</DemoSpaceX>

Sizes

<DemoSpaceX>
  <VelvetAvatar @name="Jake Peralta" @size="sm" />
  <VelvetAvatar @name="Jake Peralta" @size="md" />
  <VelvetAvatar @name="Jake Peralta" @size="lg" />
</DemoSpaceX>

Round

<VelvetAvatar @isRound={{true}} @name="Jake Peralta" />

Images

<VelvetAvatar @src="https://avatars.githubusercontent.com/u/7403183" />

Initials

<VelvetAvatar @initials="JP" />

No User Data

<VelvetAvatar />

Arguments

Name	Description	Type	Default Value
`@initials`	The initials of the user.	`string`	`""`
`@isRound`	Indicate if the avatar is round.	`boolean`	`false`
`@name`	The name of the user.	`string`	`""`
`@size`	The size of the avatar.	`"sm" \| "md" \| "lg"`	`"md"`
`@src`	The source of the image.	`string`	`""`
`@variant`	The appearance of the avatar.	`string \| "primary"`	`"primary"`

The order to determine what to display is as follows:

If the @src argument is provided, the image will be displayed
If the @src argument is not provided, the @name argument will be used to determine the initials
If the @name argument is not provided, the @initials argument will be displayed
If the @initials argument is not provided, a question mark will be displayed as a last resort