Vue
SocialIcon
简介
Vue 版本的 SocialIcon 组件用于显示社交媒体平台的图标，支持多种常见的社交媒体平台。它提供了一致的样式和交互效果，同时支持自定义大小和颜色。该组件适用于需要在 Vue 应用中展示社交媒体链接或品牌标识的场景。
案例
<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
通过 class 属性自定义社交图标的样式类名。
<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
通过 color 属性自定义社交图标的颜色。
<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
通过 platform 属性指定要显示的社交媒体平台。
<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
通过 size 属性控制社交图标的大小。
<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>