تحميل tailwindcss icons - تحميل tailwindcss icons كود المصدر

tailwindcss icons

شفرة المصدر الأخرى

v1.8.1

تنزيل

؟ يمكنك مساعدة المؤلف في أن يصبح مشرفًا مفتوح المصدر بدوام كامل من خلال رعايته على GitHub.

@egoist/tailwindcss-icons

استخدم أي أيقونة من Iconify

معاينة

ثَبَّتَ

npm i @egoist/tailwindcss-icons -D

الاستخدام

في tailwind.config.js الخاص بك:

 const { iconsPlugin , getIconCollections } = require ( "@egoist/tailwindcss-icons" )

module . exports = {
  plugins : [
    iconsPlugin ( {
      // Select the icon collections you want to use
      // You can also ignore this option to automatically discover all individual icon packages you have installed
      // If you install @iconify/json, you should explicitly specify the collections you want to use, like this:
      collections : getIconCollections ( [ "mdi" , "lucide" ] ) ,
      // If you want to use all icons from @iconify/json, you can do this:
      // collections: getIconCollections("all"),
      // and the more recommended way is to use `dynamicIconsPlugin`, see below.
    } ) ,
  ] ,
}

تحتاج أيضًا إلى تثبيت @iconify/json (مجموعات أيقونات كاملة، 50 ميجابايت) أو @iconify-json/{collection_name} (حزمة أيقونات فردية):

 # install every icon:
npm i @iconify/json -D

# or install individual packages like this:
npm i @iconify-json/mdi @iconify-json/lucide -D

ثم يمكنك استخدام الرموز في HTML الخاص بك:

 <!-- pattern: i-{collection_name}-{icon_name} -->
< span class =" i-mdi-home " > </ span >

ابحث عن الرمز الذي تريد استخدامه هنا: https://icones.js.org

نصيحة

للحصول على القائمة الكاملة لأسماء الأيقونات كنوع الكتابة المطبوعة، يمكنك الرجوع إلى هذه المشكلة.

خيارات البرنامج المساعد

خيار	يكتب	تقصير	وصف
بادئة	خيط	`i`	بادئة الفئة لمطابقة قواعد الرمز
حجم	رقم	`1`	مقياس نسبة إلى حجم الخط الحالي
عرض السكتة الدماغية	رقم	`undefined`	عرض الحد للأيقونات (قد لا يعمل هذا مع جميع الرموز)
extraProperties	سجل <سلسلة، سلسلة>	`{}`	يتم تطبيق خصائص CSS الإضافية على CSS الذي تم إنشاؤه.
CollectionNamesAlias	[مفتاح في CollectionNames]؟: سلسلة	`{}`	الاسم المستعار لتخصيص أسماء المجموعة.

أيقونات مخصصة

يمكنك أيضًا استخدام أيقونات مخصصة مع هذا البرنامج الإضافي، على سبيل المثال:

 module . exports = {
  plugins : [
    iconsPlugin ( {
      collections : {
        foo : {
          icons : {
            "arrow-left" : {
              // svg body
              body : '<path d="M10 19l-7-7m0 0l7-7m-7 7h18"/>' ,
              // svg width and height, optional
              width : 24 ,
              height : 24 ,
            } ,
          } ,
        } ,
      } ,
    } ) ,
  ] ,
}

ثم يمكنك استخدام هذا الرمز المخصص كاسم فئة: i-foo-arrow-left .

نصيحة

لقراءة الرموز المخصصة من الدليل، يمكنك الرجوع إلى تحميل svgs من نظام الملفات

إنشاء أيقونة ديناميكيا

الفكرة من @iconify/tailwind، شكرًا لمؤلف Iconify على العمل الرائع!

إذا كنت تريد تثبيت @iconify/json واستخدام أي رمز تريده، فيجب عليك إضافة مكون إضافي آخر إلى tailwind.config.js الخاص بك.

وذلك لأننا لا نستطيع توفير الإكمال التلقائي لجميع الرموز من @iconify/json ، فهذا سيجعل المحرر الخاص بك بطيئًا.

 const { iconsPlugin , dynamicIconsPlugin } = require ( "@egoist/tailwindcss-icons" )

module . exports = {
  plugins : [ iconsPlugin ( ) , dynamicIconsPlugin ( ) ] ,
}