Icon

LhIcon provides built-in icons with configurable size and color.

Basic Usage

Basic Usage

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

<template>
  <LhIcon name="star" />
  <LhIcon name="search" />
  <LhIcon name="check" />
  <LhIcon name="close" />
</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" />
</template>

Size

Size

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

<template>
  <div style="display: flex; align-items: center; gap: 12px;">
    <LhIcon name="star" size="small" />
    <LhIcon name="star" size="default" />
    <LhIcon name="star" size="large" />
    <LhIcon name="star" size="x-large" />
  </div>
</template>

<script>
export default {}
</script>

<template>
  <div style="display: flex; align-items: center; gap: 12px;">
    <LhIcon name="star" size="small" />
    <LhIcon name="star" size="default" />
    <LhIcon name="star" size="large" />
    <LhIcon name="star" size="x-large" />
  </div>
</template>

Custom Color

Custom Color

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

<template>
  <div style="display: flex; align-items: center; gap: 12px;">
    <LhIcon name="star" color="#e6a23c" />
    <LhIcon name="search" color="#409eff" />
  </div>
</template>

<script>
export default {}
</script>

<template>
  <div style="display: flex; align-items: center; gap: 12px;">
    <LhIcon name="star" color="#e6a23c" />
    <LhIcon name="search" color="#409eff" />
  </div>
</template>

Props

Prop	Description	Type	Default
name	Icon 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	Icon size	string | number	—
color	Icon color	string	—
themeVars	Component-level theme variables, overriding ConfigProvider settings	{ [x: string]: string; }	—
bgPattern	Component-level background pattern, overriding ConfigProvider settings	string	—

Slots

Slot	Description
default	Custom icon content

Type Definitions

The TypeScript type structures exported by this component (auto-extracted from packages/components/icon/src/types.ts and @lh-ui/share/core/* sources; click each entry to expand; see the Props table above for attribute descriptions):

LhIconProps

export interface LhIconProps {
  name?: LhIconName
  size?: string | number
  color?: string
  themeVars?: Record<string, string>
  bgPattern?: string
}

LhIconSize

export type LhIconSize = string | number

LhIconName _{(from @lh-ui/share/core/icon (svgs.ts))}

export type LhIconName = keyof typeof LH_ICON_SVGS_CONST