TSwitchIcon / 图标开关

SwitchIcon toggles between two states with animated icon transitions. Supports multiple animation variants (fade, scale, flip, slide). / 图标开关在两个状态间切换，带有图标动画过渡效果，支持淡入淡出、缩放、翻转和滑动等多种动画。

Props / 属性

Prop	Type / 类型	Default / 默认值	Description / 说明
v-model	boolean	—	Toggle state
iconOff	object	—	Off state icon component
iconOn	object	—	On state icon component
colorOff	string	'secondary'	Off state color
colorOn	string	'red'	On state color
variant	'fade' | 'scale' | 'flip' | 'slide-*'	—	Animation variant
disabled	boolean	false	Disabled

Basic Usage / 基础用法

<script setup lang="ts">
import { TSwitchIcon } from '@gulcc/tabler-vue'
import { IconHeart, IconHeartFilled } from '@tabler/icons-vue'

const liked = ref(false)
</script>

<template>
  <TSwitchIcon v-model="liked" :icon-off="IconHeart" :icon-on="IconHeartFilled" />
</template>