Swap 切换 ​

<template>
  <f-swap v-model="value1" :icon-on="FIconSun" :icon-off="FIconMoon" />
  <f-swap v-model="value2" :icon-on="FIconSun" :icon-off="FIconMoon" />
</template>

<script lang="ts" setup>
  import { FIconSun, FIconMoon } from '@fighting-design/fighting-icon'
  import { ref } from 'vue'

  const value1 = ref(true)
  const value2 = ref(false)
</script>

<template>
  <f-swap
    v-model="value5"
    :size="50"
    :icon-on="FIconFaceSmile"
    :icon-off="FIconFaceFrown"
  />
  <f-swap v-model="value6" size="30px" :icon-on="FIconEye" :icon-off="FIconEyeSlash" />
</template>

<script lang="ts" setup>
  import {
    FIconFaceFrown,
    FIconFaceSmile,
    FIconEye,
    FIconEyeSlash
  } from '@fighting-design/fighting-icon'
  import { ref } from 'vue'

  const value3 = ref(true)
  const value4 = ref(true)
</script>

<template>
  <f-swap v-model="value5" :icon-on="FIconEye" :icon-off="FIconEyeSlash" />
  <f-swap v-model="value6" type="sound" :icon-on="FIconSun" :icon-off="FIconMoon" />
  <f-swap
    v-model="value7"
    type="swap"
    :icon-on="FIconFaceSmile"
    :icon-off="FIconFaceFrown"
  />
</template>

<script lang="ts" setup>
  import {
    FIconSun,
    FIconMoon,
    FIconFaceSmile,
    FIconFaceFrown,
    FIconEye,
    FIconEyeSlash
  } from '@fighting-design/fighting-icon'
  import { ref } from 'vue'

  const value5 = ref(true)
  const value6 = ref(true)
  const value7 = ref(true)
</script>