react native vector icons
10.2.0
Élevez vos applications natives React avec la puissance des icônes vectorielles personnalisables. Idéal pour embellir les boutons, les logos et les barres de navigation ou d'onglet, ces icônes s'intègrent parfaitement à vos projets. Leur polyvalence fait de l'extension et du style sans effort.
Pour l'intégration des fichiers .svg nativement, vous pouvez explorer react-native-vector-image .
Conseil
Une nouvelle version de RNVI arrive bientôt. Il a presque une configuration de configuration zéro. Retour bienvenue, veuillez l'essayer sur la succursale Monorepo
Si vous trouvez cette bibliothèque bénéfique, veuillez réfléchir à l'option de parrainage. Nos efforts envisagés englobent la restructuration du référentiel dans une architecture monorepo. Cette transition permettra de permettre des versioning indépendants des ensembles d'icônes, d'améliorer les performances, de réduire la taille du forfait et de simplifier les contributions communautaires. Votre parrainage joue un rôle central dans la matérialisation de ces progrès.
Explorez toutes les icônes.
AntDesign d'Antfinance ( 298 icônes)Entypo par Daniel Bruce (V1.0.1 avec 411 icônes)EvilIcons conçu par Alexander Madyankin & Roman Shamin (V1.10.1 avec 70 icônes)Feather créé par Cole Bemis & Contributeurs (V4.28.0 avec 286 icônes)FontAwesome de Dave Gandy (V4.7.0 contenant 675 icônes)FontAwesome 5 de Fonticons, Inc. (V5.15.3 Offrande 1598 Icônes gratuites et 7848 Pro)FontAwesome 6 Conçu par Fonticons, Inc. (V6.6.0 avec 2016 Icônes gratuites et 16150 Pro)Fontisto créé par Kenan Gündoğan (V3.0.4 avec 615 icônes)Foundation par Zurb, Inc. (V3.0 avec 283 icônes)Ionicons fabriqués par ionic (v7.1.0 contenant 1338 icônes)MaterialIcons par Google, Inc. (v4.0.0 avec 2189 icônes)MaterialCommunityIcons de MaterialDesignicons.com (V6.5.95, y compris 6596 icônes)Octicons conçus par Github, Inc. (V16.3.1 avec 250 icônes)Zocial par Sam Collins (V1.4.0 avec 100 icônes)SimpleLineIcons fabriqués par Sabbir & Contributeurs (v2.5.5 avec 189 icônes) npm install --save react-native-vector-iconsPour utiliser les icônes groupées sur iOS, effectuez l'étape suivante:
Exécutez npx pod-install dans le répertoire iOS
Modifier Info.plist et ajouter une propriété appelée polices fournies par l'application (ou uiAppFonts si Xcode Assomple's ne fonctionne pas):
< 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 >Au-dessus, étape peut ressembler à ceci:
Remarque: Recompilez votre projet après avoir ajouté ou supprimé les polices.
Pour rendre la gestion des polices plus fluide sur Android, utilisez cette méthode:
Edit android/app/build.gradle (pas android/build.gradle ) et ajouter:
apply from : file( " ../../node_modules/react-native-vector-icons/fonts.gradle " )Pour personnaliser les polices copiées, utilisez:
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
Mettre à jour les chemins comme:
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.gradlePour intégrer manuellement la bibliothèque, suivez ces étapes:
Fonts et collez-les dans android/app/src/main/assets/fonts (assurez-vous que le nom du dossier est en minuscules, c'est-à-dire fonts ). getImageSource Les étapes suivantes sont facultatives et ne sont nécessaires que si vous avez l'intention d'utiliser la fonction Icon.getImageSource .
Modifiez le fichier android/settings.gradle comme indiqué ci-dessous:
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') Modifiez android/app/build.gradle (situé dans le dossier de l'application ) comme indiqué ci-dessous:
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')
} Modifiez votre MainApplication.java (situé profondément dans android/app/src/main/java/... ) comme indiqué ci-dessous (Notez qu'il y a two endroits à modifier):
package com.myapp;
+ import com.oblador.vectoricons.VectorIconsPackage;
....
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage()
+ , new VectorIconsPackage()
);
}Veuillez noter que cette étape facultative n'est nécessaire que si votre application React-Native ne prend pas en charge la conduite automatique ; Sinon, vous pouvez ignorer cela.
via react-native-macos
Pour configurer la bibliothèque sur votre projet macOS à l'aide de react-native-macos , suivez ces étapes:
Regardez vers le dossier node_modules/react-native-vector-icons et faites glisser le dossier Fonts dans votre projet dans Xcode. Assurez-vous que votre application est vérifiée sous «Ajouter aux cibles» et sélectionnez «Créer des références de dossier» lorsque vous y êtes invité.
Modifiez votre Info.plist et incluez une nouvelle propriété nommée Path de ressource des polices d'application (ou ATSApplicationFontsPath si la saisie semi-automatique de Xcode ne fonctionne pas ou si vous n'utilisez pas xcode). Définissez la valeur de cette propriété sur Fonts .
Depuis le dossier de votre projet /ios :
bundle exec pod install Veuillez noter qu'après avoir ajouté de nouvelles polices, vous devez recompiler votre projet. Assurez-vous également que le dossier Fonts est présent dans la section Ressources de bundle Copy dans les phases de construction de votre projet Xcode.
Ces étapes intégreront efficacement la bibliothèque des icônes vectorielles dans votre projet macOS tout en utilisant le cadre react-native-macos .
via react-native-windows
Pour configurer la bibliothèque de votre projet Windows à l'aide de react-native-windows , suivez ces étapes:
Dans les projets de niveau supérieur ( /windows/project-name/Assets ), copiez et collez les fichiers de police.
Ouvrez votre solution dans Visual Studio:
un. Cliquez avec le bouton droit sur le dossier Assets dans votre solution. né Sélectionnez Ajouter> Élément existant . c. Parcourez et sélectionnez les polices que vous avez copiées dans /windows/project-name/assets . d. Cliquez sur ajouter .
Veuillez noter qu'après avoir ajouté de nouvelles polices, vous devez recompiler votre projet.
En suivant ces étapes, vous intégrez de manière transparente la bibliothèque Icons Vector dans votre projet Windows, en tirant parti du cadre react-native-windows .
Pour porter une application mobile React-Native sur le Web à l'aide react-native-web vous avez juste besoin de vous assurer que les polices sont connues du côté Web.
Vous aurez besoin d'ajouter la famille de police pour chaque police que vous utilisez à votre CSS
Vous pouvez déboguer manquer les familles de polices en recherchant dans la console de développeur dans votre navigateur Web lors de la débogage de votre application Web.
Remarque: Si vous utilisez WebPack ou similaire, vous devrez peut-être configurer WebPack pour gérer le chargement des polices TTF, à l'aide d'URL-chargeur ou de chargeur de fichiers. Voir la configuration Web pour plus de détails.
Dans votre App.css ou similaire, ajoutez les spécifications de la police de la police:
@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 */Pour intégrer la bibliothèque à votre projet Web à l'aide de WebPack, suivez ces étapes:
Dans votre fichier de configuration WebPack, ajoutez une section pour gérer les fichiers TTF à l'aide url-loader ou file-loader :
{
test : / .ttf$ / ,
loader : "url-loader" , // or directly file-loader
include : path . resolve ( __dirname , "node_modules/react-native-vector-icons" ) ,
}Dans votre point d'entrée JavaScript, consommez les fichiers de police et injectez la balise de style nécessaire:
// 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 ) ;En suivant ces étapes, vous intégrez de manière transparente la bibliothèque Icons Vector dans votre projet Web à l'aide de WebPack, vous permettant d'utiliser sans effort les icônes de votre application Web.
La mise à niveau de ce package nécessite souvent que les fichiers de police liés à vos projets soient également mis à jour. Si le lien automatique fonctionne pour vous, l'exécution de ceci doit à nouveau mettre à jour les polices. Sinon, vous devez suivre les étapes décrites dans la section d'installation.
IconVous pouvez soit utiliser l'une des icônes groupées ci-dessus, soit laver votre propre police personnalisée.
import Icon from 'react-native-vector-icons/FontAwesome' ;
const myIcon = < Icon name = "rocket" size = { 30 } color = "#900" / > ;Toute propriété texte et les suivantes:
| Soutenir | Description | Défaut |
|---|---|---|
size | La taille de l'icône peut également être transmise sous forme fontSize dans l'objet de style. | 12 |
name | Quelle icône afficher, voir l'application Icon Explorer ou l'un des liens ci-dessus. | Aucun |
color | Couleur de l'icône. | Hérité |
| Soutenir | Description |
|---|---|
getFontFamily | Renvoie la famille des polices qui est actuellement utilisée pour récupérer les icônes comme texte. Utilisation: const fontFamily = Icon.getFontFamily() |
getImageSource | Renvoie une promesse que la résolution de la source d'une version bitmap de l'icône à utiliser avec Image Component et al. Utilisation: const source = await Icon.getImageSource(name, size, color) |
getImageSourceSync | Identique à getImageSource mais synchrone. Utilisation: const source = Icon.getImageSourceSync(name, size, color) |
getRawGlyphMap | Renvoie la carte des glyphes bruts de l'ensemble d'icônes. Utilisation: const glyphMap = Icon.getRawGlyphMap() |
hasIcon | Vérifie si le nom est valide dans l'ensemble d'icônes actuel. Utilisation: const isNameValid = Icon.hasIcon(name) |
Étant donné que Icon s'accumule sur le composant Text , la plupart des propriétés de style fonctionneront comme prévu, vous pourriez trouver utile de jouer avec ceux-ci:
backgroundColorborderWidthborderColorborderRadiuspaddingmargincolorfontSize Remarque: sur Android, Text ne prend pas actuellement en charge les styles border* , pour contourner cela simplement envelopper votre Icon avec une View .
En combinant certains d'entre eux, vous pouvez créer par exemple:
Icon.Button composantUn composant de commodité pour créer des boutons avec une icône sur le côté gauche.
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 >
) ; Tout Text , TouchableHighlight ou TouchableWithoutFeedback propriété defeedback en plus de celles-ci:
| Soutenir | Description | Défaut |
|---|---|---|
color | Couleur de texte et d'icône, utilisez iconStyle ou nichez un composant Text si vous avez besoin de différentes couleurs. | white |
size | Taille de l'icône. | 20 |
iconStyle | Styles appliqués à l'icône uniquement, bon pour régler les marges ou une couleur différente. Remarque: Utilisez iconStyle pour les marges ou attendez-vous à un comportement instable. | {marginRight: 10} |
backgroundColor | Couleur d'arrière-plan du bouton. | #007AFF |
borderRadius | Rayon frontalier du bouton, réglé sur 0 pour désactiver. | 5 |
onPress | Une fonction appelée lorsque le bouton est enfoncé. | Aucun |
Moyen pratique de brancher cela sur d'autres composants qui reposent sur des images bitmap plutôt que sur les icônes vectorielles évolutives. Prend le name , size et color des arguments comme décrit ci-dessus.
Icon . getImageSource ( 'user' , 20 , 'red' ) . then ( source =>
this . setState ( { userIcon : source } )
) ; Alternativement, vous pouvez utiliser l' Icon.getImageSourceSync de la méthode synchrone. Gardez à l'esprit que cette méthode bloque et pourrait entraîner des pénalités de performance. Les appels suivants utiliseront le cache.
Certaines polices utilisent aujourd'hui plusieurs styles, Fontawesome 5 par exemple, qui est pris en charge par cette bibliothèque. L'utilisation est à peu près la même que la composante Icon standard:
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 Toutes les méthodes statiques de Icon sont prises en charge par des polices multi-styles.
| Soutenir | Description |
|---|---|
getFontFamily | Renvoie la famille des polices qui est actuellement utilisée pour récupérer les icônes comme texte. Utilisation: const fontFamily = Icon.getFontFamily(style) |
getImageSource | Renvoie une promesse que la résolution de la source d'une version bitmap de l'icône à utiliser avec Image Component et al. Utilisation: const source = await Icon.getImageSource(name, size, color) |
getImageSourceSync | Identique à getImageSource mais synchrone. Utilisation: const source = Icon.getImageSourceSync(name, size, color) |
getRawGlyphMap | Renvoie la carte des glyphes bruts de l'ensemble d'icônes. Utilisation: const glyphMap = Icon.getRawGlyphMap(style) |
hasIcon | Vérifie si le nom est valide dans l'ensemble d'icônes actuel. Utilisation: const isNameValid = Icon.hasIcon(name, style) |
getStyledIconSet | Utilisez-le pour obtenir un composant Icon pour un seul style. Usage. const StyledIcon = Icon.getStyledIconSet(style) |
Si aucun argument de style n'est passé (ou s'il est invalide), les méthodes seront par défaut à une repli prédéfinie.
Icon.Button est pris en charge, l'utilisation est comme 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]) Renvoie votre propre police personnalisée en fonction du glyphMap où la clé est le nom de l'icône et la valeur est soit un caractère UTF-8, soit son code de caractère. fontFamily est le nom de la police et non le nom de fichier. Ouvrez la police dans Font Book.app ou similaire à apprendre le nom. Passons éventuellement le troisième argument fontFile pour la prise en charge Android, il devrait être le nom de fichier de police personnalisé.
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]]) Méthode de commodité pour créer une police personnalisée basée sur un fichier de configuration de Fontello. N'oubliez pas d'importer la police comme décrit ci-dessus et déposez la config.json quelque part pratique dans votre projet.
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'
) ; Assurez-vous que vous utilisez l'option de téléchargement dans iComoon et utilisez le fichier .json inclus dans le .zip que vous avez téléchargé. Vous devrez également importer le fichier de police .ttf dans votre projet, en suivant les instructions ci-dessus.
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 / >| option | Description | défaut |
|---|---|---|
| defaultstyle | Le nom du style à utiliser si aucun style n'est fourni pendant le rendu. | Object.keys(styles)[0] |
| caisse de secours | Fonction pour sélectionner une famille si un glyphe n'est pas disponible. La fonction doit accepter le name du glyphe comme paramètre. Renvoie le nom si la famille. | (name) => Object.keys(styles)[0] |
| glyphvalidateur | Fonction pour valider qu'un glyphe est disponible pour un style choisi. Il a name et style comme paramètres, dans cet ordre. Renvoie true si le glyphe est valide ou false si ce n'est pas le cas. | (name, style) => true |
Vous devez faire manuellement une référence de votre .ttf sur votre dossier Resources Xcodeproj et dans Info.plist .
React Native est livré avec une bibliothèque d'animation incroyable appelée Animated . Pour l'utiliser avec une icône, créez simplement un composant animé avec cette ligne: const AnimatedIcon = Animated.createAnimatedComponent(Icon) . Vous pouvez également utiliser la bibliothèque d'animation de niveau supérieur React-Native-Animatable.
Essayez le projet IconExplorer dans des Examples/IconExplorer , vous pouvez également rechercher n'importe quelle icône.
import Icon from 'react-native-vector-icons/Ionicons' ;
function ExampleView ( props ) {
return < Icon name = "ios-person" size = { 30 } color = "#4F8EF7" / > ;
} Étant donné que TabBarIOS a été supprimé du Core en faveur de @ react newavigation / inférieur, il est également supprimé en tant que composant de commodité de cette bibliothèque. Utilisez simplement l' Icon à la place, mais n'oubliez pas d'importer et de lier ce projet comme décrit ci-dessus en premier.
Vous trouverez ci-dessous un exemple tiré de 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 >
) ;
} Étant donné que ToolbarAndroid a été supprimé du Core, il est également supprimé en tant que composant de commodité de cette bibliothèque. Utilisez simplement getImageSourceSync à la place, mais n'oubliez pas d'importer et de lier ce projet comme décrit ci-dessus en premier.
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 >
) ;
} Si vous avez déjà une police d'icône avec le fichier CSS associé, vous pouvez facilement générer un ensemble d'icônes avec le script generate-icon .
./node_modules/.bin/generate-icon path/to/styles.css --componentName=MyIcon --fontFamily=myicon > Components/MyIcon.js
Tous les drapeaux non répertoriés ci-dessous, comme --componentName et --fontFamily , seront transmis au modèle.
-p , --prefixPréfixe du sélecteur CSS [par défaut: ".icon-"]
-t , --templateModèle dans le format de chaîne de modèle js [par défaut: "./template/iconset.tpl"]
Pour le modèle par défaut, veuillez fournir --componentName et --fontFamily .
-o , --outputEnregistrer la sortie dans le fichier, par défaut sur stdout
android/app/src/main/assets/fonts .rm -rf android/app/build ..ttf sur votre dossier Resources Xcodeproj.Info.plist , si vous avez ajouté le dossier entier et sa couleur bleue, vous devez l'ajouter au chemin.rm -rf ios/build Les hiérarchies de fichiers NPM et Android ont tendance à devenir très profondes et encore pires lorsque vous les combinez. Étant donné que Windows File System a une longueur maximale, les adresses de nom de fichier longs entraîneront de nombreuses erreurs, y compris Execution failed for task ':react-native-vector-icons:processReleaseResources' . Essayez donc de garder le chemin vers votre dossier de projet aussi court que possible.
Vous n'avez probablement pas mis à jour les fichiers de police liés à votre projet natif après la mise à niveau. Cependant, cela ne s'applique qu'aux cibles Android, car iOS regroupe les polices lors de la création de l'application (essayez de nettoyer votre version à partir de Xcode si le problème existe). Sur Android, vous pouvez relier le projet ou mettre à jour manuellement les polices. Pour les faire synchroniser automatiquement, utiliser l'approche Gradle.
Parfois, les vendeurs décident de supprimer certaines icônes des versions plus récentes, cela n'a rien à voir avec ce package. Si vous dépendez d'une ancienne version d'une police, vous pouvez l'ajouter en tant que police personnalisée.
Vous essayez probablement d'utiliser @expo/vector-icons et react-native-vector-icons en même temps. Le forfait Expo alias celui-ci et aura la priorité. Utilisez une seule de ces bibliothèques dans votre projet.
Vous devrez ajouter la prise en charge de JSX pour react-native-vector-icons à votre configuration de transpiler, par exemple Babel.
Par exemple, pour ajouter react-native-vector-icons à la liste des modules qui prennent en charge JSX (si vous utilisez WebPack), vous devrez peut-être ajouter le chemin relatif pour react-native-vector-icons dans la section Inclure de votre configuration JSX.
Cela peut ressembler à ce qui suit si vous utilisez Babel dans 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"),Ce projet est autorisé sous la licence du MIT.
Toutes les polices groupées sont des droits d'auteur de leurs auteurs respectifs et principalement sous MIT ou Sil Ofl.
