react native vector icons Download - react native vector icons Download Download Download

رد فعل أيقونات المتجهات الأصلية

ارفع تطبيقاتك الأصلية React مع قوة أيقونات المتجهات القابلة للتخصيص. مثالية لأزرار التزيين ، والشعارات ، وحانات التنقل أو علامات التبويب ، تتكامل هذه الرموز بسلاسة في مشاريعك. تعدد استخداماتها يجعل التمديد وتصميم الجهد.

من أجل دمج ملفات .svg أصلاً ، يمكنك استكشاف react-native-vector-image .

نصيحة

إصدار جديد من RNVI سيأتي قريبًا. لديها ما يقرب من إعداد تكوين الصفر. ترحيب ردود الفعل ، يرجى تجربة ذلك في فرع المونوربو

جدول المحتويات

مجموعات الأيقونة المجمعة
تثبيت
- إعداد iOS
- إعداد Android
- إعداد MacOS
- إعداد Windows
- رد الفعل على web
- إعداد الويب
الترقية
مكون رمز
أيقونة
الاستخدام ككائن صورة/مصدر PNG
خطوط متعددة الطراز
الخطوط المخصصة
الرسوم المتحركة
أمثلة الاستخدام
Tabbar
توليد مجموعة الرمز الخاصة بك من ملف CSS
Changelog
استكشاف الأخطاء وإصلاحها
رخصة

الرعاية

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

مجموعات الأيقونة المجمعة

استكشف جميع الرموز.

AntDesign من المضادات ( 298 أيقونات)
Entypo بقلم دانييل بروس (v1.0.1 مع 411 أيقونات)
EvilIcons صممه ألكساندر ماديانكين ورومان شامين (v1.10.1 مع 70 أيقونات)
Feather أنشأها Cole Bemis & Consitors (v4.28.0 يضم 286 أيقونات)
FontAwesome بواسطة Dave Gandy (v4.7.0 يحتوي على 675 أيقونات)
Fontawesome FontAwesome 5 من Fonticons ، Inc.
FontAwesome 6 صممه Fonticons ، Inc. (V6.6.0 يضم 2016 أيقونات مجانية و 16150 Pro)
Fontisto التي أنشأها كينان غوندوغان (الإصدار 3.0.4 يضم 615 أيقونات)
Foundation by Zurb ، Inc. (v3.0 مع 283 أيقونات)
Ionicons مصنوع من أيوني (V7.1.0 يحتوي على 1338 أيقونات)
MaterialIcons by Google ، Inc. (v4.0.0 يضم 2189 أيقونات)
MaterialCommunityIcons من MaterialSignicons.com (v6.5.95 بما في ذلك 6596 أيقونات)
Octicons التي صممها Github ، Inc. (v16.3.1 مع 250 أيقونات)
Zocial بقلم سام كولينز (v1.4.0 مع 100 رمز)
SimpleLineIcons المصمم من قبل Sabbir & Consitors (v2.5.5 مع 189 أيقونات)

تثبيت

قم بتثبيت الحزمة عبر NPM:

npm install --save react-native-vector-icons

اعتمادًا على النظام الأساسي الذي تستهدفه (iOS/Android/Windows) ، اتبع تعليمات الإعداد المناسبة.
إذا كنت تخطط لاستخدام أيقونات Fontawomesome 5 أو 6 ، راجع هذه الأدلة: Fontawesome 5 | fontawesome 6

إعداد iOS

لاستخدام الرموز المجمعة على iOS ، قم بتنفيذ الخطوة التالية:

قم بتشغيل npx pod-install في دليل iOS

تحرير Info.plist وأضف خاصية تسمى الخطوط المقدمة بواسطة التطبيق (أو UiAppFonts إذا كان Xcode Autocomplet لا يعمل):

قائمة بجميع الخطوط المتاحة للنسخ واللصق في info.plist

< key >UIAppFonts</ key >
< array >
  < string >AntDesign.ttf</ string >
  < string >Entypo.ttf</ string >
  < string >EvilIcons.ttf</ string >
  < string >Feather.ttf</ string >
  < string >FontAwesome.ttf</ string >
  < string >FontAwesome5_Brands.ttf</ string >
  < string >FontAwesome5_Regular.ttf</ string >
  < string >FontAwesome5_Solid.ttf</ string >
  < string >FontAwesome6_Brands.ttf</ string >
  < string >FontAwesome6_Regular.ttf</ string >
  < string >FontAwesome6_Solid.ttf</ string >
  < string >Foundation.ttf</ string >
  < string >Ionicons.ttf</ string >
  < string >MaterialIcons.ttf</ string >
  < string >MaterialCommunityIcons.ttf</ string >
  < string >SimpleLineIcons.ttf</ string >
  < string >Octicons.ttf</ string >
  < string >Zocial.ttf</ string >
  < string >Fontisto.ttf</ string >
