Beranda>Terkait pemrograman>Kode sumber lainnya
Unduh

Bereaksi ikon vektor asli

Tinggikan aplikasi asli React Anda dengan kekuatan ikon vektor yang dapat disesuaikan. Ideal untuk tombol yang menghiasi, logo, dan navigasi atau bilah tab, ikon -ikon ini dengan mulus berintegrasi ke dalam proyek Anda. Fleksibilitas mereka membuat ekstensi dan penataan gaya.

Untuk integrasi file .svg secara asli, Anda dapat mengeksplorasi react-native-vector-image .

Tip

Versi baru RNVI akan segera hadir. Ini memiliki hampir setup konfigurasi nol. Umpan balik selamat datang, silakan coba di cabang Monorepo

Daftar isi

  • Set ikon yang dibundel
  • Instalasi
    • Pengaturan iOS
    • Pengaturan Android
    • Pengaturan MacOS
    • Pengaturan Windows
    • Pengaturan React-Native-Web
    • Pengaturan Web
  • Perbaikan
  • Komponen ikon
  • ICON.BUTTON KOMPONEN
  • Penggunaan sebagai objek gambar/sumber PNG
  • Font multi-gaya
  • Font Kustom
  • Animasi
  • Contoh penggunaan
  • Tabbar
  • Menghasilkan Ikon Anda Sendiri dari File CSS
  • Changelog
  • Pemecahan masalah
  • Lisensi

Sponsor

Jika Anda menemukan perpustakaan ini bermanfaat, silakan renungkan opsi sponsor. Upaya kami yang dibayangkan mencakup restrukturisasi repositori menjadi arsitektur monorepo. Transisi ini akan memberdayakan versi independen set ikon, meningkatkan kinerja, mengurangi ukuran bundel, dan menyederhanakan kontribusi komunitas. Sponsor Anda memainkan peran penting dalam mewujudkan kemajuan ini.

Set ikon yang dibundel

Jelajahi semua ikon.

  • AntDesign dari Antfinance ( 298 Ikon)
  • Entypo oleh Daniel Bruce (v1.0.1 dengan 411 ikon)
  • EvilIcons yang dirancang oleh Alexander Madyankin & Roman Shamin (v1.10.1 dengan 70 ikon)
  • Feather yang dibuat oleh Cole Bemis & Kontributor (v4.28.0 menampilkan 286 ikon)
  • FontAwesome oleh Dave Gandy (v4.7.0 yang berisi 675 ikon)
  • FontAwesome 5 dari Fonticons, Inc. (v5.15.3 Menawarkan 1598 Ikon Gratis dan 7848 Pro)
  • FontAwesome 6 Dirancang oleh Fonticons, Inc. (v6.6.0 Menampilkan Ikon Gratis 2016 dan 16150 Pro)
  • Fontisto Dibuat oleh Kenan Gündoğan (v3.0.4 Menampilkan 615 Ikon)
  • Foundation By Zurb, Inc. (v3.0 dengan 283 ikon)
  • Ionicons dibuat oleh ionik (v7.1.0 yang berisi 1338 ikon)
  • MaterialIcons oleh Google, Inc. (v4.0.0 menampilkan 2189 ikon)
  • MaterialCommunityIcons dari MaterialDesignicons.com (v6.5.95 termasuk 6596 ikon)
  • Octicons Dirancang oleh Github, Inc. (v16.3.1 dengan 250 ikon)
  • Zocial oleh Sam Collins (v1.4.0 dengan 100 ikon)
  • SimpleLineIcons Dibuat oleh Sabbir & Kontributor (v2.5.5 dengan 189 ikon)

Instalasi

  1. Instal paket melalui NPM: 
    npm install --save react-native-vector-icons
  2. Bergantung pada platform yang Anda targetkan (iOS/android/windows), ikuti instruksi pengaturan yang sesuai.
  3. Jika Anda berencana menggunakan ikon Fontawesome 5 atau 6, lihat panduan ini: Fontawesome 5 | Fontawesome 6

