react native vector icons
10.2.0
用可自定義的向量圖標的功能提升本機應用程序。這些圖標非常適合點綴按鈕，徽標和導航或標籤欄，可以無縫集成到您的項目中。它們的多功能性使擴展和造型毫不費力。
對於本地集成.svg文件，您可以探索react-native-vector-image 。
提示
RNVI的新版本即將推出。它的配置設置幾乎為零。歡迎反饋，請在Monorepo分支上嘗試
如果您發現這個圖書館有益，請考慮贊助的選擇。我們設想的努力涵蓋了將存儲庫重組為MonorePo架構。這種過渡將授權圖標集的獨立版本控制，提高性能，降低捆綁量並簡化社區貢獻。您的讚助在實現這些進步方面起著關鍵作用。
探索所有圖標。
AntDesign （ 298個圖標）Entypo （v1.0.1帶有411個圖標）EvilIcons （v1.10.1與70個圖標）Feather （v4.28.0具有286個圖標）FontAwesome （v4.7.0包含675個圖標）FontAwesome 5來自Fonticons，Inc。（v5.15.3提供1598免費和7848 Pro Icons）FontAwesome 6由Fonticons，Inc。設計（v6.6.0以2016年免費和16150 Pro Icons為特色）Fontisto由KenanGündoğan創建（v3.0.4具有615個圖標）Foundation （帶有283個圖標的v3.0）Ionicons （v7.1.0包含1338個圖標）MaterialIcons （v4.0.0具有2189個圖標）MaterialCommunityIcons （包括6596個圖標）Octicons （v16.3.1具有250個圖標）Zocial （v1.4.0，帶有100個圖標）SimpleLineIcons （帶有189個圖標的v2.5.5） npm install --save react-native-vector-icons要使用iOS上的捆綁圖標，請執行以下步驟：
在iOS目錄中運行npx pod-install
編輯Info.plist並添加應用程序提供的名為字體的屬性（如果Xcode Autococtey不起作用，則為UIAPPFONTS ）：
< 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上更順暢，請使用此方法：
編輯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 " )
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要手動整合庫，請按照以下步驟：
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 （位於App文件夾中），如下所示：
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')
}如下所示（請注意，有two android/app/src/main/java/...可以MainApplication.java ）：
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項目上設置庫，請按照以下步驟：
瀏覽到node_modules/react-native-vector-icons文件夾，然後將Fonts文件夾拖到XCode的項目中。確保在“添加到目標”下檢查您的應用程序，並在提示時選擇“創建文件夾參考”。
編輯您的Info.plist ，並包括一個名為“應用程序” fonts資源路徑的新屬性（如果xcode的自動完成不運行或您不使用Xcode），請使用ATSApplicationFontsPath 。將此屬性的值設置為Fonts 。
從您的項目/ios文件夾中運行：
bundle exec pod install請注意，添加新字體後，您需要重新編譯項目。另外，請確保在Xcode項目的構建階段的“複製捆綁包資源”部分下存在Fonts夾。
這些步驟將有效地將矢量圖標庫集成到您的MacOS項目中，同時使用react-native-macos框架。
通過react-native-windows
要使用react-native-windows在Windows項目上設置庫，請按照以下步驟：
在頂級項目（ /windows/project-name/Assets ）中，複製並粘貼字體文件。
在Visual Studio中打開解決方案：
一個。右鍵單擊解決方案中的資產文件夾。 b。選擇添加>現有項目。 c。瀏覽並選擇您複製到/windows/project-name/assets的字體。 d。單擊添加。
請注意，添加新字體後，您需要重新編譯項目。
通過遵循以下步驟，您將無縫將矢量圖標庫集成到Windows項目中，利用react-native-windows框架。
要使用React- react-native-web Native移動應用程序移植到Web上，您只需要確保字體在Web應用程序側已知。
您將需要為您使用的每種字體添加字體 - 家庭
調試Web應用程序時，您可以通過在Web瀏覽器中的開發人員控制台中查看丟失字體 - 家庭。
注意：如果您使用的是WebPack或類似產品，則可能需要使用URL-LOADER或FILE-LOADER配置WebPack來處理TTF字體的加載。有關更多詳細信息，請參見Web設置。
在您的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將庫與您的Web項目集成，請按照以下步驟：
在您的WebPack配置文件中，添加一個部分使用url-loader或file-loader來處理TTF文件：
{
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 ) ;通過遵循以下步驟，您將使用WebPack無縫將矢量圖標庫集成到您的Web項目中，從而使您能夠輕鬆地使用Web應用程序中的圖標。
升級此軟件包通常也需要鏈接到項目的字體文件也需要更新。如果自動鏈接適合您，則再次運行該字體應更新字體。否則，您需要按照安裝部分中概述的步驟進行操作。
Icon組件您可以使用上面的捆綁圖標之一，也可以滾動自己的自定義字體。
import Icon from 'react-native-vector-icons/FontAwesome' ;
const myIcon = < Icon name = "rocket" size = { 30 } color = "#900" / > ;任何文本屬性及以下內容：
| 支柱 | 描述 | 預設 |
|---|---|---|
size | 圖標的大小也可以隨著樣式對象的fontSize而傳遞。 | 12 |
name | 要顯示的圖標，請參見Icon Explorer應用程序或上面的鏈接之一。 | 沒有任何 |
color | 圖標的顏色。 | 遺傳 |
| 支柱 | 描述 |
|---|---|
getFontFamily | 返回目前用於檢索圖標作為文本的字體家族。用法： const fontFamily = Icon.getFontFamily() |
getImageSource | 返回一個承諾，該諾言可以解決圖標的位圖版本的來源，以與Image Component等人一起使用。用法： const source = await Icon.getImageSource(name, size, color) |
getImageSourceSync | 與getImageSource相同，但同步。用法： const source = Icon.getImageSourceSync(name, size, color) |
getRawGlyphMap | 返回圖標集的原始字形圖。用法： const glyphMap = Icon.getRawGlyphMap() |
hasIcon | 檢查名稱在當前圖標集中是否有效。用法： const isNameValid = Icon.hasIcon(name) |
由於Icon構建在Text組件的頂部，因此大多數樣式屬性都可以按預期工作，因此您可能會發現使用這些屬性很有用：
backgroundColorborderWidthborderColorborderRadiuspaddingmargincolorfontSize注意：在Android Text上，當前不支持border*樣式，以繞過它，只需用View包裝您的Icon即可。
通過組合其中的一些，您可以創建：例如：
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或嵌套Text組件。 | white |
size | 圖標大小。 | 20 |
iconStyle | 僅應用於圖標的樣式，適合設置邊距或不同的顏色。注意：使用iconStyle進行邊距或期望不穩定的行為。 | {marginRight: 10} |
backgroundColor | 按鈕的背景顏色。 | #007AFF |
borderRadius | 按鈕的邊界半徑，設置為0以禁用。 | 5 |
onPress | 按下按鈕時調用的功能。 | 沒有任何 |
便捷的方法將其插入依靠位圖映像而不是可擴展向量圖標的其他組件中。如上所述獲取參數name ， size和color 。
Icon . getImageSource ( 'user' , 20 , 'red' ) . then ( source =>
this . setState ( { userIcon : source } )
) ;另外，您可以使用同步方法Icon.getImageSourceSync來避免造成故障。請記住，此方法正在阻止，並可能遭受績效懲罰。但是，隨後的呼叫將使用緩存。
如今，某些字體使用多種樣式，例如，該庫支持。用法與標準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等人一起使用。用法： const source = await Icon.getImageSource(name, size, color) |
getImageSourceSync | 與getImageSource相同，但同步。用法： const source = Icon.getImageSourceSync(name, size, color) |
getRawGlyphMap | 返回圖標集的原始字形圖。用法： 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])根據鍵是圖標名稱，該值是UTF-8字符或字符代碼，返回您自己的自定義字體glyphMap其中鍵是圖標名稱。 fontFamily是字體而不是文件名的名稱。打開字體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中使用下載選項，並使用您下載的.zip中包含的.json文件。您還需要按照上述說明將.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] |
| 膠合劑 | 驗證字形可用於所選樣式的函數。它以該順序為參數具有name和style 。如果字形有效或false ，則返回為true 。 | (name, style) => true |
您必須在xcodeproj Resources文件夾和Info.plist中手動對.ttf進行引用。
React Native帶有一個驚人的動畫庫，稱為Animated 。要與圖標一起使用，只需使用以下行創建一個動畫組件： const AnimatedIcon = Animated.createAnimatedComponent(Icon) 。您也可以使用更高級別的動畫庫反應本地動畫。
在Examples/IconExplorer文件夾中嘗試IconExplorer項目，您還可以在這裡搜索任何圖標。
import Icon from 'react-native-vector-icons/Ionicons' ;
function ExampleView ( props ) {
return < Icon name = "ios-person" size = { 30 } color = "#4F8EF7" / > ;
} 由於TabBarIOS從核心中刪除了 @react-navigation/底部記錄，因此也將其作為便利組件從此庫中刪除。只需使用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文件的圖標字體，則可以輕鬆地使用generate-icon腳本生成圖標集。
./node_modules/.bin/generate-icon path/to/styles.css --componentName=MyIcon --fontFamily=myicon > Components/MyIcon.js
下面未列出的任何標誌，例如--componentName和--fontFamily ，都將傳遞到模板上。
-p ， --prefixCSS選擇器前綴[默認值：“ .icon-”]
-t ， --templateJS模板字符串格式中的模板[默認值：“ ./template/iconset.tpl”]
對於默認模板，請提供--componentName和--fontFamily 。
-o ， --output將輸出保存到文件，默認為stdout
android/app/src/main/assets/fonts 。rm -rf android/app/build刪除構建文件夾。Resources文件夾上手動添加了.ttf的引用。Info.plist中。rm -rf ios/build刪除構建文件夾當您組合它們時，NPM和Android文件層次結構都會變得非常深，甚至更糟。由於Windows文件系統具有最大長度，因此長文件名地址將導致許多錯誤，包括Execution failed for task ':react-native-vector-icons:processReleaseResources' 。因此，請盡可能將通往項目文件夾的路徑盡可能短。
升級後，您可能沒有更新鏈接到本機項目的字體文件。但是，這僅適用於Android目標，因為iOS構建應用程序時會捆綁字體（如果存在問題，請從Xcode清潔構建）。在Android上，您可以重新鏈接該項目，也可以手動更新字體。使它們自動同步使用Gradle方法。
有時，供應商決定從較新版本中刪除一些圖標，這與此軟件包無關。如果您依賴舊版本的字體，則可以將其添加為自定義字體。
您可能正在同一時間嘗試使用@expo/vector-icons和react-native-vector-icons 。博覽會軟件包別名這一問題，並將優先考慮。您的項目中僅使用這些圖書館中的一個。
您需要將JSX支持對react-native-vector-icons添加到轉換器配置，例如babel。
例如，要將react-native-vector-icons添加到支持JSX（如果使用WebPack）的模塊列表中，則可能需要在JSX Config的Incluble部分中添加react-native-vector-icons路徑中的相對路徑。
如果您在WebPack中使用Babel，則可能看起來像以下內容：
// 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"),該項目已根據MIT許可獲得許可。
任何捆綁的字體均為其各自的作者，主要是MIT或SIL OFL。
