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 { jaJP } from '@lh-ui/vue3'
import { enUS } from '@lh-ui/vue3'

const locale = ref('ja-JP')
</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 { jaJP } from '@lh-ui/vue3'
import { enUS } from '@lh-ui/vue3'

export default {
  components: { LhConfigProvider, LhIcon, LhButton },
  data() {
    return {
      locale: 'ja-JP',
      jaJP: jaJP,
      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