heroicons

أيقونات SVG جميلة مصنوعة يدويًا ، من قبل صانعي CSS Tailwind.
متوفر كأيقونات SVG الأساسية وعبر مكتبات React و VUE من الطرف الأول.

تصفح في Heroicons.com →

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

أسرع طريقة لاستخدام هذه الرموز هي ببساطة نسخ المصدر للأيقونة التي تحتاجها من Heroicons.com ودخلها مباشرة في HTML الخاص بك:

 <svg
  class = "size-6 text-gray-500" fill = "none" viewbox = "0 0 24 24" stroke = "currentColor" stroke-width = "2"
  <pathstroke-linecap = "round" stroke-linejoin = "round" d = "m12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
  /> </svg>

يتم تكوين كلا من أنماط الأيقونات مسبقًا لتكون قابلة للتصميم من خلال تعيين خاصية color CSS ، إما يدويًا أو باستخدام فئات الأداة المساعدة مثل text-gray-500 في إطار مثل CSS Tailwind.

رد فعل

أولاً ، قم بتثبيت @heroicons/react من NPM:

 NPM تثبيت @Heroicons/React

الآن يمكن استيراد كل رمز بشكل فردي كمكون رد فعل:

 استيراد {beakericon} من '@@harleicons/react/24/solid'function myComponent () {
  إرجاع (<viv> <beakericon className = "Size-6 Text-Blue-500"/> <p> ... </p> </viv>
  )}

يمكن استيراد أيقونات المخطط التفصيلي على مدار 24 × 24 من @heroicons/react/24/outline ، ويمكن استيراد الرموز الصلبة 24x24 من @heroicons/react/24/solid ، ويمكن استيراد الرموز الصلبة 20x20 من @heroicons/react/20/solid ، و 16 × 16 يمكن استيراد الرموز الصلبة من @heroicons/react/16/solid .

تستخدم الرموز اتفاقية تسمية علمية الجمال وتتم تلويحها دائمًا مع Icon كلمة.

تصفح القائمة الكاملة لأسماء الأيقونات على UNPKG →

Vue

أولاً ، قم بتثبيت @heroicons/vue من NPM:

 NPM تثبيت @Heroicons/Vue

الآن يمكن استيراد كل رمز بشكل فردي كمكون VUE:

 <قالب>
  <viv>
    <beakericon class = "Size-6 Text-Blue-500" />
    <p> ... </p>
  </div>
</fulsplate> <script setup> import {beakericon} من '@@heralicons/vue/24/sold' </script>

يمكن استيراد أيقونات مخطط Outline 24x24 من @heroicons/vue/24/outline ، ويمكن استيراد الرموز الصلبة 24 × 24 من @heroicons/vue/24/solid ، ويمكن استيراد الرموز الصلبة 20x20 من @heroicons/vue/20/solid ، ويمكن استيراد الرموز الصلبة 16x16 من @heroicons/vue/16/solid .

تستخدم الرموز اتفاقية تسمية علمية الجمال وتتم تلويحها دائمًا مع Icon كلمة.

تصفح القائمة الكاملة لأسماء الأيقونات على UNPKG →

المساهمة

على الرغم من أننا نقدر على الإطلاق استعداد أي شخص لمحاولة تحسين المشروع ، إلا أننا مهتمون حاليًا فقط بالمساهمات التي تعمل على إصلاح الأخطاء ، على سبيل المثال أشياء مثل أنواع Typescript غير الصحيحة ، أو إصلاح أيقونة تم تصديرها بملء بدلاً من السكتة الدماغية ، إلخ ، إلخ.

نحن لا نقبل مساهمات الرموز الجديدة أو إضافة دعم لأطر أخرى مثل Svelte أو SolidJs . بدلاً من ذلك ، نشجعك على إطلاق الرموز الخاصة بك في مكتبتك الخاصة ، وإنشاء حزمك الخاصة لأي أطر أخرى ترغب في رؤيتها مدعومة.

رخصة

هذه المكتبة مرخصة معهد ماساتشوستس للتكنولوجيا.