react native vector icons
10.2.0
Eleve seus aplicativos nativos do React com o poder dos ícones de vetores personalizáveis. Ideal para embelezar botões, logotipos e barras de navegação ou guia, esses ícones se integram perfeitamente aos seus projetos. Sua versatilidade torna a extensão e o estilo sem esforço.
Para a integração de arquivos .svg nativamente, você pode explorar react-native-vector-image .
Dica
Uma nova versão do RNVI está chegando em breve. Tem quase uma configuração de configuração zero. Feedback bem -vindo, por favor, experimente na filial Monorepo
Se você encontrar esta biblioteca benéfica, contemplou gentilmente a opção de patrocinar. Nossos esforços previstos abrangem a reestruturação do repositório em uma arquitetura monorepo. Essa transição capacitará o versão independente dos conjuntos de ícones, aprimorará o desempenho, reduzirá o tamanho do pacote e simplificará as contribuições da comunidade. Seu patrocínio desempenha um papel fundamental na materialização desses avanços.
Explore todos os ícones.
AntDesign de Antfinance ( 298 ícones)Entypo por Daniel Bruce (v1.0.1 com 411 ícones)EvilIcons projetado por Alexander Madyankin e Roman Shamin (v1.10.1 com 70 ícones)Feather criado por Cole Bemis & Contribuidores (v4.28.0 com 286 ícones)FontAwesome de Dave Gandy (v4.7.0 contendo 675 ícones)FontAwesome 5 da Fonticons, Inc. (v5.15.3 Oferecendo 1598 ícones gratuitos e 7848 Pro)FontAwesome 6 projetado pela Fonticons, Inc. (v6.6.0 com ícones gratuitos de 2016 e 16150 Pro)Fontisto criado por Kenan Güncoğan (v3.0.4 com 615 ícones)Foundation por Zurb, Inc. (v3.0 com 283 ícones)Ionicons criado por Ionic (v7.1.0 contendo 1338 ícones)MaterialIcons do Google, Inc. (v4.0.0 com 2189 ícones)MaterialCommunityIcons de materialDesignicons.com (v6.5.95, incluindo 6596 ícones)Octicons projetado pela Github, Inc. (v16.3.1 com 250 ícones)Zocial por Sam Collins (v1.4.0 com 100 ícones)SimpleLineIcons criado pela Sabbir & Colabribuids (v2.5.5 com 189 ícones) npm install --save react-native-vector-iconsPara usar os ícones agrupados no iOS, execute a seguinte etapa:
Execute npx pod-install no diretório iOS
Editar Info.plist e adicione uma propriedade chamada fontes fornecidas pelo aplicativo (ou uiappfonts se o Xcode AutoComplete não estiver 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 >A etapa acima pode parecer algo assim:
Nota: Recompile seu projeto após adicionar ou remover fontes.
Para tornar o gerenciamento de fontes mais suave no Android, use este método:
Edite android/app/build.gradle (não android/build.gradle ) e adicione:
apply from : file( " ../../node_modules/react-native-vector-icons/fonts.gradle " )Para personalizar as fontes que estão sendo copiadas, 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
Atualizar caminhos 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 a biblioteca, siga estas etapas:
Fonts e cole -os em android/app/src/main/assets/fonts (verifique se o nome da pasta é minúscula, ou seja, fonts ). getImageSource As etapas a seguir são opcionais e só são necessárias se você pretende utilizar a função Icon.getImageSource .
Edite o arquivo android/settings.gradle como mostrado abaixo:
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 o android/app/build.gradle (localizado na pasta do aplicativo ) como mostrado abaixo:
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 seu MainApplication.java (localizado profundamente dentro android/app/src/main/java/... ), como mostrado abaixo (observe que há 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()
);
}Observe que esta etapa opcional é necessária apenas se o seu aplicativo nativo do React não suportar reticulação automática ; Caso contrário, você pode pular isso.
via react-native-macos
Para configurar a biblioteca no seu projeto MacOS usando react-native-macos , siga estas etapas:
Navegue até a pasta node_modules/react-native-vector-icons e arraste a pasta Fonts para o seu projeto no Xcode. Verifique se o seu aplicativo é verificado em "Adicionar aos alvos" e selecione "Criar referências de pasta" quando solicitado.
Edite sua Info.plist e inclua uma nova propriedade chamada Application Fonts Resource Path (ou ATSApplicationFontsPath se o preenchimento automático do Xcode não estiver funcionando ou você não estiver usando o Xcode). Defina o valor desta propriedade como Fonts .
Da pasta do seu projeto /ios Run:
bundle exec pod install Observe que, depois de adicionar novas fontes, você precisa recompilar seu projeto. Além disso, verifique se a pasta Fonts está presente na seção de recursos de pacote de cópias nas fases de construção do seu projeto Xcode.
Essas etapas integrarão efetivamente a biblioteca de ícones do vetor ao seu projeto MacOS enquanto utiliza a estrutura react-native-macos .
via react-native-windows
Para configurar a biblioteca no seu projeto Windows usando react-native-windows , siga estas etapas:
Nos projetos de nível superior ( /windows/project-name/Assets ), copie e cole os arquivos de fonte.
Abra sua solução no Visual Studio:
um. Clique com o botão direito do mouse na pasta de ativos em sua solução. b. Selecione Adicionar> Item existente . c. Navegue e selecione as fontes que você copiou para /windows/project-name/assets . d. Clique em Adicionar .
Observe que, depois de adicionar novas fontes, você precisa recompilar seu projeto.
Seguindo estas etapas, você integrará perfeitamente a biblioteca de ícones do vetor no seu projeto Windows, aproveitando a estrutura react-native-windows .
Para transportar um aplicativo móvel nativo do React para a Web usando react-native-web você só precisa garantir que as fontes sejam conhecidas no lado da web-app.
Você precisará adicionar a família de fontes para cada fonte que você usa ao seu CSS
Você pode depurar as famílias de fontes ausentes, procurando no console do desenvolvedor no seu navegador da web ao depurar seu aplicativo da web.
Nota: Se você estiver usando o WebPack ou similar, pode ser necessário configurar o WebPack para lidar com o carregamento de fontes TTF, usando o carregador de URL ou o carregador de arquivos. Consulte a configuração da web para obter mais detalhes.
Em seu App.css ou similar, adicione as especificações da família de fontes:
@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 a biblioteca ao seu projeto da web usando o webpack, siga estas etapas:
No seu arquivo de configuração do webpack, adicione uma seção para lidar com arquivos TTF usando url-loader ou file-loader :
{
test : / .ttf$ / ,
loader : "url-loader" , // or directly file-loader
include : path . resolve ( __dirname , "node_modules/react-native-vector-icons" ) ,
}No seu ponto de entrada JavaScript, consuma os arquivos de fonte e injete a tag de estilo necessária:
// 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 ) ;Seguindo estas etapas, você integrará perfeitamente a biblioteca de ícones do vetor ao seu projeto da web usando o WebPack, permitindo que você use os ícones sem esforço no seu aplicativo da web.
A atualização deste pacote geralmente exige que os arquivos de fonte vinculados aos seus projetos também sejam atualizados. Se o vinculação automática funcionar para você, executar isso novamente deve atualizar as fontes. Caso contrário, você precisará seguir as etapas descritas na seção de instalação.
IconVocê pode usar um dos ícones agrupados acima ou rolar sua própria fonte personalizada.
import Icon from 'react-native-vector-icons/FontAwesome' ;
const myIcon = < Icon name = "rocket" size = { 30 } color = "#900" / > ;Qualquer propriedade de texto e o seguinte:
| Prop | Descrição | Padrão |
|---|---|---|
size | O tamanho do ícone também pode ser passado como fontSize no objeto de estilo. | 12 |
name | Qual ícone para mostrar, consulte o aplicativo Icon Explorer ou um dos links acima. | Nenhum |
color | Cor do ícone. | Herdado |
| Prop | Descrição |
|---|---|
getFontFamily | Retorna a família de fontes atualmente usada para recuperar os ícones como texto. Uso: const fontFamily = Icon.getFontFamily() |
getImageSource | Retorna uma promessa que resolvendo a fonte de uma versão de bitmap do ícone para uso com o componente Image et al. Uso: const source = await Icon.getImageSource(name, size, color) |
getImageSourceSync | O mesmo que getImageSource , mas síncrono. Uso: const source = Icon.getImageSourceSync(name, size, color) |
getRawGlyphMap | Retorna o mapa de glifo bruto do conjunto de ícones. Uso: const glyphMap = Icon.getRawGlyphMap() |
hasIcon | Verifica se o nome é válido no conjunto de ícones atual. Uso: const isNameValid = Icon.hasIcon(name) |
Como Icon se baseia no topo do componente Text , a maioria das propriedades de estilo funcionará conforme o esperado, você pode achar útil brincar com estes:
backgroundColorborderWidthborderColorborderRadiuspaddingmargincolorfontSize NOTA: No momento do Android, Text não suporta estilos border* , para contornar isso simplesmente embrulhe seu Icon com uma View .
Combinando alguns deles, você pode criar, por exemplo:
Icon.Button componenteUm componente de conveniência para criar botões com um ícone no lado esquerdo.
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 >
) ; Qualquer Text , TouchableHighlight tocável ou propriedade TouchableWithoutFeedback além de estas:
| Prop | Descrição | Padrão |
|---|---|---|
color | TEXTO E COR DE TEXTO E ICON, Use iconStyle ou ninhe um componente Text se precisar de cores diferentes. | white |
size | Tamanho do ícone. | 20 |
iconStyle | Estilos aplicados apenas ao ícone, bom para definir margens ou uma cor diferente. NOTA: Use iconStyle para margens ou espere um comportamento instável. | {marginRight: 10} |
backgroundColor | Cor de fundo do botão. | #007AFF |
borderRadius | Raio de borda do botão, definido como 0 para desativar. | 5 |
onPress | Uma função chamada quando o botão é pressionado. | Nenhum |
Maneira conveniente de conectar isso a outros componentes que dependem de imagens de bitmap, em vez de ícones de vetores escaláveis. Leva o name , size e color dos argumentos, conforme descrito acima.
Icon . getImageSource ( 'user' , 20 , 'red' ) . then ( source =>
this . setState ( { userIcon : source } )
) ; Como alternativa, você pode usar o método síncrono Icon.getImageSourceSync para evitar renderizar falhas. Lembre -se de que esse método está bloqueando e pode incorrer em penalidades de desempenho. As chamadas subsequentes usarão o cache no entanto.
Hoje, algumas fontes usam vários estilos, o Fontawesome 5, por exemplo, que é suportado por esta biblioteca. O uso é praticamente o mesmo que o componente Icon padrão:
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 os métodos estáticos do Icon são suportados por fontes de vários estilo.
| Prop | Descrição |
|---|---|
getFontFamily | Retorna a família de fontes atualmente usada para recuperar os ícones como texto. Uso: const fontFamily = Icon.getFontFamily(style) |
getImageSource | Retorna uma promessa que resolvendo a fonte de uma versão de bitmap do ícone para uso com o componente Image et al. Uso: const source = await Icon.getImageSource(name, size, color) |
getImageSourceSync | O mesmo que getImageSource , mas síncrono. Uso: const source = Icon.getImageSourceSync(name, size, color) |
getRawGlyphMap | Retorna o mapa de glifo bruto do conjunto de ícones. Uso: const glyphMap = Icon.getRawGlyphMap(style) |
hasIcon | Verifica se o nome é válido no conjunto de ícones atual. Uso: const isNameValid = Icon.hasIcon(name, style) |
getStyledIconSet | Use isso para obter um componente Icon para um único estilo. Uso. const StyledIcon = Icon.getStyledIconSet(style) |
Se nenhum argumento de estilo for aprovado (ou se for inválido), os métodos serão inadimplentes para um fallback predefinido.
Icon.Button é suportado, o uso é 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]) Retorna sua própria fonte personalizada com base no glyphMap , onde a chave é o nome do ícone e o valor é um caractere UTF-8 ou seu código de caractere. fontFamily é o nome da fonte, não o nome do arquivo. Abra a fonte no livro de fontes.App ou semelhante para aprender o nome. Opcionalmente, passe o terceiro argumento fontFile para suporte para Android, deve ser o nome do arquivo de font 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 conveniência para criar uma fonte personalizada com base em um arquivo de configuração Fontello. Não se esqueça de importar a fonte, conforme descrito acima, e solte o config.json em algum lugar conveniente em seu projeto.
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'
) ; Verifique se você está usando a opção de download no ICOMOON e use o arquivo .json incluído no .zip que você baixou. Você também precisará importar o arquivo de fonte .ttf para o seu projeto, seguindo as instruções acima.
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 / >| opção | Descrição | padrão |
|---|---|---|
| defaultstyle | O nome do estilo a ser usado se nenhum estilo for fornecido durante a renderização. | Object.keys(styles)[0] |
| FallbackFamily | Função para selecionar uma família se um glifo não estiver disponível. A função deve aceitar o name do glifo como um parâmetro. Retorna o nome se a família. | (name) => Object.keys(styles)[0] |
| glifavalidador | Função para validar que um glifo está disponível para um estilo escolhido. Tem name e style como parâmetros, nessa ordem. Retorna true se o glifo for válido ou false , se não for. | (name, style) => true |
Você deve fazer manualmente uma referência do seu .ttf na sua pasta XcodeProj Resources e Info.plist .
O React Native vem com uma incrível biblioteca de animação chamada Animated . Para usá -lo com um ícone, basta criar um componente animado com esta linha: const AnimatedIcon = Animated.createAnimatedComponent(Icon) . Você também pode usar a biblioteca de animação de nível superior, react-native-Animatable.
Experimente o projeto IconExplorer na pasta Examples/IconExplorer , você também pode procurar qualquer ícone.
import Icon from 'react-native-vector-icons/Ionicons' ;
function ExampleView ( props ) {
return < Icon name = "ios-person" size = { 30 } color = "#4F8EF7" / > ;
} Como TabBarIOS foi removido do núcleo em favor do @React-Navigation/Bottom Tabs, ele também é removido como um componente de conveniência desta biblioteca. Em vez disso, basta usar o Icon , mas não se esqueça de importar e vincular este projeto, conforme descrito acima primeiro.
Abaixo está um exemplo retirado da 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 >
) ;
} Como ToolbarAndroid foi removido do núcleo, ele também é removido como um componente de conveniência desta biblioteca. Basta usar getImageSourceSync , mas não se esqueça de importar e vincular a este projeto, conforme descrito acima primeiro.
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 >
) ;
} Se você já possui uma fonte de ícone com o arquivo CSS associado, poderá gerar facilmente um conjunto de ícones com o script generate-icon .
./node_modules/.bin/generate-icon path/to/styles.css --componentName=MyIcon --fontFamily=myicon > Components/MyIcon.js
Quaisquer sinalizadores não listados abaixo, como --componentName e --fontFamily , serão transmitidos para o modelo.
-p , --prefixPrefixo seletor CSS [padrão: ".icon-"]
-t , --templateModelo no modelo JS String Format [padrão: "./template/iconset.tpl"]
Para o modelo padrão, forneça --componentName e --fontFamily .
-o , --outputSalvar a saída no arquivo, os padrões no stdout
android/app/src/main/assets/fonts .rm -rf android/app/build ..ttf na sua pasta XcodeProj Resources .Info.plist , se você adicionou a pasta inteira e é de cor azul, precisará adicioná -la ao caminho.rm -rf ios/build As hierarquias de arquivos NPM e Android tendem a ficar muito profundas e ainda piores quando você as combina. Como o sistema de arquivos do Windows tem um comprimento máximo, os endereços de nome de arquivo longo resultarão em vários erros, incluindo Execution failed for task ':react-native-vector-icons:processReleaseResources' . Portanto, tente manter o caminho para a pasta do projeto o mais curta possível.
Você provavelmente não atualizou os arquivos de fonte vinculados ao seu projeto nativo após a atualização. No entanto, isso se aplica apenas aos alvos do Android, pois o iOS agrupa as fontes ao criar o aplicativo (tente limpar sua construção no xcode se o problema existir). No Android, você pode vincular o projeto ou atualizar manualmente as fontes. Para que eles sincronizem automaticamente, use a abordagem gradle.
Às vezes, os fornecedores decide remover alguns ícones de lançamentos mais recentes, isso não tem nada a ver com este pacote. Se você depende de uma versão mais antiga de uma fonte, poderá adicioná -la como uma fonte personalizada.
Você provavelmente está tentando usar @expo/vector-icons e react-native-vector-icons ao mesmo tempo. O pacote Expo Aliases este e terá precedência. Use apenas uma dessas bibliotecas em seu projeto.
Você precisará adicionar suporte JSX para react-native-vector-icons à sua configuração de transpiler, por exemplo, Babel.
Por exemplo, para adicionar react-native-vector-icons à lista de módulos que suportam JSX (se estiver usando o webpack), pode ser necessário adicionar o caminho relativo para react-native-vector-icons na seção incluir sua configuração JSX.
Isso pode se parecer com o seguinte se você estiver usando Babel em 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 projeto está licenciado sob a licença do MIT.
Quaisquer fontes agrupadas são direitos autorais para seus respectivos autores e, principalmente, sob o MIT ou o SIL OFL.