Pengaturan iOS

Untuk menggunakan ikon yang dibundel di iOS, lakukan langkah berikut:

  • Jalankan npx pod-install di direktori iOS

  • Edit Info.plist dan tambahkan properti yang disebut font yang disediakan oleh aplikasi (atau UiAppFonts jika Xcode AutoComplete tidak berfungsi):

    • Daftar semua font yang tersedia untuk menyalin & menempel di 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 >

    Langkah di atas mungkin terlihat seperti ini:

CATATAN: Kompilasi ulang proyek Anda setelah menambahkan atau menghapus font.

Pengaturan Android

Opsi: dengan lulusan (disarankan)

Untuk membuat manajemen font lebih halus di Android, gunakan metode ini:

  • Edit android/app/build.gradle (bukan android/build.gradle ) dan tambahkan: 

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

    Untuk menyesuaikan font yang disalin, gunakan: 

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

apply from : file( " ../../node_modules/react-native-vector-icons/fonts.gradle " )
Konfigurasi Monorepo
Jika bekerja di monorepo, arahkan ke jalur yang benar dari skrip `fonts.gradle` dan file font, relatif terhadap file android/app/build.gradle. Struktur contoh: 
 your-monorepo/
├─ node_modules/
│  ├─ react-native-vector-icons
├─ apps/
│  ├─ YourApp/
│  │  ├─ android/
│  │  │  ├─ app/
│  │  │  │  ├─ build.gradle

Perbarui jalur seperti: 

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

️ Masalah yang dilaporkan telah muncul ketika menggunakan versi RNVI lebih awal dari 9.0.0 dalam konteks monorepo. Oleh karena itu, disarankan untuk memastikan versi RNVI Anda adalah 9.0.0 atau lebih baru.

Opsi: Integrasi manual

Untuk mengintegrasikan perpustakaan secara manual, ikuti langkah -langkah ini:

  • Salin konten dari folder Fonts dan tempel ke android/app/src/main/assets/fonts (pastikan nama foldernya huruf kecil, yaitu, fonts ).

Mengintegrasikan Perpustakaan Untuk Dukungan getImageSource

Langkah -langkah berikut adalah opsional dan hanya diperlukan jika Anda bermaksud memanfaatkan Icon.getImageSource Function.

  • Edit file android/settings.gradle seperti yang ditunjukkan di bawah ini: 

    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')

  • Edit android/app/build.gradle (terletak di folder aplikasi ) seperti yang ditunjukkan di bawah ini: 

    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')
}

  • Edit MainApplication.java Anda (terletak jauh di dalam android/app/src/main/java/... ) seperti yang ditunjukkan di bawah ini (perhatikan bahwa ada two tempat untuk diedit): 

    package com.myapp;

+ import com.oblador.vectoricons.VectorIconsPackage;

....

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

Harap dicatat bahwa langkah opsional ini hanya diperlukan jika aplikasi reaksi-asli Anda tidak mendukung ikatan otomatis ; Jika tidak, Anda dapat melewatkan ini.

Pengaturan MacOS

melalui react-native-macos

