# 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" 落到根元素。

最后更新: 2026/10/12 23:57:05

Copyright © 2024-2026 风默文学 | 宁ICP备2024006574号 | 公安备案徽标苏公网安备32040002010537