</ array >

قد تبدو الخطوة أعلاه شيئًا كهذا:

ملاحظة: إعادة ترجمة مشروعك بعد إضافة أو إزالة الخطوط.

إعداد Android

الخيار: مع Gradle (موصى به)

لجعل إدارة الخطوط أكثر سلاسة على Android ، استخدم هذه الطريقة:

تحرير android/app/build.gradle (وليس android/build.gradle ) وأضف:

apply from : file( " ../../node_modules/react-native-vector-icons/fonts.gradle " )

لتخصيص الخطوط التي يتم نسخها ، استخدم:

project . ext . vectoricons = [
    iconFontNames : [ ' MaterialIcons.ttf ' , ' EvilIcons.ttf ' ] // Specify font files
]

apply from : file( " ../../node_modules/react-native-vector-icons/fonts.gradle " )

تكوين monorepo

إذا كنت تعمل في Monorepo ، فشك إلى المسارات الصحيحة لنص "fonts.gradle` وملفات الخطوط" ، نسبة إلى ملف Android/App/Build.gradle. هيكل مثال:

 your-monorepo/
├─ node_modules/
│  ├─ react-native-vector-icons
├─ apps/
│  ├─ YourApp/
│  │  ├─ android/
│  │  │  ├─ app/
│  │  │  │  ├─ build.gradle

تحديث مسارات مثل:

project.ext.vectoricons = [
+ iconFontsDir: "../../../../node_modules/react-native-vector-icons/Fonts",
  iconFontNames: ["YourFont.ttf", "..."]
]

- apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
+ apply from: "../../../../node_modules/react-native-vector-icons/fonts.gradle

️ نشأت المشكلات المبلغ عنها عند استخدام إصدارات RNVI في وقت مبكر من 9.0.0 في سياق Monorepo. لذلك ، من المستحسن التأكد من أن إصدار RNVI الخاص بك هو 9.0.0 أو أحدث.

الخيار: التكامل اليدوي

لدمج المكتبة يدويًا ، اتبع هذه الخطوات:

انسخ المحتويات من مجلد Fonts وقم بصقها في android/app/src/main/assets/fonts (تأكد من أن اسم المجلد صغير ، أي fonts ).

دمج المكتبة لدعم `getImageSource`

الخطوات التالية اختيارية وضرورية فقط إذا كنت تنوي استخدام وظيفة Icon.getImageSource .

قم بتحرير ملف android/settings.gradle كما هو موضح أدناه:

rootProject.name = 'MyApp'

include ':app'

+ include ':react-native-vector-icons'
+ project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')

قم بتحرير android/app/build.gradle (الموجود في مجلد التطبيق ) كما هو موضح أدناه:

apply plugin: 'com.android.application'

android {
  ...
}

dependencies {
  implementation fileTree(dir: "libs", include: ["*.jar"])
  //noinspection GradleDynamicVersion
  implementation "com.facebook.react:react-native:+"  // From node_modules

+ implementation project(':react-native-vector-icons')
}

قم بتحرير MainApplication.java (تقع في عمق android/app/src/main/java/... ) كما هو موضح أدناه (لاحظ أن هناك two للتحرير):

package com.myapp;

+ import com.oblador.vectoricons.VectorIconsPackage;

....

  @Override
  protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
      new MainReactPackage()
+   , new VectorIconsPackage()
    );
  }

يرجى ملاحظة أن هذه الخطوة الاختيارية ضرورية فقط إذا لم يدعم تطبيق React-Native الربط التلقائي ؛ خلاف ذلك ، يمكنك تخطي هذا.

إعداد MacOS

عن طريق react-native-macos

لإعداد المكتبة على مشروع MacOS الخاص بك باستخدام react-native-macos ، اتبع هذه الخطوات:

تصفح إلى مجلد node_modules/react-native-vector-icons واسحب مجلد Fonts إلى مشروعك في XCode. تأكد من فحص التطبيق الخاص بك ضمن "إضافة إلى الأهداف" ، وحدد "إنشاء مراجع المجلد" عند المطالبة.
قم بتحرير Info.plist وقم بتضمين خاصية جديدة تسمى مسار موارد Fonts Fonts (أو ATSApplicationFontsPath إذا كان الإكمال التلقائي لـ Xcode لا يعمل أو لا تستخدم Xcode). اضبط قيمة هذه الخاصية على Fonts .
من المجلد من مشروعك /ios :

bundle exec pod install

يرجى ملاحظة أنه بعد إضافة خطوط جديدة ، تحتاج إلى إعادة ترجمة مشروعك. تأكد أيضًا من وجود مجلد Fonts ضمن قسم موارد حزمة النسخ ضمن مراحل بناء مشروع Xcode الخاص بك.