Untuk mengatur perpustakaan pada proyek macOS Anda menggunakan react-native-macos , ikuti langkah-langkah ini:

  1. Jelajahi ke folder node_modules/react-native-vector-icons dan seret folder Fonts ke dalam proyek Anda di xcode. Pastikan aplikasi Anda diperiksa di bawah "Tambahkan ke target," dan pilih "Buat referensi folder" saat diminta.

  2. Edit Info.plist Anda. Plist dan sertakan properti baru bernama Application Fonts Resource Path (atau ATSApplicationFontsPath jika Xcode's AutoComplete tidak berfungsi atau Anda tidak menggunakan XCODE). Atur nilai properti ini ke Fonts .

  3. Dari folder proyek /ios Anda yang dijalankan: 

bundle exec pod install

Harap dicatat bahwa setelah menambahkan font baru, Anda perlu mengkompati ulang proyek Anda. Juga, pastikan bahwa folder Fonts hadir di bawah bagian Copy Bundle Resources di dalam fase build dari proyek XCODE Anda.

Langkah-langkah ini akan secara efektif mengintegrasikan pustaka Ikon Vektor ke dalam proyek macOS Anda sambil memanfaatkan kerangka kerja react-native-macos .

Pengaturan Windows

melalui react-native-windows

Untuk mengatur perpustakaan di proyek Windows Anda menggunakan react-native-windows , ikuti langkah-langkah ini:

  1. Dalam proyek tingkat atas ( /windows/project-name/Assets ), salin dan tempel file font.

  2. Buka solusi Anda di Visual Studio:

    A. Klik kanan folder aset dalam solusi Anda. B. Pilih Tambah> Item yang ada . C. Jelajahi dan pilih font yang Anda salin ke /windows/project-name/assets . D. Klik Tambah .

Harap dicatat bahwa setelah menambahkan font baru, Anda perlu mengkompati ulang proyek Anda.

Dengan mengikuti langkah-langkah ini, Anda akan mengintegrasikan perpustakaan Ikon Vektor dengan mulus ke dalam proyek Windows Anda, memanfaatkan kerangka kerja react-native-windows .

Pengaturan React-Native-Web

Untuk port aplikasi seluler reaksi-asli ke web menggunakan react-native-web Anda hanya perlu memastikan font diketahui di sisi aplikasi web.

Anda perlu menambahkan font-family untuk setiap font yang Anda gunakan ke CSS Anda

Anda dapat men-debug keluarga font yang hilang dengan melihat di konsol pengembang di browser web Anda saat men-debug aplikasi web Anda.

Catatan: Jika Anda menggunakan Webpack atau serupa, Anda mungkin perlu mengkonfigurasi webpack untuk menangani pemuatan font TTF, menggunakan URL-Loader atau File-Loader. Lihat Pengaturan Web untuk detail lebih lanjut.

Di App.css Anda atau serupa tambahkan spesifikasi font-family: 

 @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 */

Pengaturan Web

Untuk mengintegrasikan perpustakaan dengan proyek web Anda menggunakan Webpack, ikuti langkah -langkah ini:

  1. Di file konfigurasi webpack Anda, tambahkan bagian untuk menangani file TTF menggunakan url-loader atau file-loader : 

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

  2. Di titik masuk JavaScript Anda, konsumsi file font dan suntikkan tag gaya yang diperlukan: 

      // 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 ) ;

Dengan mengikuti langkah -langkah ini, Anda akan mengintegrasikan perpustakaan Ikon Vektor dengan mulus ke dalam proyek web Anda menggunakan Webpack, memungkinkan Anda untuk dengan mudah menggunakan ikon dalam aplikasi web Anda.

Perbaikan

Meningkatkan paket ini seringkali membutuhkan file font yang ditautkan ke proyek Anda untuk diperbarui juga. Jika tautan otomatis berfungsi untuk Anda, menjalankan ini lagi harus memperbarui font. Kalau tidak, Anda harus mengikuti langkah -langkah yang diuraikan di bagian instalasi.

Komponen Icon

Anda dapat menggunakan salah satu ikon yang dibundel di atas atau menggulung font khusus Anda sendiri. 

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

Properti

Properti teks apa pun dan berikut ini:

Menopang Keterangan Bawaan
size Ukuran ikon, juga dapat dilewatkan sebagai fontSize dalam objek gaya. 12
name Ikon apa yang harus ditampilkan, lihat aplikasi Icon Explorer atau salah satu tautan di atas. Tidak ada
color Warna ikon. Diwariskan

Metode statis

Menopang Keterangan
getFontFamily Mengembalikan keluarga font yang saat ini digunakan untuk mengambil ikon sebagai teks. Penggunaan: const fontFamily = Icon.getFontFamily()
getImageSource Mengembalikan janji bahwa penyelesaian ke sumber ikon versi bitmap untuk digunakan dengan Image komponen et al. Penggunaan: const source = await Icon.getImageSource(name, size, color)
getImageSourceSync Sama seperti getImageSource tetapi sinkron. Penggunaan: const source = Icon.getImageSourceSync(name, size, color)
getRawGlyphMap Mengembalikan peta mesin terbang mentah dari set ikon. Penggunaan: const glyphMap = Icon.getRawGlyphMap()
hasIcon Periksa apakah namanya valid dalam set ikon saat ini. Penggunaan: const isNameValid = Icon.hasIcon(name)

Gaya

Karena Icon dibangun di atas komponen Text , sebagian besar properti gaya akan berfungsi seperti yang diharapkan, Anda mungkin merasa berguna untuk bermain -main dengan ini:

  • backgroundColor
  • borderWidth
  • borderColor
  • borderRadius
  • padding
  • margin
  • color
  • fontSize

Catatan: Pada Text Android saat ini tidak mendukung gaya border* , untuk menghindari ini cukup membungkus Icon Anda dengan View .

Dengan menggabungkan beberapa di antaranya yang dapat Anda buat misalnya:

Icon.Button KOMPONEN

Komponen kenyamanan untuk membuat tombol dengan ikon di sisi kiri. 

 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 >
) ;

