Sefirot

Appearance

SAvatar ​

<SAvatar> is a common avatar displaying component.

@globalbrain/sefirot/lib/components/SAvatar.vue

J

A

G

Usage ​

Import <SAvatar> component and pass in either the image or a name. When the image is passed, the image gets displayed, and when passing a name, the initial of the name will be used.

vue
<script setup lang="ts">
import SAvatar from '@globalbrain/sefirot/lib/components/SAvatar.vue'
</script>

<template>
  <SAvatar avatar="/path/to/image.jpg" />
  <SAvatar name="John Doe" />
</template>
<script setup lang="ts">
import SAvatar from '@globalbrain/sefirot/lib/components/SAvatar.vue'
</script>

<template>
  <SAvatar avatar="/path/to/image.jpg" />
  <SAvatar name="John Doe" />
</template>

Props ​

Here are the list of props you may pass to the component.

:size ​

Defines the size of the component. The default is medium.

ts
interface Props {
  size?: 'nano' | 'mini' | 'small' | 'medium' | 'large'
}
interface Props {
  size?: 'nano' | 'mini' | 'small' | 'medium' | 'large'
}
template
<SAvatar size="medium" image="/image.jpg" />
<SAvatar size="medium" image="/image.jpg" />

:avatar ​

The path to the image.

ts
interface Props {
  avatar?: string | null
}
interface Props {
  avatar?: string | null
}
template
<SAvatar image="/image.jpg" />
<SAvatar image="/image.jpg" />

:name ​

The name of the avatar user. The initial value of the name gets displayed. When avatar prop is set, this value gets ignored.

ts
interface Props {
  name?: string | null
}
interface Props {
  name?: string | null
}
template
<SAvatar name="John Doe" />
<SAvatar name="John Doe" />