Vue
SocialIcon
Introduction
The Vue version of the SocialIcon component is used to display social media platform icons, supporting various common social media platforms. It provides consistent styling and interactive effects while supporting custom sizes and colors. This component is suitable for scenarios where you need to display social media links or brand identities in your Vue application.
Examples
<template>
<SocialIcon platform="github" size="lg" />
</template>
<script setup lang="ts">
import { SocialIcon } from '@coffic/cosy-ui/vue';
</script>
<template>
<SocialIcon platform="twitter" size="lg" />
</template>
<script setup lang="ts">
import { SocialIcon } from '@coffic/cosy-ui/vue';
</script>
<template>
<SocialIcon platform="linkedin" size="lg" />
</template>
<script setup lang="ts">
import { SocialIcon } from '@coffic/cosy-ui/vue';
</script>
<template>
<SocialIcon platform="facebook" size="lg" />
</template>
<script setup lang="ts">
import { SocialIcon } from '@coffic/cosy-ui/vue';
</script>
Props
class
Customize the style class name of the social icon through the class attribute.
<template>
<SocialIcon platform="github" size="lg" style="background-color: #1e40af; border-radius: 50%; padding: 0.5rem;" />
</template>
<script setup lang="ts">
import { SocialIcon } from '@coffic/cosy-ui/vue';
</script>
<template>
<SocialIcon platform="github" size="lg"
style="background-color: #059669; border-radius: 0.5rem; padding: 0.5rem;" />
</template>
<script setup lang="ts">
import { SocialIcon } from '@coffic/cosy-ui/vue';
</script>
<template>
<SocialIcon platform="github" size="lg"
style="background: linear-gradient(45deg, #f59e0b, #ec4899); border-radius: 0.25rem; padding: 0.5rem;" />
</template>
<script setup lang="ts">
import { SocialIcon } from '@coffic/cosy-ui/vue';
</script>
color
Customize the color of the social icon through the color attribute.
<template>
<SocialIcon platform="github" color="primary" size="lg" />
</template>
<script setup lang="ts">
import { SocialIcon } from '@coffic/cosy-ui/vue';
</script>
<template>
<SocialIcon platform="github" color="secondary" size="lg" />
</template>
<script setup lang="ts">
import { SocialIcon } from '@coffic/cosy-ui/vue';
</script>
<template>
<SocialIcon platform="github" color="accent" size="lg" />
</template>
<script setup lang="ts">
import { SocialIcon } from '@coffic/cosy-ui/vue';
</script>
<template>
<SocialIcon platform="github" color="neutral" size="lg" />
</template>
<script setup lang="ts">
import { SocialIcon } from '@coffic/cosy-ui/vue';
</script>
platform
Specify the social media platform to display through the platform attribute.
<template>
<SocialIcon platform="github" size="lg" />
</template>
<script setup lang="ts">
import { SocialIcon } from '@coffic/cosy-ui/vue';
</script>
<template>
<SocialIcon platform="twitter" size="lg" />
</template>
<script setup lang="ts">
import { SocialIcon } from '@coffic/cosy-ui/vue';
</script>
<template>
<SocialIcon platform="linkedin" size="lg" />
</template>
<script setup lang="ts">
import { SocialIcon } from '@coffic/cosy-ui/vue';
</script>
<template>
<SocialIcon platform="facebook" size="lg" />
</template>
<script setup lang="ts">
import { SocialIcon } from '@coffic/cosy-ui/vue';
</script>
size
Control the size of the social icon through the size attribute.
<template>
<SocialIcon platform="github" size="sm" />
</template>
<script setup lang="ts">
import { SocialIcon } from '@coffic/cosy-ui/vue';
</script>
<template>
<SocialIcon platform="github" size="md" />
</template>
<script setup lang="ts">
import { SocialIcon } from '@coffic/cosy-ui/vue';
</script>
<template>
<SocialIcon platform="github" size="lg" />
</template>
<script setup lang="ts">
import { SocialIcon } from '@coffic/cosy-ui/vue';
</script>
<template>
<SocialIcon platform="github" size="xl" />
</template>
<script setup lang="ts">
import { SocialIcon } from '@coffic/cosy-ui/vue';
</script>