ستقوم هذه الخطوات بدمج مكتبة Icons Vector بشكل فعال في مشروع MacOS الخاص بك أثناء استخدام إطار react-native-macos .

إعداد Windows

عبر react-native-windows

لإعداد المكتبة على مشروع Windows الخاص بك باستخدام react-native-windows ، اتبع هذه الخطوات:

في المشاريع ذات المستوى الأعلى ( /windows/project-name/Assets ) ، نسخ ولصق ملفات الخط.
افتح الحل الخاص بك في Visual Studio:
أ. انقر بزر الماوس الأيمن فوق مجلد الأصول في الحل الخاص بك. ب. حدد إضافة> عنصر موجود . ج. تصفح وحدد الخطوط التي قمت بنسخها إلى /windows/project-name/assets . د. انقر فوق إضافة .

يرجى ملاحظة أنه بعد إضافة خطوط جديدة ، تحتاج إلى إعادة ترجمة مشروعك.

من خلال اتباع هذه الخطوات ، ستقوم بدمج مكتبة Icons Vector بسلاسة في مشروع Windows الخاص بك ، مع الاستفادة من إطار react-native-windows .

رد الفعل على web

لتنفيذ تطبيق جوال رايتي رايتي على الويب باستخدام react-native-web تحتاج فقط إلى التأكد من أن الخطوط معروفة على جانب تطبيق الويب.

ستحتاج إلى إضافة أسرة الخط لكل خط تستخدمه إلى CSS

يمكنك تصحيح الأخطاء المفقودة من خلال البحث في وحدة تحكم المطورين في متصفح الويب الخاص بك عند تصحيح تطبيق الويب الخاص بك.

ملاحظة: إذا كنت تستخدم WebPack أو ما شابه ، فقد تحتاج إلى تكوين WebPack للتعامل مع تحميل خطوط TTF ، باستخدام url-loader أو ملف الملف. انظر إعداد الويب لمزيد من التفاصيل.

في App.css أو ما شابه ذلك ، أضف مواصفات أسرة الخط:

 @font-face {
  src : url (path/to/fonts/Ionicons.ttf);
  font-family : "Ionicons" ;
}

@font-face {
  src : url (path/to/fonts/FontAwesome.ttf);
  font-family : "FontAwesome" ;
}

@font-face {
  src : url (path/to/fonts/FontAwesome5_Brands.ttf);
  font-family : "FontAwesome5_Brands" ;
  font-weight : 400 ; /* Regular weight */
  font-style : normal;
}

@font-face {
  src : url (path/to/fonts/FontAwesome5_Regular.ttf);
  font-family : "FontAwesome5_Regular" ;
  font-weight : 400 ; /* Regular weight */
  font-style : normal;
}

@font-face {
  src : url (path/to/fonts/FontAwesome5_Solid.ttf);
  font-family : "FontAwesome5_Solid" ;
  font-weight : 900 ; /* Bold weight for solid */
  font-style : normal;
}

@font-face {
  src : url (path/to/fonts/MaterialIcons.ttf);
  font-family : "MaterialIcons" ;
}

@font-face {
  src : url (path/to/fonts/Feather.ttf);
  font-family : "Feather" ;
}

@font-face {
  src : url (path/to/fonts/MaterialCommunityIcons.ttf);
  font-family : "MaterialCommunityIcons" ;
}

/* TODO: Add other icons fonts here */

إعداد الويب

لدمج المكتبة مع مشروع الويب الخاص بك باستخدام WebPack ، اتبع الخطوات هذه:

في ملف تكوين WebPack الخاص بك ، أضف قسمًا لمعالجة ملفات TTF باستخدام url-loader أو file-loader :

 {
  test : / .ttf$ / ,
  loader : "url-loader" , // or directly file-loader
  include : path . resolve ( __dirname , "node_modules/react-native-vector-icons" ) ,
}

في نقطة إدخال JavaScript الخاصة بك ، استهلك ملفات الخط وحقن علامة النمط اللازمة:

  // Use the prebuilt version of RNVI located in the dist folder
  import Icon from 'react-native-vector-icons/dist/FontAwesome' ;

  // Generate the required CSS
  import iconFont from 'react-native-vector-icons/Fonts/FontAwesome.ttf' ;
  const iconFontStyles = `@font-face {
    src: url( ${ iconFont } );
    font-family: FontAwesome;
  }` ;

  // Create a stylesheet
  const style = document . createElement ( 'style' ) ;
  style . type = 'text/css' ;

  // Append the iconFontStyles to the stylesheet
  if ( style . styleSheet ) {
    style . styleSheet . cssText = iconFontStyles ;
  } else {
    style . appendChild ( document . createTextNode ( iconFontStyles ) ) ;
  }

  // Inject the stylesheet into the document head
  document . head . appendChild ( style ) ;