Properti

Text apa pun, TouchableHighlight atau TouchableWithoutFeedback Properti di samping ini:

Menopang Keterangan Bawaan
color Teks dan Ikon Warna, Gunakan iconStyle atau Nest Komponen Text Jika Anda membutuhkan warna yang berbeda. white
size Ukuran ikon. 20
iconStyle Gaya diterapkan pada ikon saja, bagus untuk mengatur margin atau warna yang berbeda. Catatan: Gunakan iconStyle untuk margin atau mengharapkan perilaku yang tidak stabil. {marginRight: 10}
backgroundColor Warna latar belakang tombol. #007AFF
borderRadius Radius perbatasan tombol, diatur ke 0 untuk menonaktifkan. 5
onPress Fungsi yang dipanggil saat tombol ditekan. Tidak ada

Penggunaan sebagai objek gambar/sumber PNG

Cara yang nyaman untuk memasukkannya ke dalam komponen lain yang mengandalkan gambar bitmap daripada ikon vektor yang dapat diskalakan. Mengambil name , size , dan color argumen seperti dijelaskan di atas. 

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

Atau Anda dapat menggunakan Icon.getImageSourceSync metode sinkron. GetImageSourcesync untuk menghindari gangguan. Perlu diingat bahwa metode ini memblokir dan mungkin menimbulkan penalti kinerja. Namun, panggilan selanjutnya akan menggunakan cache.

Font multi-gaya

Beberapa font saat ini menggunakan beberapa gaya, Fontawesome 5 misalnya, yang didukung oleh perpustakaan ini. Penggunaannya hampir sama dengan komponen Icon standar: 

 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

Metode statis

Semua metode statis dari Icon didukung oleh font multi-gaya.

Menopang Keterangan
getFontFamily Mengembalikan keluarga font yang saat ini digunakan untuk mengambil ikon sebagai teks. Penggunaan: const fontFamily = Icon.getFontFamily(style)
getImageSource Mengembalikan janji bahwa penyelesaian ke sumber ikon versi bitmap untuk digunakan dengan Image komponen et al. Penggunaan: const source = await Icon.getImageSource(name, size, color)
getImageSourceSync Sama seperti getImageSource tetapi sinkron. Penggunaan: const source = Icon.getImageSourceSync(name, size, color)
getRawGlyphMap Mengembalikan peta mesin terbang mentah dari set ikon. Penggunaan: const glyphMap = Icon.getRawGlyphMap(style)
hasIcon Periksa apakah namanya valid dalam set ikon saat ini. Penggunaan: const isNameValid = Icon.hasIcon(name, style)
getStyledIconSet Gunakan ini untuk mendapatkan komponen Icon untuk satu gaya. Penggunaan. const StyledIcon = Icon.getStyledIconSet(style)

