Social Links

Overview

The VSocialLinks component is designed to display a list of social media links with corresponding icons. It allows for easy integration of social media profiles into your application. Location - ui-kit/src/components/VSocialLinks/VSocialLinks.vue

Features

Dynamic Social Links: Render a list of social media links dynamically based on the provided data.
Custom Icons: Use custom icons for each social media link.
Accessibility: Each link is equipped with appropriate ARIA labels for better accessibility.

Importing the Component

To use the VSocialLinks component, import it as follows:

vue

import VSocialLinks from 'UiKit/components/VSocialLinks/VSocialLinks.vue';

Component Props

The component accepts the following props:

Prop Name	Type	Default	Required	Description
`socialList`	`Array<ISocial>`	`undefined`	Yes	An array of social media objects containing icon, href, name, and iconName.

Default Slot

The VSocialLinks component does not support a default slot as it renders the social links directly from the provided socialList prop.

Full Example

vue

<script setup lang="ts">
import VSocialLinks from 'UiKit/components/VSocialLinks/VSocialLinks.vue';
import { socials } from 'UiKit/utils/socials';

const SOCIAL_LIST = [
  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
  socials?.facebook, socials?.instagram,
  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
  socials?.linkedin, socials?.github,
];
</script>

<template>
<VSocialLinks :social-list="SOCIAL_LIST" />
</template>