باتباع هذه الخطوات ، ستقوم بدمج مكتبة Icons Vector في مشروع الويب الخاص بك باستخدام WebPack ، مما يتيح لك استخدام الرموز في تطبيق الويب الخاص بك دون عناء.

الترقية

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

مكون `Icon`

يمكنك إما استخدام أحد الرموز المجمعة أعلاه أو لفة الخط المخصص الخاص بك.

 import Icon from 'react-native-vector-icons/FontAwesome' ;
const myIcon = < Icon name = "rocket" size = { 30 } color = "#900" / > ;

ملكيات

أي خاصية نصية وما يلي:

دعم	وصف	تقصير
`size`	حجم الرمز ، يمكن أيضًا تمريره `fontSize` في كائن النمط.	`12`
`name`	ما أيقونة لإظهارها ، انظر تطبيق explorer icon أو أحد الروابط أعلاه.	لا أحد
`color`	لون الأيقونة.	ورث

طرق ثابتة

دعم	وصف
`getFontFamily`	إرجاع عائلة الخط التي تُستخدم حاليًا لاسترداد الرموز كنص. الاستخدام: `const fontFamily = Icon.getFontFamily()`
`getImageSource`	إرجاع وعد بأن حل إلى مصدر إصدار صورة نقطية من الرمز للاستخدام مع `Image` Component et al. الاستخدام: `const source = await Icon.getImageSource(name, size, color)`
`getImageSourceSync`	مثل `getImageSource` ولكن متزامن. الاستخدام: `const source = Icon.getImageSourceSync(name, size, color)`
`getRawGlyphMap`	إرجاع خريطة glyph الخام لمجموعة الأيقونة. الاستخدام: `const glyphMap = Icon.getRawGlyphMap()`
`hasIcon`	يتحقق مما إذا كان الاسم صالحًا في مجموعة الأيقونات الحالية. الاستخدام: `const isNameValid = Icon.hasIcon(name)`

التصميم

نظرًا لأن Icon تبني أعلى مكون Text ، فإن معظم خصائص الأنماط ستعمل كما هو متوقع ، فقد تجد أنه من المفيد أن تلعب مع هذه:

backgroundColor
borderWidth
borderColor
borderRadius
padding
margin
color
fontSize

ملاحظة: على أندرويد لا يدعم Text border* حاليًا ، للتحايل على هذا ببساطة لف Icon الخاص بك مع View .

من خلال الجمع بين بعض هذه ، يمكنك إنشائها على سبيل المثال:

`Icon.Button`

مكون الراحة لإنشاء أزرار مع أيقونة على الجانب الأيسر.

 import Icon from 'react-native-vector-icons/FontAwesome' ;
const myButton = (
  < Icon . Button
    name = "facebook"
    backgroundColor = "#3b5998"
    onPress = { this . loginWithFacebook }
  >
    Login with Facebook
  < / Icon . Button >
) ;

const customTextButton = (
  < Icon . Button name = "facebook" backgroundColor = "#3b5998" >
    < Text style = { { fontFamily : 'Arial' , fontSize : 15 } } >
      Login with Facebook
    < / Text >
  < / Icon . Button >
) ;

ملكيات

أي Text ، TouchableHighlight أو الخاص TouchableWithoutFeedback بالإضافة إلى هذه:

دعم	وصف	تقصير
`color`	نص النص والأيقونة ، واستخدم `iconStyle` أو Nest مكون `Text` إذا كنت بحاجة إلى ألوان مختلفة.	`white`
`size`	حجم الأيقونة.	`20`
`iconStyle`	الأنماط المطبقة على الأيقونة فقط ، جيدة لوضع الهوامش أو لون مختلف. ملاحظة: استخدم `iconStyle` للهوامش أو توقع سلوك غير مستقر.	`{marginRight: 10}`
`backgroundColor`	لون خلفية الزر.	`#007AFF`
`borderRadius`	دائرة نصف قطر الحدود من الزر ، اضبط على `0` لتعطيل.	`5`
`onPress`	وظيفة تسمى عندما يتم الضغط على الزر.	لا أحد

الاستخدام ككائن صورة/مصدر PNG

طريقة مريحة لتوصيل هذا في مكونات أخرى تعتمد على صور نقطية بدلاً من أيقونات المتجهات القابلة للتطوير. يأخذ name الوسائط size color كما هو موضح أعلاه.

 Icon . getImageSource ( 'user' , 20 , 'red' ) . then ( source =>
  this . setState ( { userIcon : source } )
) ;

بدلاً من ذلك ، يمكنك استخدام Icon.getImageSourceSync الطريقة المتزامنة. ضع في اعتبارك أن هذه الطريقة تمنع وقد تتحمل عقوبات في الأداء. المكالمات اللاحقة سوف تستخدم ذاكرة التخزين المؤقت ولكن.

