مكتبة أيقونات Angular (محايدة للمجموعة) | ng-hub-ui-icons

أيقونات Angular محايدة للمجموعة: اعرض Font Awesome وBootstrap Icons وMaterial Symbols وSolar أو SVG الخاصة بك عبر واجهة <hub-icon> / [hubIcon] واحدة، منسّقة بمتغيّرات CSS.

نظرة عامة

لماذا تبحث الفِرَق عن هذه المكتبة

استخدم مكتبة أيقونات Angular هذه عندما تريد واجهة واحدة لأي مجموعة أيقونات — بدون اعتماد صارم على حزمة محدّدة، مع مزج المجموعات بحرّية وتنسيقها جميعًا عبر متغيّرات CSS ‏--hub-icon-*.

التثبيت

npm install ng-hub-ui-icons

انتقل إلى

مثالي لـ

  • استخدم واجهة أيقونات واحدة في تطبيق يمزج Font Awesome وMaterial Symbols.
  • نسّق حجم ولون كل أيقونة عبر متغيّرات CSS، مع وضع داكن في وقت التشغيل.
  • ضَع <hub-icon> داخل أي مكوّن — أزرار، قوائم، روابط — عبر الإسقاط، دون الحاجة إلى مُحوّل.
  • سجّل حزمة SVG خاصة بك لتقديم أيقونات العلامة التجارية عبر المكوّن نفسه.

حول icons

تفصل ng-hub-ui-icons بين كيفية الإشارة إلى الأيقونة وبين المجموعة التي ترسمها. الحزمة محلّل خالص من الاسم إلى مواصفة عرض؛ توفّر المكتبة مصانع وإعدادات جاهزة لـ Font Awesome وBootstrap Icons وMaterial Symbols وSolar لكنها لا تحزم أيًّا منها. يعرض المكوّن والموجّه أيقونات قائمة على الأصناف أو الروابط أو الـ sprite أو SVG المضمّن أو الصور، وكلها منسّقة بشكل موحّد عبر رموز --hub-icon-*.

أدلّة الميزات

عرض الأيقونات

اعرض أي مجموعة أيقونات عبر واجهة واحدة — الحزم والتنويعات وموجّه [hubIcon].

أمثلة:
الإعداد

الإعداد

Default pack (fa)<hub-icon name="house" />
Explicit pack="bi"pack="bi"
Explicit pack="ms"pack="ms"
Shorthandname="fa:brands:github"

Built-in presets — load the set's stylesheet once, then register its pack. Any other set works via a custom pack.

Font Awesome Bootstrap Icons Material Symbols Solar
Font Awesome

Font Awesome

Solid
Regular
Brands
Spin
Bootstrap Icons

Bootstrap Icons

Outline
Filled (-fill)
Material Symbols

Material Symbols

Glyphs
Families
FILL axis
Solar

Solar

Bold
Families
SVG مخصص

SVG مخصص

سبرايت SVG

سبرايت SVG

صورة

صورة

es flagfr flagde flagjp flagus flagbr flag
es flages flages flag
التنويعات

التنويعات

FA solid / regular
MS outlined/round/sharp
الموجّه

الموجّه

HomesettingsSettingsDelete

التنسيق والتكامل

نسّق كل حزمة عبر رموز --hub-icon-* واعرض الأيقونات داخل مكوّنات ng-hub-ui الأخرى.

أمثلة:
التنسيق

التنسيق

التكامل مع الأزرار

التكامل مع الأزرار

الميزات الرئيسية

التغييرات الأخيرة

Version 22.0.0 - 7/1/26, 12:00 AM

added: Initial release: <hub-icon> component and [hubIcon] directive, agnostic to the icon set.

added: provideHubIcons pack registry; classPack / ligaturePack / svgPack factories and faPack / bootstrapPack / materialSymbolsPack / solarPack presets.

added: Uniform --hub-icon-* theming (size, color and variable-font axes), so one token set themes every pack identically.

المكتبات ذات الصلة

ng-hub-ui-buttons ng-hub-ui-badges ng-hub-ui-nav