Jika tidak ada argumen gaya yang dilewati (atau jika tidak valid) metode akan default ke fallback yang telah ditentukan sebelumnya.

Komponen

Icon.Button didukung, penggunaan seperti Icon : 

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

Font Kustom

createIconSet(glyphMap, fontFamily[, fontFile])

Mengembalikan font khusus Anda sendiri berdasarkan glyphMap di mana kunci adalah nama ikon dan nilainya adalah karakter UTF-8 atau kode karakternya. fontFamily adalah nama font bukan nama file. Buka font in font book.app atau serupa untuk mempelajari namanya. Secara opsional lulus argumen fontFile ketiga untuk dukungan Android, itu harus menjadi nama file font khusus. 

 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]])

Metode kenyamanan untuk membuat font khusus berdasarkan file konfigurasi fontello. Jangan lupa untuk mengimpor font seperti yang dijelaskan di atas dan lepaskan config.json di suatu tempat yang nyaman dalam proyek Anda. 

 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'
) ;

Pastikan Anda menggunakan opsi unduhan di Icomoon, dan gunakan file .json yang termasuk dalam .zip yang Anda unduh. Anda juga harus mengimpor file font .ttf ke dalam proyek Anda, mengikuti instruksi di atas.

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 / >
pilihan Keterangan bawaan
DefaultStyle Nama gaya yang akan digunakan jika tidak ada gaya yang disediakan selama rendering. Object.keys(styles)[0]
Fallbackfamily Fungsi untuk memilih keluarga jika mesin terbang tidak tersedia. Fungsi harus menerima name mesin terbang sebagai parameter. Mengembalikan nama jika keluarga. (name) => Object.keys(styles)[0]
Glyphvalidator Fungsi untuk memvalidasi bahwa mesin terbang tersedia untuk gaya yang dipilih. Ini memiliki name dan style sebagai parameter, dalam urutan itu. Mengembalikan true jika mesin terbang valid atau false jika tidak. (name, style) => true

iOS

Anda harus secara manual membuat referensi .ttf Anda di folder XCODEPROJ Resources dan di Info.plist .

Animasi

React Native dilengkapi dengan perpustakaan animasi yang luar biasa yang disebut Animated . Untuk menggunakannya dengan ikon, cukup buat komponen animasi dengan baris ini: const AnimatedIcon = Animated.createAnimatedComponent(Icon) . Anda juga dapat menggunakan perpustakaan animasi tingkat tinggi React-asli-animatable.

Contoh penggunaan

Iconexplorer

Coba proyek IconExplorer di folder Examples/IconExplorer , di sana Anda juga dapat mencari ikon apa pun.

Contoh Dasar 

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

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

Tabbar

Karena TabBarIOS dihapus dari inti demi @react-navigasi/tab bawah, itu juga dihapus sebagai komponen kenyamanan dari perpustakaan ini. Cukup gunakan Icon sebagai gantinya, tetapi jangan lupa untuk mengimpor dan menautkan ke proyek ini seperti yang dijelaskan di atas terlebih dahulu.

Di bawah ini adalah contoh yang diambil dari 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

Karena ToolbarAndroid dihapus dari Core, ia juga dihapus sebagai komponen kenyamanan dari perpustakaan ini. Cukup gunakan getImageSourceSync sebagai gantinya, tetapi jangan lupa untuk mengimpor dan menautkan ke proyek ini seperti dijelaskan di atas terlebih dahulu. 

 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 }
    / >
  ) ;
}

Ikon inline 

 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 >
  ) ;
}

Menghasilkan Ikon Anda Sendiri dari File CSS

Jika Anda sudah memiliki ikon font dengan file CSS terkait maka Anda dapat dengan mudah menghasilkan set ikon dengan skrip generate-icon .