خطوط متعددة الطراز

تستخدم بعض الخطوط اليوم أنماطًا متعددة ، Fontawomeom 5 على سبيل المثال ، مدعومة من هذه المكتبة. الاستخدام هو نفس مكون Icon القياسي:

 import Icon from 'react-native-vector-icons/FontAwesome5' ;

const myIcon1 = < Icon name = "comments" size = { 30 } color = "#900" / > ; // Defaults to regular
const myIcon2 = < Icon name = "comments" size = { 30 } color = "#900" solid / > ;
const myIcon3 = < Icon name = "comments" size = { 30 } color = "#900" light / > ; // Only in FA5 Pro

طرق ثابتة

يتم دعم جميع الأساليب الثابتة من Icon بواسطة خطوط متعددة الطبقات.

دعم	وصف
`getFontFamily`	إرجاع عائلة الخط التي تُستخدم حاليًا لاسترداد الرموز كنص. الاستخدام: `const fontFamily = Icon.getFontFamily(style)`
`getImageSource`	إرجاع وعد بأن حل إلى مصدر إصدار صورة نقطية من الرمز للاستخدام مع `Image` Component et al. الاستخدام: `const source = await Icon.getImageSource(name, size, color)`
`getImageSourceSync`	مثل `getImageSource` ولكن متزامن. الاستخدام: `const source = Icon.getImageSourceSync(name, size, color)`
`getRawGlyphMap`	إرجاع خريطة glyph الخام لمجموعة الأيقونة. الاستخدام: `const glyphMap = Icon.getRawGlyphMap(style)`
`hasIcon`	يتحقق مما إذا كان الاسم صالحًا في مجموعة الأيقونات الحالية. الاستخدام: `const isNameValid = Icon.hasIcon(name, style)`
`getStyledIconSet`	استخدم هذا للحصول على مكون `Icon` لأسلوب واحد. الاستخدام. `const StyledIcon = Icon.getStyledIconSet(style)`

إذا لم يتم تمرير وسيطة نمط (أو إذا كانت غير صالحة) ، فستكون الأساليب افتراضية إلى استرداد محدد مسبقًا.

عناصر

Icon.Button Icon

 import Icon from 'react-native-vector-icons/FontAwesome5' ;
const myButton = (
  < Icon . Button name = "facebook" onPress = { this . loginWithFacebook } solid >
    Login with Facebook
  < / Icon . Button >
) ;

الخطوط المخصصة

`createIconSet(glyphMap, fontFamily[, fontFile])`

إرجاع الخط المخصص الخاص بك استنادًا إلى glyphMap حيث يكون المفتاح هو اسم الرمز والقيمة إما حرف UTF-8 أو رمز حرفه. fontFamily هو اسم الخط وليس اسم الملف. افتح الخط في font book.app أو ما شابه لتعلم الاسم. تمرير اختياريا وسيطة fontFile الثالثة لدعم Android ، يجب أن يكون اسم ملف الخط المخصص.

 import { createIconSet } from 'react-native-vector-icons' ;
const glyphMap = { 'icon-name' : 1234 , test : '∆' } ;
const Icon = createIconSet ( glyphMap , 'FontName' , 'font-name.ttf' ) ;

`createIconSetFromFontello(config[, fontFamily[, fontFile]])`

طريقة الراحة لإنشاء خط مخصص يعتمد على ملف تكوين Fontello. لا تنس استيراد الخط كما هو موضح أعلاه وإسقاط config.json في مكان مناسب في مشروعك.

 import { createIconSetFromFontello } from 'react-native-vector-icons' ;
import fontelloConfig from './config.json' ;
const Icon = createIconSetFromFontello ( fontelloConfig ) ;

`createIconSetFromIcoMoon(config[, fontFamily[, fontFile]])`

 import { createIconSetFromIcoMoon } from 'react-native-vector-icons' ;
import icoMoonConfig from './selection.json' ;
const Icon = createIconSetFromIcoMoon (
  icoMoonConfig ,
  'LineAwesome' ,
  'line-awesome.ttf'
) ;

تأكد من أنك تستخدم خيار التنزيل في icomoon ، واستخدم ملف .json الذي تم تضمينه في .zip قمت بتنزيله. ستحتاج أيضًا إلى استيراد ملف خط .ttf في مشروعك ، باتباع التعليمات أعلاه.

`createMultiStyleIconSet(styles [, options])`

 import { createMultiStyleIconSet } from 'react-native-vector-icons' ;

/*
 * This is just example code, you are free to
 * design your glyphmap and styles to your liking
 */

import glyphmap from './glyphmap.json' ;
/*
 * glyphmap = {
 *   "style1": [
 *     "hello",
 *     "world"
 *   ],
 *   "style2": [
 *     "foo",
 *     "bar"
 *   ]
 * }
 */

