react native vector icons
10.2.0
Eleve sus aplicaciones nativas React con la potencia de los iconos vectoriales personalizables. Ideal para embellecer botones, logotipos y barras de navegación o pestañas, estos íconos se integran sin problemas en sus proyectos. Su versatilidad hace que la extensión y el estilo sin esfuerzo.
Para la integración de los archivos .svg de forma nativa, puede explorar react-native-vector-image .
Consejo
Pronto llegará una nueva versión de RNVI. Tiene casi una configuración de configuración cero. Comentarios Bienvenido, pruébelo en la rama de Monorepo
Si encuentra que esta biblioteca es beneficiosa y amable, contemple la opción de patrocinar. Nuestros esfuerzos previstos abarcan la reestructuración del repositorio en una arquitectura de monorreo. Esta transición potenciará el verso independiente de los conjuntos de iconos, mejorará el rendimiento, reducirá el tamaño del paquete y simplificará las contribuciones de la comunidad. Su patrocinio juega un papel fundamental en la materialización de estos avances.
Explore todos los íconos.
AntDesign from antfinance ( 298 iconos)Entypo de Daniel Bruce (V1.0.1 con 411 iconos)EvilIcons diseñados por Alexander Madyankin y Roman Shamin (V1.10.1 con 70 íconos)Feather creada por Cole Bemis & Contribuyentes (V4.28.0 con 286 iconos)FontAwesome de Dave Gandy (v4.7.0 que contiene 675 iconos)FontAwesome 5 de Fonticons, Inc. (V5.15.3 Ofreciendo 1598 iconos gratuitos y 7848 Pro)FontAwesome 6 Diseñado por Fonticons, Inc. (V6.6.0 con iconos gratuitos y 16150 profesionales de 2016 )Fontisto creado por Kenan Gündogan (v3.0.4 con 615 iconos)Foundation de Zurb, Inc. (v3.0 con 283 iconos)Ionicons creados por Ionic (V7.1.0 que contiene 1338 iconos)MaterialIcons de Google, Inc. (v4.0.0 con 2189 iconos)MaterialCommunityIcons de MaterialDesignicons.com (V6.5.95 incluyendo 6596 iconos)Octicons diseñados por Github, Inc. (V16.3.1 con 250 iconos)Zocial por Sam Collins (V1.4.0 con 100 íconos)SimpleLineIcons diseñados por Sabbir & Contribuyentes (v2.5.5 con 189 iconos) npm install --save react-native-vector-iconsPara usar los iconos agrupados en iOS, realice el siguiente paso:
Ejecute npx pod-install en el directorio de iOS
Editar Info.plist y agregar una propiedad llamada fuentes proporcionadas por la aplicación (o uiappfonts si xcode autocomplete no está funcionando):
< 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 >El paso arriba puede verse algo así:
Nota: Recompire su proyecto después de agregar o eliminar fuentes.
Para que la administración de fuentes sea más suave en Android, use este método:
Editar android/app/build.gradle (no android/build.gradle ) y agregue:
apply from : file( " ../../node_modules/react-native-vector-icons/fonts.gradle " )Para personalizar las fuentes que se están copiando, use:
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
Actualizar rutas como:
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.gradlePara integrar manualmente la biblioteca, siga estos pasos:
Fonts y péguelos en android/app/src/main/assets/fonts (asegúrese de que el nombre de la carpeta sea minúscula, es decir, fonts ). getImageSource Los siguientes pasos son opcionales y solo son necesarios si tiene la intención de utilizar la función Icon.getImageSource .
Edite el archivo android/settings.gradle como se muestra a continuación:
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') Edite el android/app/build.gradle (ubicado en la carpeta de aplicaciones ) como se muestra a continuación:
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')
} Edite su MainApplication.java (ubicado en lo profundo de android/app/src/main/java/... ) como se muestra a continuación (tenga en cuenta que hay two lugares para editar):
package com.myapp;
+ import com.oblador.vectoricons.VectorIconsPackage;
....
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage()
+ , new VectorIconsPackage()
);
}Tenga en cuenta que este paso opcional es necesario solo si su aplicación react-nativa no es compatible con la reticulación automática ; De lo contrario, puedes omitir esto.
a través de react-native-macos
Para configurar la biblioteca en su proyecto MacOS utilizando react-native-macos , siga estos pasos:
Explore la carpeta node_modules/react-native-vector-icons y arrastre la carpeta Fonts a su proyecto en Xcode. Asegúrese de que su aplicación se verifique en "Agregar a los objetivos" y seleccione "Crear referencias de carpeta" cuando se le solicite.
Edite su Info.plist e incluya una nueva propiedad llamada Ruta de recursos de fuentes de aplicaciones (o ATSApplicationFontsPath si el autocomplete de Xcode no funciona o no está utilizando Xcode). Establezca el valor de esta propiedad en Fonts .
Desde la carpeta de su proyecto /ios Ejecutar:
bundle exec pod install Tenga en cuenta que después de agregar nuevas fuentes, debe recompilar su proyecto. Además, asegúrese de que la carpeta Fonts esté presente en la sección de recursos de paquete de copias dentro de las fases de compilación de su proyecto Xcode.
Estos pasos integrarán efectivamente la biblioteca de iconos vectoriales en su proyecto MACOS al tiempo que utiliza el marco react-native-macos .
a través de react-native-windows
Para configurar la biblioteca en su proyecto de Windows utilizando react-native-windows , siga estos pasos:
En los proyectos de nivel superior ( /windows/project-name/Assets ), copie y pegue los archivos de fuentes.
Abra su solución en Visual Studio:
a. Haga clic derecho en la carpeta de activos en su solución. b. Seleccione Agregar> Elemento existente . do. Explore y seleccione las fuentes que copió en /windows/project-name/assets . d. Haga clic en Agregar .
Tenga en cuenta que después de agregar nuevas fuentes, debe recompilar su proyecto.
Siguiendo estos pasos, integrará perfectamente la biblioteca de iconos vectoriales en su proyecto Windows, aprovechando el marco react-native-windows .
Para portar una aplicación móvil react-nativa a la web utilizando react-native-web solo necesita asegurarse de que las fuentes se conozcan en el lado de la aplicación web.
Necesitará agregar la fuente de fuente para cada fuente que use a su CSS
Puede depurar las familias de fuentes faltantes mirando en la consola de desarrolladores en su navegador web al depurar su aplicación web.
Nota: Si está utilizando Webpack o similar, es posible que deba configurar Webpack para manejar la carga de fuentes TTF, utilizando URL-Loader o File-Loader. Consulte la configuración web para obtener más detalles.
En su App.css o Agregue las especificaciones de la familia Font: 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 */Para integrar la biblioteca con su proyecto web utilizando Webpack, siga estos pasos:
En su archivo de configuración de Webpack, agregue una sección para manejar archivos TTF usando url-loader o file-loader :
{
test : / .ttf$ / ,
loader : "url-loader" , // or directly file-loader
include : path . resolve ( __dirname , "node_modules/react-native-vector-icons" ) ,
}En su punto de entrada de JavaScript, consuma los archivos de fuentes e inyecte la etiqueta de estilo necesaria:
// 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 ) ;Siguiendo estos pasos, integrará perfectamente la biblioteca de iconos vectoriales en su proyecto web utilizando Webpack, lo que le permite usar sin esfuerzo los iconos dentro de su aplicación web.
La actualización de este paquete a menudo requiere que los archivos de fuentes vinculados a sus proyectos también se actualicen. Si el enlace automático funciona para usted, ejecutar esto nuevamente debe actualizar las fuentes. De lo contrario, debe seguir los pasos descritos en la sección de instalación.
IconPuede usar uno de los iconos agrupados arriba o enrollar su propia fuente personalizada.
import Icon from 'react-native-vector-icons/FontAwesome' ;
const myIcon = < Icon name = "rocket" size = { 30 } color = "#900" / > ;Cualquier propiedad de texto y la siguiente:
| Apuntalar | Descripción | Por defecto |
|---|---|---|
size | El tamaño del icono también se puede pasar como fontSize en el objeto de estilo. | 12 |
name | Qué ícono para mostrar, vea la aplicación Icon Explorer o uno de los enlaces anteriores. | Ninguno |
color | Color del icono. | Heredado |
| Apuntalar | Descripción |
|---|---|
getFontFamily | Devuelve la familia de fuentes que se usa actualmente para recuperar íconos como texto. Uso: const fontFamily = Icon.getFontFamily() |
getImageSource | Devuelve una promesa de que la resolución de la fuente de una versión de mapa de bits del icono para usar con componente Image et al. Uso: const source = await Icon.getImageSource(name, size, color) |
getImageSourceSync | Igual que getImageSource pero sincrónico. Uso: const source = Icon.getImageSourceSync(name, size, color) |
getRawGlyphMap | Devuelve el mapa del glifo sin procesar del conjunto de iconos. Uso: const glyphMap = Icon.getRawGlyphMap() |
hasIcon | Comprueba si el nombre es válido en el conjunto de iconos actuales. Uso: const isNameValid = Icon.hasIcon(name) |
Dado que Icon se basa en la parte superior del componente Text , la mayoría de las propiedades de estilo funcionarán como se esperaba, es posible que sea útil jugar con estos:
backgroundColorborderWidthborderColorborderRadiuspaddingmargincolorfontSize Nota: El Text de Android actualmente no es compatible con los estilos border* , para eludir esto simplemente envuelva su Icon con una View .
Al combinar algunos de estos, puede crear, por ejemplo:
Icon.Button componenteUn componente de conveniencia para crear botones con un icono en el lado izquierdo.
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 >
) ; Cualquier Text , TouchableHighlight o TouchableWithoutFeedback propiedad de Backback además de estos:
| Apuntalar | Descripción | Por defecto |
|---|---|---|
color | Color de texto e icono, use iconStyle o aniden un componente Text si necesita diferentes colores. | white |
size | Tamaño del icono. | 20 |
iconStyle | Estilos aplicados solo al icono, buenos para establecer márgenes o un color diferente. Nota: Use iconStyle para márgenes o espere un comportamiento inestable. | {marginRight: 10} |
backgroundColor | Color de fondo del botón. | #007AFF |
borderRadius | Radio de borde del botón, establecido en 0 para deshabilitar. | 5 |
onPress | Una función llamada cuando se presiona el botón. | Ninguno |
Manera conveniente de conectar esto a otros componentes que dependen de las imágenes de mapa de bits en lugar de iconos vectoriales escalables. Toma el name , size y color de los argumentos como se describe anteriormente.
Icon . getImageSource ( 'user' , 20 , 'red' ) . then ( source =>
this . setState ( { userIcon : source } )
) ; Alternativamente, puede usar el Icon.getImageSourceSync de método sincrónico. GetImageSceSync para evitar representar fallas. Tenga en cuenta que este método está bloqueando y podría incurrir en sanciones de rendimiento. Sin embargo, las llamadas posteriores utilizarán caché.
Algunas fuentes de hoy usan múltiples estilos, Fontawesome 5, por ejemplo, que es compatible con esta biblioteca. El uso es más o menos el mismo que el componente Icon estándar:
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 Todos los métodos estáticos del Icon son compatibles con fuentes de estilo múltiple.
| Apuntalar | Descripción |
|---|---|
getFontFamily | Devuelve la familia de fuentes que se usa actualmente para recuperar íconos como texto. Uso: const fontFamily = Icon.getFontFamily(style) |
getImageSource | Devuelve una promesa de que la resolución de la fuente de una versión de mapa de bits del icono para usar con componente Image et al. Uso: const source = await Icon.getImageSource(name, size, color) |
getImageSourceSync | Igual que getImageSource pero sincrónico. Uso: const source = Icon.getImageSourceSync(name, size, color) |
getRawGlyphMap | Devuelve el mapa del glifo sin procesar del conjunto de iconos. Uso: const glyphMap = Icon.getRawGlyphMap(style) |
hasIcon | Comprueba si el nombre es válido en el conjunto de iconos actuales. Uso: const isNameValid = Icon.hasIcon(name, style) |
getStyledIconSet | Use esto para obtener un componente Icon para un solo estilo. Uso. const StyledIcon = Icon.getStyledIconSet(style) |
Si no se pasa ningún argumento de estilo (o si no es válido), los métodos predeterminan un alternativo predefinido.
Icon.Button es compatible, el uso es como 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]) Devuelve su propia fuente personalizada en función del glyphMap donde la clave es el nombre del icono y el valor es un carácter UTF-8 o su código de caracteres. fontFamily es el nombre de la fuente, no el nombre de archivo. Abra la fuente en Font Book.App o similar para aprender el nombre. Opcionalmente, pase el tercer argumento fontFile para el soporte de Android, debe ser el nombre de archivo de fuente personalizado.
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étodo de conveniencia para crear una fuente personalizada basada en un archivo de configuración de Fontello. No olvide importar la fuente como se describió anteriormente y suelte el config.json en algún lugar conveniente en su proyecto.
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'
) ; Asegúrese de usar la opción de descarga en Icomoon y use el archivo .json que está incluido en el .zip que ha descargado. También necesitará importar el archivo de fuente .ttf en su proyecto, siguiendo las instrucciones anteriores.
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 / >| opción | Descripción | por defecto |
|---|---|---|
| estilo predeterminado | El nombre del estilo que se utilizará si no se suministra ningún estilo durante la representación. | Object.keys(styles)[0] |
| Familia de aliento | Función para seleccionar una familia si no hay un glifo disponible. La función debe aceptar el name del glifo como parámetro. Devuelve el nombre si la familia. | (name) => Object.keys(styles)[0] |
| glifvalidador | Función para validar que un glifo está disponible para un estilo elegido. Tiene name y style como parámetros, en ese orden. Devuelve true si el glifo es válido o false si no lo es. | (name, style) => true |
Debe hacer una referencia manualmente de su .ttf en su carpeta Resources xcodeproj y en Info.plist .
React Native viene con una increíble biblioteca de animación llamada Animated . Para usarlo con un icono, simplemente cree un componente animado con esta línea: const AnimatedIcon = Animated.createAnimatedComponent(Icon) . También puede usar la biblioteca de animación de nivel superior React-Native-Animatable.
Pruebe el proyecto IconExplorer en la carpeta Examples/IconExplorer , allí también puede buscar cualquier icono.
import Icon from 'react-native-vector-icons/Ionicons' ;
function ExampleView ( props ) {
return < Icon name = "ios-person" size = { 30 } color = "#4F8EF7" / > ;
} Dado que TabBarIOS se eliminó del núcleo a favor de @React-Navegación/Tabas inferior, también se elimina como un componente de conveniencia de esta biblioteca. Simplemente use el Icon en su lugar, pero no olvide importar y vincular a este proyecto como se describe anteriormente.
A continuación se muestra un ejemplo tomado 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 >
) ;
} Dado que ToolbarAndroid se eliminó del núcleo, también se elimina como un componente de conveniencia de esta biblioteca. Simplemente use getImageSourceSync en su lugar, pero no olvide importar y vincular a este proyecto como se describe anteriormente.
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 ya tiene una fuente de icono con el archivo CSS asociado, puede generar fácilmente un conjunto de iconos con el script generate-icon .
./node_modules/.bin/generate-icon path/to/styles.css --componentName=MyIcon --fontFamily=myicon > Components/MyIcon.js
Cualquier bandera que no se enumere a continuación, como --componentName y --fontFamily , se transmitirá a la plantilla.
-p , --prefixPrefijo del selector CSS [predeterminado: ".icon-"]
-t , --templatePlantilla en el formato de cadena de plantilla JS [predeterminado: "./template/iconset.tpl"]
Para la plantilla predeterminada, proporcione --componentName y --fontFamily .
-o , --outputGuardar la salida en el archivo, predeterminada a stdout
android/app/src/main/assets/fonts .rm -rf android/app/build ..ttf en su carpeta Resources XCodeproj.Info.plist , si ha agregado toda la carpeta y su color azul, entonces debe agregarla a la ruta.rm -rf ios/build Las jerarquías de archivos NPM y Android tienden a ser muy profundas y aún peor cuando las combina. Dado que el sistema de archivos de Windows tiene una longitud máxima, las direcciones de nombre de archivo largas darán como resultado numerosos errores, incluida Execution failed for task ':react-native-vector-icons:processReleaseResources' . Así que trate de mantener el camino a la carpeta de su proyecto lo más corto posible.
Probablemente no actualicó los archivos de fuentes vinculados a su proyecto nativo después de actualizar. Sin embargo, esto solo se aplica a los objetivos de Android ya que iOS agrupa las fuentes al construir la aplicación (intente limpiar su compilación desde Xcode si el problema existe). En Android puede volver a relacionar el proyecto o actualizar manualmente las fuentes. Para que se sincronicen automáticamente, use el enfoque de Gradle.
A veces, los proveedores decide eliminar algunos íconos de los lanzamientos más nuevos, esto no tiene nada que ver con este paquete. Si depende de una versión anterior de una fuente, puede agregarla como una fuente personalizada.
Probablemente esté tratando de usar @expo/vector-icons y react-native-vector-icons al mismo tiempo. El paquete de exposición alias de este y tendrá prioridad. Use solo una de estas bibliotecas en su proyecto.
Deberá agregar soporte JSX para react-native-vector-icons a su configuración de transpilador, por ejemplo, Babel.
Por ejemplo, para agregar react-native-vector-icons a la lista de módulos que admiten JSX (si usan webpack), es posible que deba agregar la ruta relativa a react-native-vector-icons en la sección de incluir de su configuración JSX.
Esto puede parecerse a lo siguiente si está usando Babel en 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"),Este proyecto tiene licencia bajo la licencia MIT.
Cualquier fuente agrupada es derechos de autor para sus respectivos autores y principalmente bajo MIT o SIL OFL.