Contoh Penggunaan: 

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

Opsi

Bendera apa pun yang tidak tercantum di bawah ini, seperti --componentName dan --fontFamily , akan diteruskan ke templat.

-p , --prefix

Awalan pemilih CSS [default: ".icon-"]

-t , --template

Template dalam format string template js [default: "./template/iconset.tpl"]

Untuk template default, berikan --componentName dan --fontFamily .

-o , --output

Simpan output ke file, default ke stdout

Changelog

Pemecahan masalah

Ikon muncul sebagai kotak lintasan di Android

  • Pastikan Anda telah menyalin font ke android/app/src/main/assets/fonts .
  • Hapus folder build dengan rm -rf android/app/build .
  • Kompilasi ulang proyek.

Layar Merah dengan kesalahan "Keluarga Font yang Tidak Diketahui" di iOS

  • Pastikan Anda telah menambahkan secara manual referensi .ttf Anda di folder XCODEPROJ Resources Anda.
  • Periksa apakah font yang Anda coba gunakan muncul di Info.plist , jika Anda telah menambahkan seluruh folder dan warnanya biru, maka Anda perlu menambahkannya ke jalur.
  • Periksa bahwa font disalin dalam Sumber Sumber Daya Salin dalam Fase Build .
  • Hapus folder build dengan rm -rf ios/build
  • Kompilasi ulang proyek.

Android Build gagal di windows tanpa alasan yang bagus

Hirarki file NPM dan Android cenderung menjadi sangat dalam dan bahkan lebih buruk ketika Anda menggabungkannya. Karena Sistem File Windows memiliki panjang maksimal, alamat nama file panjang akan menghasilkan banyak kesalahan termasuk Execution failed for task ':react-native-vector-icons:processReleaseResources' . Jadi cobalah untuk menjaga jalur ke folder proyek Anda sesingkat mungkin.

Ikon yang salah ditampilkan setelah meningkatkan paket ini

Anda mungkin tidak memperbarui file font yang terhubung ke proyek asli Anda setelah meningkatkan. Namun, ini hanya berlaku untuk target Android karena iOS menggabungkan font saat membangun aplikasi (cobalah untuk membersihkan build Anda dari Xcode jika ada masalah). Di Android Anda dapat menghubungkan proyek atau Anda memperbarui font secara manual. Untuk menyinkronkan mereka secara otomatis, gunakan pendekatan Gradle.

Beberapa ikon hilang setelah meningkatkan paket ini

Terkadang vendor memutuskan untuk menghapus beberapa ikon dari rilis yang lebih baru, ini tidak ada hubungannya dengan paket ini. Jika Anda bergantung pada versi yang lebih lama dari font, Anda dapat menambahkannya sebagai font khusus.

Tidak dapat menyelesaikan modul @expo/vector-icons/xxxfont

Anda mungkin mencoba menggunakan @expo/vector-icons dan react-native-vector-icons secara bersamaan. Paket Expo alias yang satu ini dan akan diutamakan. Gunakan hanya satu dari perpustakaan ini di proyek Anda.

Web-pack mengeluh tentang sintaks JSX yang tidak didukung

Anda perlu menambahkan dukungan JSX untuk react-native-vector-icons ke konfigurasi transpiler Anda misalnya Babel.

Misalnya, untuk menambahkan react-native-vector-icons ke daftar modul yang mendukung JSX (jika menggunakan webpack) Anda mungkin perlu menambahkan jalur relatif ke react-native-vector-icons di bagian termasuk konfigurasi JSX Anda.

Ini mungkin terlihat seperti berikut jika Anda menggunakan Babel di 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"),

Lisensi

Proyek ini dilisensikan di bawah lisensi MIT.

Font yang dibundel adalah hak cipta untuk penulisnya masing -masing dan sebagian besar di bawah MIT atau SIL OFL.

Memperluas
Informasi Tambahan
Aplikasi Terkait
Direkomendasikan untuk Anda
Informasi Terkait Semua