const glyphKeys = Object . keys ( glyphmap ) ; /* ["style1", "style2"] */
const options = {
  defaultStyle : 'style1' ,
  glyphValidator : ( name , style ) => glyphKeys . indexOf ( name ) !== - 1 ,
  fallbackFamily : ( name ) => {
    for ( let i = 0 ; i < glyphKeys . length ; i ++ ) {
      const style = glyphKeys [ i ] ;
      if ( glyphmap [ style ] . indexOf ( name ) !== - 1 ) {
        return style ;
      }
    }

    /* Always return some family */
    return glyphKeys [ 0 ] ;
  }
} ;

/*
 * The styles object consits of keys, which will be
 * used as the styles later, and objects which are
 * used as style objects for the font. The style
 * should have unique characteristics for each font
 * in order to ensure that the right one will be
 * chosen. FontAwesome 5 uses font weight since
 * 5.7.0 in order to diffirentiate the styles but
 * other properties (like fontFamily) can be used.
 * It's just a standard RN style object.
 */
const styles = {
  style1 : {
    fontWeight : '700'
  } ,
  style2 : {
    fontWeight : '100'
  }
} ;

const Icon = createMultiStyleIconSet ( styles , options ) ;

/* Uses default style (style1) */
< Icon name = { 'hello' } / >
< Icon name = { 'world' } style1 / >
/* Default style is style1 but this will fall back to style2 */
< Icon name = { 'foo' } / >
/* This will also fall back to style2 */
< Icon name = { 'foo' } style1 / >
/* Regular use of style2 */
< Icon name = { 'bar' } style2 / >

خيار	وصف	تقصير
DefaultStyle	اسم النمط المراد استخدامه إذا لم يتم توفير نمط أثناء التقديم.	`Object.keys(styles)[0]`
عائلة العودة	وظيفة لاختيار الأسرة إذا لم يكن الحروف المرسومة متوفرة. يجب أن تقبل الوظيفة `name` الحروف الرسومية كمعلمة. إرجاع الاسم إذا كانت الأسرة.	`(name) => Object.keys(styles)[0]`
Glyphvalidator	وظيفة للتحقق من أن الرسول الرسمية متاحة للنمط المختار. لديها `name` `style` كمعلمات ، بهذا الترتيب. إرجاع `true` إذا كانت الرسول الرسمية صالحة أو `false` إذا لم يكن كذلك.	`(name, style) => true`

iOS

عليك أن تشرح يدويًا مرجعًا لـ .ttf الخاص بك على مجلد Resources XcodeProj وفي Info.plist .

الرسوم المتحركة

React Native يأتي مع مكتبة الرسوم المتحركة مذهلة تسمى Animated . لاستخدامه مع أيقونة ، ما عليك سوى إنشاء مكون متحرك مع هذا السطر: const AnimatedIcon = Animated.createAnimatedComponent(Icon) . يمكنك أيضًا استخدام مكتبة الرسوم المتحركة ذات المستوى الأعلى.

أمثلة الاستخدام

Iconexplorer

جرب مشروع IconExplorer في مجلد Examples/IconExplorer ، هناك يمكنك أيضًا البحث عن أي رمز.

مثال أساسي

 import Icon from 'react-native-vector-icons/Ionicons' ;

function ExampleView ( props ) {
  return < Icon name = "ios-person" size = { 30 } color = "#4F8EF7" / > ;
}

Tabbar

نظرًا لأن TabBarIOS تمت إزالة من Core لصالح @React-Navigation/Tabs السفلية ، فقد تمت إزالته أيضًا كمكون راحة من هذه المكتبة. ما عليك سوى استخدام Icon بدلاً من ذلك ، ولكن لا تنس استيراد هذا المشروع وربطه كما هو موضح أعلاه أولاً.

فيما يلي مثال مأخوذ من react-navigation :

 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs' ;
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons' ;

const Tab = createBottomTabNavigator ( ) ;

function MyTabs ( ) {
  return (
    < Tab . Navigator
      initialRouteName = "Feed"
      screenOptions = { {
        activeTintColor : '#e91e63' ,
      } }
    >
      < Tab . Screen
        name = "Feed"
        component = { Feed }
        options = { {
          tabBarLabel : 'Home' ,
          tabBarIcon : ( { color , size } ) => (
            < MaterialCommunityIcons name = "home" color = { color } size = { size } / >
          ) ,
        } }
      / >
      < Tab . Screen
        name = "Notifications"
        component = { Notifications }
        options = { {
          tabBarLabel : 'Updates' ,
          tabBarIcon : ( { color , size } ) => (
            < MaterialCommunityIcons name = "bell" color = { color } size = { size } / >
          ) ,
          tabBarBadge : 3 ,
        } }
      / >
      < Tab . Screen
        name = "Profile"
        component = { Profile }
        options = { {
          tabBarLabel : 'Profile' ,
          tabBarIcon : ( { color , size } ) => (
            < MaterialCommunityIcons name = "account" color = { color } size = { size } / >
          ) ,
        } }
      / >
    < / Tab . Navigator >
  ) ;
}

