Icon 아이콘

SVG 아이콘입니다. 이름으로 렌더링하거나, tree-shaking에 친화적인 개별 아이콘 컴포넌트를 사용합니다.

기본 아이콘

<template>
  <div class="demo-col">
    <div class="demo-row">
      <LhIcon name="star" size="24" />
      <LhIcon name="search" size="24" color="var(--lh-primary-color)" />
      <LhIcon name="loading" size="24" />
      <LhIcon name="arrow-down" size="24" />
      <LhIcon name="check" size="24" color="var(--lh-success-color)" />
      <LhIcon name="warning" size="24" color="var(--lh-warning-color)" />
    </div>
    <div class="demo-row">
      <LhIcon name="star" size="16" />
      <LhIcon name="star" size="20" />
      <LhIcon name="star" size="28" />
      <LhIcon name="star" size="36" color="var(--lh-danger-color)" />
    </div>
  </div>
</template>

Props

프로퍼티	설명	타입	기본값
name	아이콘 이름	LhIconName	—
size	크기 (px)	string \| number	—
color	색상	string	—
themeVars / bgPattern	테마 덮어쓰기	—	—

개별 아이콘 (tree-shaking)

import { LhIconStar, LhIconSearch } from '@lh-ui/vue2'
// 각 아이콘은 개별 컴포넌트이며, 참조된 SVG path만 패키징됩니다

사용 가능한 이름은 LH_ICON_SVGS_CONST를 참조하세요: star / search / check / close / arrow-up / arrow-down / arrow-left / arrow-right / warning / error / info / loading / plus / minus.

속성 전달

inheritAttrs: false이며, 선언되지 않은 속성(예: data-*, 이벤트)은 v-bind="$attrs"를 통해 루트 요소로 전달됩니다.