介绍
本文档主要用于描述 ShadcnIcon 组件的使用方法。
图标使用的是 Lucide 图标库。
用法
查看代码
vue
<template>
<ShadcnIcon icon="Save"/>
</template>
<script setup lang="ts">
</script>尺寸 (size)
查看代码
vue
<template>
<ShadcnIcon icon="Save"/>
<ShadcnIcon icon="Save" :size="30"/>
<ShadcnIcon icon="Save" :size="40"/>
</template>
<script setup lang="ts">
</script>颜色 (color)
查看代码
vue
<template>
<ShadcnIcon icon="Save" color="red"/>
</template>
<script setup lang="ts">
</script>带背景 (background)
查看代码
vue
<template>
<ShadcnIcon icon="Home" :size="40" background :dark="darkMode"/>
<ShadcnIcon icon="Settings" :size="40" background :dark="darkMode"/>
<ShadcnIcon icon="User" :size="40" background :dark="darkMode"/>
<ShadcnIcon icon="Bell" :size="40" background :dark="darkMode"/>
</template>液态玻璃效果 (glass)
查看代码
vue
<template>
<div :class="['p-6 rounded-lg', darkMode ? 'bg-gradient-to-r from-orange-900 to-red-900' : 'bg-gradient-to-r from-orange-400 to-red-400']">
<div class="flex gap-4 flex-wrap">
<ShadcnIcon icon="Home" :size="40" background glass :dark="darkMode"/>
<ShadcnIcon icon="Settings" :size="40" background glass :dark="darkMode"/>
<ShadcnIcon icon="User" :size="40" background glass :dark="darkMode"/>
<ShadcnIcon icon="Bell" :size="40" background glass :dark="darkMode"/>
<ShadcnIcon icon="Mail" :size="40" background glass :dark="darkMode"/>
<ShadcnIcon icon="Heart" :size="40" background glass :dark="darkMode"/>
<ShadcnIcon icon="Star" :size="40" background glass :dark="darkMode"/>
<ShadcnIcon icon="Search" :size="40" background glass :dark="darkMode"/>
</div>
</div>
</template>
<script setup lang="ts">
import { useData } from 'vitepress'
import { computed } from 'vue'
const { isDark } = useData()
const darkMode = computed(() => isDark.value)
</script>