Icon 아이콘

다양한 아이콘 리소스를 제공하는 아이콘 컴포넌트입니다.

기본 사용법

기본 사용법

<script setup lang="ts">
import { LhIcon } from '@lh-ui/vue3'
</script>

<template>
  <!-- 별 모양 -->
  <LhIcon name="star" />
  <!-- 검색 -->
  <LhIcon name="search" />
  <!-- 확인 표시 -->
  <LhIcon name="check" />
  <!-- 닫기 -->
  <LhIcon name="close" />
  <!-- 편집 -->
  <LhIcon name="edit" />
  <!-- 삭제 -->
  <LhIcon name="delete" />
  <!-- 로딩 중 -->
  <LhIcon name="loading" />
  <!-- 위쪽 화살표 -->
  <LhIcon name="arrow-up" />
  <!-- 아래쪽 화살표 -->
  <LhIcon name="arrow-down" />
  <!-- 왼쪽 화살표 -->
  <LhIcon name="arrow-left" />
  <!-- 오른쪽 화살표 -->
  <LhIcon name="arrow-right" />
</template>

<script>
import { LhIcon } from '@lh-ui/vue3'

export default {
  components: { LhIcon },
}
</script>

<template>
  <!-- 별 모양 -->
  <LhIcon name="star" />
  <!-- 검색 -->
  <LhIcon name="search" />
  <!-- 확인 표시 -->
  <LhIcon name="check" />
  <!-- 닫기 -->
  <LhIcon name="close" />
  <!-- 편집 -->
  <LhIcon name="edit" />
  <!-- 삭제 -->
  <LhIcon name="delete" />
  <!-- 로딩 중 -->
  <LhIcon name="loading" />
  <!-- 위쪽 화살표 -->
  <LhIcon name="arrow-up" />
  <!-- 아래쪽 화살표 -->
  <LhIcon name="arrow-down" />
  <!-- 왼쪽 화살표 -->
  <LhIcon name="arrow-left" />
  <!-- 오른쪽 화살표 -->
  <LhIcon name="arrow-right" />
</template>

다양한 크기

다양한 크기

<script setup lang="ts">
</script>

<template>
  <LhIcon name="star" size="small" />
  <LhIcon name="star" size="default" />
  <LhIcon name="star" size="large" />
  <LhIcon name="star" size="x-large" />
</template>

<script>
export default {}
</script>

<template>
  <LhIcon name="star" size="small" />
  <LhIcon name="star" size="default" />
  <LhIcon name="star" size="large" />
  <LhIcon name="star" size="x-large" />
</template>

색상 커스터마이징

색상 커스터마이징

<script setup lang="ts">
</script>

<template>
  <LhIcon name="star" color="#e6a23c" />
  <LhIcon name="search" color="#409eff" />
  <LhIcon name="check" color="#67c23a" />
  <LhIcon name="close" color="#f56c6c" />
</template>

<script>
export default {}
</script>

<template>
  <LhIcon name="star" color="#e6a23c" />
  <LhIcon name="search" color="#409eff" />
  <LhIcon name="check" color="#67c23a" />
  <LhIcon name="close" color="#f56c6c" />
</template>

국제화

아이콘 컴포넌트 자체는 글자와 관련이 없지만, LhConfigProvider와 언어 팩으로 주변 텍스트의 국제화를 구현할 수 있습니다.

국제화

<script setup lang="ts">
import { ref } from 'vue'
import { LhConfigProvider, LhIcon, LhButton } from '@lh-ui/vue3'
import { zhCN } from '@lh-ui/vue3'
import { enUS } from '@lh-ui/vue3'

const locale = ref('zh-CN')
</script>

<template>
  <!-- 언어 환경 전환 -->
  <LhConfigProvider :locale="locale === 'zh-CN' ? zhCN : enUS">
    <LhIcon name="star" />
    <LhButton @click="locale = locale === 'zh-CN' ? 'en-US' : 'zh-CN'">
      {{ locale === 'zh-CN' ? '切换英文' : 'Switch to Chinese' }}
    </LhButton>
  </LhConfigProvider>
</template>

<script>
import { LhConfigProvider, LhIcon, LhButton } from '@lh-ui/vue3'
import { zhCN } from '@lh-ui/vue3'
import { enUS } from '@lh-ui/vue3'

export default {
  components: { LhConfigProvider, LhIcon, LhButton },
  data() {
    return {
      locale: 'zh-CN',
      zhCN: zhCN,
      enUS: enUS,
    }
  },
}
</script>

<template>
  <!-- 언어 환경 전환 -->
  <LhConfigProvider :locale="locale === 'zh-CN' ? zhCN : enUS">
    <LhIcon name="star" />
    <LhButton @click="locale = locale === 'zh-CN' ? 'en-US' : 'zh-CN'">
      {{ locale === 'zh-CN' ? '切换英文' : 'Switch to Chinese' }}
    </LhButton>
  </LhConfigProvider>
</template>

Icon API

Props

속성	설명	타입	기본값
name	아이콘 이름	"star" | "search" | "check" | "close" | "arrow-up" | "arrow-down" | "arrow-left" | "arrow-right" | "warning" | "error" | "info" | "loading" | "plus" | "minus" | "edit" | "delete" | "setting" | "user" | "home" | "menu" | "more" | "download" | "upload" | "refresh" | "folder" | "file" | "date" | "clock" | "email" | "phone" | "location" | "image" | "share" | "bell" | "filter" | "eye" | "link"	—
size	아이콘 크기	string | number	—
color	아이콘 색상	string	—
themeVars	컴포넌트 수준 테마 변수, ConfigProvider 설정을 덮어씀	{ [x: string]: string; }	—
bgPattern	컴포넌트 수준 배경 문양, ConfigProvider 설정을 덮어씀	string	—

Slots

슬롯	설명
default	커스텀 아이콘 내용

타입 정의

이 컴포넌트가 외부로 내보내는 TypeScript 타입 구조는 다음과 같습니다(packages/components/icon/src/types.ts와 @lh-ui/share/core/* 소스에서 자동 추출, 각 항목을 펼쳐 전체 정의를 확인하세요. 속성 설명은 위쪽 Props 표를 참고하세요).

LhIconProps

/**
 * Icon 컴포넌트 Props
 */
export interface LhIconProps {
  /** 아이콘 이름 */
  name?: LhIconName
  /** 아이콘 크기 */
  size?: string | number
  /** 아이콘 색상 */
  color?: string
  /** 컴포넌트 수준 테마 변수, ConfigProvider 설정을 덮어씀 */
  themeVars?: Record<string, string>
  /** 컴포넌트 수준 배경 문양, ConfigProvider 설정을 덮어씀 */
  bgPattern?: string
}

LhIconSize

export type LhIconSize = string | number

LhIconName _{(@lh-ui/share/core/icon (svgs.ts)에서 가져옴)}

export type LhIconName = keyof typeof LH_ICON_SVGS_CONST