Vue Avatar - Argon

Create avatar with different styles simply by usingArgonAvatar component.

Demo

1<template>
2  <argon-avatar img="https://bit.ly/31BDLda" size="xl" alt="Avatar" />
3</template>
4
5<script>
6import ArgonAvatar from "@/components/ArgonAvatar.vue";
7export default {
8  components: {
9    ArgonAvatar,
10  },
11 };
12</script>

<template>
  <argon-avatar img="https://bit.ly/31BDLda" size="xl" alt="Avatar" />
</template>

<script>
import ArgonAvatar from "@/components/ArgonAvatar.vue";
export default {
  components: {
    ArgonAvatar,
  },
 };
</script>

Props Information

Name	Type	Default	Description
img*	String		Used to add image to `ArgonAvatar` component. It is a required prop.
alt	String		Used to add description to `ArgonAvatar` image.
borderRadius	'sm''md''lg''xl'		Used to change the `ArgonAvatar` border-radius size.
Circular	bool	false	Used to make the `ArgonAvatar` component circlular,
size	'xs''sm''md''lg''xl''xxl'	md	Change the `ArgonAvatar` size.
shadow	'none''sm''lg''xl'	none	Set a `box-shadow` for the `ArgonAvatar`.

Sizes

1<template>
2  <argon-avatar img="https://bit.ly/31BDLda" alt="Avatar" size="xs" circular />
3  <argon-avatar img="https://bit.ly/31BDLda" alt="Avatar" size="sm" circular />
4  <argon-avatar img="https://bit.ly/31BDLda" alt="Avatar" size="md" circular />
5  <argon-avatar img="https://bit.ly/31BDLda" alt="Avatar" size="lg" circular />
6  <argon-avatar img="https://bit.ly/31BDLda" alt="Avatar" size="xl" circular />
7  <argon-avatar img="https://bit.ly/31BDLda" alt="Avatar" size="xxl" circular />
8  
9</template>
10
11<script>
12import ArgonAvatar from "@/components/ArgonAvatar.vue";
13
14export default {
15  components: {
16    ArgonAvatar,
17  },
18  };
19</script>

<template>
  <argon-avatar img="https://bit.ly/31BDLda" alt="Avatar" size="xs" circular />
  <argon-avatar img="https://bit.ly/31BDLda" alt="Avatar" size="sm" circular />
  <argon-avatar img="https://bit.ly/31BDLda" alt="Avatar" size="md" circular />
  <argon-avatar img="https://bit.ly/31BDLda" alt="Avatar" size="lg" circular />
  <argon-avatar img="https://bit.ly/31BDLda" alt="Avatar" size="xl" circular />
  <argon-avatar img="https://bit.ly/31BDLda" alt="Avatar" size="xxl" circular />
  
</template>

<script>
import ArgonAvatar from "@/components/ArgonAvatar.vue";

export default {
  components: {
    ArgonAvatar,
  },
  };
</script>

Variants

1<template>
2<argon-avatar img="https://bit.ly/31BDLda" alt="Avatar" size="xxl" circular />
3<argon-avatar img="https://bit.ly/31BDLda" alt="Avatar" size="xxl" border-radius="md" />
4<argon-avatar img="https://bit.ly/31BDLda" alt="Avatar" size="xxl" border-radius="lg" />
5
6</template>
7
8<script>
9import ArgonAvatar from "@/components/ArgonAvatar.vue";
10
11export default {
12components: {
13  ArgonAvatar,
14},
15};
16</script>

<template>
<argon-avatar img="https://bit.ly/31BDLda" alt="Avatar" size="xxl" circular />
<argon-avatar img="https://bit.ly/31BDLda" alt="Avatar" size="xxl" border-radius="md" />
<argon-avatar img="https://bit.ly/31BDLda" alt="Avatar" size="xxl" border-radius="lg" />

</template>

<script>
import ArgonAvatar from "@/components/ArgonAvatar.vue";

export default {
components: {
  ArgonAvatar,
},
};
</script>