아이콘 포함 버튼

<button type="button" class="krds-btn xsmall">
	x-small 버튼
	<i class="svg-icon ico-sch"></i>
</button>
<button type="button" class="krds-btn small">
	small 버튼
	<i class="svg-icon ico-sch"></i>
</button>
<button type="button" class="krds-btn medium">
	medium 버튼
	<i class="svg-icon ico-sch"></i>
</button>
<button type="button" class="krds-btn large">
	large 버튼
	<i class="svg-icon ico-sch"></i>
</button>
<button type="button" class="krds-btn xlarge">
	<i class="svg-icon ico-sch"></i>
	x-large 버튼
</button>

<template>
  <button type="button" class="krds-btn xsmall">
	x-small 버튼
	<i class="svg-icon ico-sch"></i>
</button>
<button type="button" class="krds-btn small">
	small 버튼
	<i class="svg-icon ico-sch"></i>
</button>
<button type="button" class="krds-btn medium">
	medium 버튼
	<i class="svg-icon ico-sch"></i>
</button>
<button type="button" class="krds-btn large">
	large 버튼
	<i class="svg-icon ico-sch"></i>
</button>
<button type="button" class="krds-btn xlarge">
	<i class="svg-icon ico-sch"></i>
	x-large 버튼
</button>
</template>

<script setup lang="ts">
// 아이콘 포함 버튼 컴포넌트
// 텍스트와 아이콘을 함께 사용하는 버튼입니다.

import { ref } from 'vue'

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

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