أدوات شريط الأدوات

منذ إزالة ToolbarAndroid من Core ، تتم إزالته أيضًا كمكون راحة من هذه المكتبة. ما عليك سوى استخدام getImageSourceSync بدلاً من ذلك ، ولكن لا تنس استيراد هذا المشروع وربطه كما هو موضح أعلاه أولاً.

 import ToolbarAndroid from '@react-native-community/toolbar-android' ;
import Icon from 'react-native-vector-icons/Ionicons' ;

const navIcon = Icon . getImageSourceSync ( 'md-arrow-back' , 24 , 'white' ) ;
const overflowIcon = Icon . getImageSourceSync ( 'md-more' , 24 , 'white' ) ;
const settingsIcon = Icon . getImageSourceSync ( 'md-settings' , 30 , 'white' ) ;
const twitterIcon = Icon . getImageSourceSync ( 'logo-twitter' , 25 , '#4099FF' ) ;

function ToolbarView ( props ) {
  return (
    < ToolbarAndroid
      title = "Home"
      titleColor = "white"
      navIcon = { navIcon }
      onIconClicked = { props . navigator . pop }
      actions = { [
        {
          title : 'Settings' ,
          icon : settingsIcon ,
          show : 'always' ,
        } ,
        {
          title : 'Follow me on Twitter' ,
          icon : twitterIcon ,
          show : 'ifRoom' ,
        } ,
      ] }
      overflowIcon = { overflowIcon }
    / >
  ) ;
}

أيقونات مضمنة

 import { Text } from 'react-native' ;
import Icon from 'react-native-vector-icons/Ionicons' ;

function ExampleView ( props ) {
  return (
    < Text >
      Lorem < Icon name = "ios-book" color = "#4F8EF7" / > Ipsum
    < / Text >
  ) ;
}

توليد مجموعة الرمز الخاصة بك من ملف CSS

إذا كان لديك بالفعل خط أيقونة مع ملف CSS المرتبط ، فيمكنك بسهولة إنشاء رمز مع برنامج generate-icon .

مثال الاستخدام:

 ./node_modules/.bin/generate-icon path/to/styles.css --componentName=MyIcon --fontFamily=myicon > Components/MyIcon.js

خيارات

سيتم نقل أي أعلام غير مدرجة أدناه ، مثل --componentName و --fontFamily ، إلى القالب.

`-p` ، `--prefix`

بادئة محدد CSS [افتراضي: ".icon-"]

`-t` ، `--template`

قالب في تنسيق سلسلة قالب JS [الافتراضي: "./template/iconset.tpl"]

للحصول على القالب الافتراضي ، يرجى تقديم --componentName و --fontFamily .

`-o` ، `--output`

احفظ الإخراج للملف ، والافتراضات الافتراضية إلى stdout

Changelog

استكشاف الأخطاء وإصلاحها

تظهر الرموز كمربع متقاطع على Android

تأكد من نسخ الخط إلى android/app/src/main/assets/fonts .
احذف مجلد الإنشاء باستخدام rm -rf android/app/build .
إعادة ترجمة المشروع.

شاشة حمراء مع خطأ "عائلة الخط غير المعترف بها" على iOS

تأكد من إضافة مرجع يدويًا لـ .ttf على مجلد Resources XcodeProj.
تحقق من أن الخط الذي تحاول استخدامه يظهر في Info.plist ، إذا قمت بإضافة المجلد بأكمله وأنه أزرق اللون ، فأنت بحاجة إلى إضافته إلى المسار.
تحقق من نسخ الخط في موارد حزمة النسخ في مراحل البناء .
حذف مجلد الإنشاء باستخدام rm -rf ios/build
إعادة ترجمة المشروع.

فشل بناء Android على Windows دون سبب وجيه

تميل كل من التسلسلات الهرمية لملف NPM و Android إلى أن تصبح عميقة للغاية وأسوأ عند الجمع بينهما. نظرًا لأن نظام ملفات Windows يحتوي على طول أقصى طول ، فإن عناوين اسم الملف الطويلة ستؤدي إلى العديد من الأخطاء بما في ذلك Execution failed for task ':react-native-vector-icons:processReleaseResources' لذا حاول أن تبقي المسار إلى مجلد المشروع الخاص بك أقصر قدر الإمكان.

يتم عرض أيقونات خاطئة بعد ترقية هذه الحزمة

