TTS 아이콘

<button type="button" class="krds-tts medium">
	<span class="krds-tts-icon" aria-hidden="true">
		<i class="svg-icon ico-volume"></i>
	</span>
</button>


<button type="button" class="krds-tts medium play">
	<span class="krds-tts-icon" aria-hidden="true">
		<i class="svg-icon ico-play"></i>
	</span>
</button>


<button type="button" class="krds-tts medium" disabled>
	<span class="krds-tts-icon" aria-hidden="true">
		<i class="svg-icon ico-volume"></i>
	</span>
</button>

<template>
  <button type="button" class="krds-tts medium">
	<span class="krds-tts-icon" aria-hidden="true">
		<i class="svg-icon ico-volume"></i>
	</span>
</button>


<button type="button" class="krds-tts medium play">
	<span class="krds-tts-icon" aria-hidden="true">
		<i class="svg-icon ico-play"></i>
	</span>
</button>


<button type="button" class="krds-tts medium" disabled>
	<span class="krds-tts-icon" aria-hidden="true">
		<i class="svg-icon ico-volume"></i>
	</span>
</button>
</template>

<script setup lang="ts">
// TTS 아이콘 컴포넌트
// TTS 아이콘 버튼입니다.

import { ref } from 'vue'

// 필요한 상태 및 메서드 정의
const isActive = ref(false)

const handleClick = () => {
  isActive.value = !isActive.value
}
</script>