أيقونة Icon

مكوّن أيقونات يوفّر مجموعة غنية من الموارد الرسومية.

الاستخدام الأساسي

vue

<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>

vue

<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>

أحجام مختلفة

vue

<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>

vue

<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>

ألوان مخصصة

vue

<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>

vue

<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 مع حزمة اللغة.

vue

<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>

vue

<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

الخصائص

الخاصية	الوصف	النوع	الافتراضي
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`	—

الفتحات

اسم الفتحة	الوصف
default	محتوى أيقونة مخصص

تعريفات الأنواع

بنى TypeScript التي يصدّرها هذا المكوّن خارجيًا (مستخرَجة تلقائيًا من packages/components/icon/src/types.ts و@lh-ui/share/core/*؛ انقر كل عنصر لعرض التعريف كاملًا؛ وصف الخصائص في جدول الخصائص أعلاه):

LhIconProps

/**
 * خاصيات مكوّن Icon
 */
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

أيقونة Icon ​

الاستخدام الأساسي ​

أحجام مختلفة ​

ألوان مخصصة ​

التدويل ​

واجهة برمجة تطبيقات Icon ​

الخصائص ​

الفتحات ​

تعريفات الأنواع ​