الأيقونات

المجموعة

أيقونات Phosphor بالوزن العادي، وثلاث نسخ مصمتة حيث يحمل الشكل المُعبّأ معنى.

المجموعة كاملة

الأيقونات الـ84 كلها، مجمّعة. اللون الكهرماني يميّز الأيقونة الاتجاهية: فهي تنعكس من تلقاء نفسها في العربية.

طريقتان للعرض

يأخذ Icon اسمًا ويحلّه على الخادم. ويأخذ Svg كائن أيقونة مستوردًا ويعمل في أي مكان.

هذا ما يُبقي الأيقونات غير المستخدمة خارج حزمتك. خريطة واحدة كبيرة كانت ستجلبها كلها.

'use client'
import { Icon } from 'topclassui/icon'

// server-only, so this fails at build time
<Icon name="spinner" />

'use client'
import { Svg } from 'topclassui/svg'
import { spinner } from 'topclassui/icons/spinner'

<Svg icon={spinner} />

الأحجام

القيمة الافتراضية لـIcon هي 1em، كي يطابق النص الذي بجانبه. استخدم اسم حجم عندما تقف الأيقونة وحدها.

ما ينعكس من اليمين إلى اليسار

تنعكس 16 أيقونة من 84 في الاتجاه من اليمين إلى اليسار. فللاتجاه معنى في السهم، لا في العدسة المكبّرة.

إضافة أيقونات

أي ملف SVG بمسار واحد يعمل مع Svg: أعطه viewBox والمسار.

import { Svg } from 'topclassui/svg'
import type { IconData } from 'topclassui/icons'

// one of your own, no CLI needed
const myLogo: IconData = {
  viewBox: '0 0 24 24',
  path: 'M12 2 22 12 12 22 2 12Z',
  directional: false,
}

export const Logo = () => <Svg icon={myLogo} size="md" />