KRDS Vue

아이콘 Icon ​

KRDS SVG 아이콘을 표시하는 컴포넌트이다. name 속성에 아이콘 클래스명(ico-*)을 지정하며, 실제 그래픽은 스타일 시트의 svg-icon 마스크로 렌더링된다.

기본 ​

<i class="svg-icon ico-help">로 렌더링됩니다. 아이콘에는 대체 텍스트가 없으므로 아이콘만으로 의미를 전달할 때는 sr-only 텍스트를 함께 제공합니다.

vue
<script setup lang="ts">
  import { KrdsIcon } from '@krds.ui/vue'
</script>

<template>
  <KrdsIcon name="ico-help" />
</template>

아이콘 목록 ​

  • ico-angle
  • ico-calendar
  • ico-call
  • ico-del
  • ico-email
  • ico-faq
  • ico-file
  • ico-filter
  • ico-global
  • ico-go
  • ico-help
  • ico-like
vue
<script setup lang="ts">
  import { KrdsIcon } from '@krds.ui/vue'

  const icons = [
    'ico-angle',
    'ico-calendar',
    'ico-call',
    'ico-del',
    'ico-email',
    'ico-faq',
    'ico-file',
    'ico-filter',
    'ico-global',
    'ico-go',
    'ico-help',
    'ico-like'
  ]
</script>

<template>
  <ul style="display: flex; flex-wrap: wrap; gap: 1.6rem; list-style: none; padding: 0">
    <li v-for="icon in icons" :key="icon" style="display: flex; flex-direction: column; align-items: center; gap: 0.4rem; width: 8rem">
      <KrdsIcon :name="icon" />
      <code style="font-size: 1.2rem">{{ icon }}</code>
    </li>
  </ul>
</template>

KrdsIcon ​

Props

이름타입기본값설명
classKrdsClassValue-CSS 클래스
name (필수)string-아이콘 이름