ربما لم تقم بتحديث ملفات الخط المرتبطة بمشروعك الأصلي بعد الترقية. ومع ذلك ، لا ينطبق هذا فقط على أهداف Android نظرًا لأن iOS يحدد الخطوط عند إنشاء التطبيق (حاول تنظيف البناء من Xcode في حالة وجود المشكلة). على Android ، يمكنك إعادة ربط المشروع أو تقوم بتحديث الخطوط يدويًا. لجعلهم مزامنة تلقائيًا ، استخدم نهج Gradle.

بعض الرموز مفقودة بعد ترقية هذه الحزمة

في بعض الأحيان يقرر البائعون إزالة بعض الرموز من الإصدارات الأحدث ، وهذا لا علاقة له بهذه الحزمة. إذا كنت تعتمد على إصدار أقدم من الخط ، فيمكنك إضافته كخط مخصص.

غير قادر على حل الوحدة النمطية @expo/vector-icons/xxxfont

ربما تحاول استخدام @expo/vector-icons و react-native-vector-icons في نفس الوقت. حزمة المعرض الاسم المستعارة هذا واحد وسوف لها الأسبقية. استخدم واحدة فقط من هذه المكتبات في مشروعك.

تشكو حزمة الويب من بناء جملة JSX غير المدعوم

ستحتاج إلى إضافة دعم JSX لـ react-native-vector-icons إلى تكوين Transpiler على سبيل المثال.

على سبيل المثال ، لإضافة react-native-vector-icons إلى قائمة الوحدات النمطية التي تدعم JSX (إذا كنت تستخدم WebPack) ، فقد تحتاج إلى إضافة المسار النسبي إلى react-native-vector-icons في قسم تشمل تكوين JSX الخاص بك.

قد يبدو هذا مثل ما يلي إذا كنت تستخدم Babel في WebPack:

 // Process application JS with Babel.
 // The preset includes JSX, Flow, TypeScript, and some ESnext features.
 {
   test: /.(js|mjs|jsx|ts|tsx)$/,
   include: [
     paths.appSrc,
+    // START - support for JSX in react-native-vector-icons
+    path.resolve(
+      __dirname,
+      // modify this path to be relative to you webpack config,
+      // "../node_modules/react-native-vector-icons", // <- most common
+      "../../../node_modules/react-native-vector-icons", // <- if using workspaces
+    ),
+    // END - support got react-native-vector-icons
   ],
   loader: require.resolve("babel-loader"),

رخصة

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

أي خطوط مجمعة هي حقوق الطبع والنشر لمؤلفيها ومعظمها تحت معهد ماساتشوستس للتكنولوجيا أو SIL OFL.

يوسع

react native vector icons

رد فعل أيقونات المتجهات الأصلية

جدول المحتويات

الرعاية

مجموعات الأيقونة المجمعة

تثبيت

إعداد iOS

إعداد Android

الخيار: مع Gradle (موصى به)

الخيار: التكامل اليدوي

دمج المكتبة لدعم getImageSource

إعداد MacOS

إعداد Windows

رد الفعل على web

إعداد الويب

الترقية

مكون Icon

ملكيات

طرق ثابتة

التصميم

Icon.Button

ملكيات

الاستخدام ككائن صورة/مصدر PNG

خطوط متعددة الطراز

طرق ثابتة

عناصر

الخطوط المخصصة

createIconSet(glyphMap, fontFamily[, fontFile])

createIconSetFromFontello(config[, fontFamily[, fontFile]])

createIconSetFromIcoMoon(config[, fontFamily[, fontFile]])

createMultiStyleIconSet(styles [, options])

iOS

الرسوم المتحركة

أمثلة الاستخدام

Iconexplorer

مثال أساسي

Tabbar

أدوات شريط الأدوات

أيقونات مضمنة

توليد مجموعة الرمز الخاصة بك من ملف CSS

مثال الاستخدام:

خيارات

-p ، --prefix

-t ، --template

-o ، --output

Changelog

استكشاف الأخطاء وإصلاحها

تظهر الرموز كمربع متقاطع على Android

شاشة حمراء مع خطأ "عائلة الخط غير المعترف بها" على iOS

فشل بناء Android على Windows دون سبب وجيه

يتم عرض أيقونات خاطئة بعد ترقية هذه الحزمة

بعض الرموز مفقودة بعد ترقية هذه الحزمة

غير قادر على حل الوحدة النمطية @expo/vector-icons/xxxfont

تشكو حزمة الويب من بناء جملة JSX غير المدعوم

رخصة

دمج المكتبة لدعم `getImageSource`

مكون `Icon`

`Icon.Button`

`createIconSet(glyphMap, fontFamily[, fontFile])`

`createIconSetFromFontello(config[, fontFamily[, fontFile]])`

`createIconSetFromIcoMoon(config[, fontFamily[, fontFile]])`

`createMultiStyleIconSet(styles [, options])`

`-p` ، `--prefix`

`-t` ، `--template`

`-o` ، `--output`