KAvatar

Avatars can be used to represent people or objects. It supports images, Icons, or characters.

Install

pnpm

pnpm add @ikun-ui/avatar

yarn

yarn add @ikun-ui/avatar

npm

npm install @ikun-ui/avatar

Basic usage

Use size and radius prop to set avatar's size and radius.

Types

It supports images, Icons, or characters.

User

Fallback

fallback when image load error.

Fit Container

Set how the image fit its container for an image avatar, same as object-fit .

fill

contain

cover

none

scale-down

Avatar Props

Name	Type	Default	Description
icon	string	''	The class name of the icon, following the unocss standard.
src	string	''	the source of the image for an image avatar..
srcSet	string	''	native attribute srcset of image avatar.
alt	string	''	native attribute alt of image avatar.
fit	fill / contain / cover / none / scale-down	cover	set how the image fit its container for an image avatar.
size	string / number	50px	avatar size, the default unit is px.
radius	string / number	4px	avatar radius, the default unit is px.
cls	string	''	Additional class for component
attrs	Record<string, string>	{}	Additional attributes

Avatar Events

Name	Description	Type
error	trigger when image load error.	(event: CustomEvent)=> void

Avatar Slots

Name	Description
default	Customize default content