react native vector icons Download - react native vector icons Скачать исходный код

Реагировать нативные векторные значки

Поднимите свои нативные приложения React с помощью мощности настраиваемых векторных значков. Идеальные для украшения кнопок, логотипов и навигации или стержней вкладок, эти значки плавно интегрируются в ваши проекты. Их универсальность делает расширение и стилирование легким.

Для интеграции файлов .svg вы можете изучить react-native-vector-image .

Кончик

Скоро появится новая версия RNVI. Он имеет почти нулевую настройку конфигурации. Обратная связь, пожалуйста, попробуйте это на филиале Monorepo

Комплекты в комплекте
Установка
- настройка iOS
- Настройка Android
- настройка macOS
- Настройка Windows
- Реактивная настройка Web
- Веб -настройка
Обновление
Компонент значка
Icon.button Component
Использование в качестве изображения PNG/исходного объекта
Мульти-стиль шрифты
Пользовательские шрифты
Анимация
Примеры использования
Таббар
Создание собственного набора значков из файла CSS
Изменение
Поиск неисправностей
Лицензия

Спонсорство

Если вы найдете эту библиотеку полезной, любезно рассмотрите возможность спонсоров. Наши предполагаемые усилия охватывают реструктуризацию репозитория в архитектуру монорепо. Этот переход позволит обеспечить независимые версии наборов значков, повысить производительность, уменьшить размер пакета и упростить вклад сообщества. Ваше спонсорство играет ключевую роль в реализации этих достижений.

Комплекты в комплекте

Исследуйте все значки.

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 значков)
FontAwesome 6 , разработанный Fonticons, Inc. (v6.6.0 с участием бесплатных и 16150 Pro)
Fontisto , созданный Кенаном Гюндоганом (v3.0.4 с 615 иконами)
Foundation от Zurb, Inc. (v3.0 с 283 значками)
Ionicons созданные Ionic (v7.1.0, содержащий 1338 значков)
MaterialIcons от Google, Inc. (v4.0.0 с 2189 значками)
MaterialCommunityIcons от materialdesignicons.com (v6.5.95, включая 6596 значков)
Octicons , разработанные Github, Inc. (v16.3.1 с 250 значками)
Zocial Сэма Коллинза (v1.4.0 с 100 иконками)
SimpleLineIcons , созданный Sabbir & Antormors (v2.5.5 с 189 иконами)

Установка

Установите пакет через NPM:
```
npm install --save react-native-vector-icons
```
В зависимости от платформы, на которую вы нацелены (iOS/Android/Windows), следуйте соответствующим инструкциям по настройке.
Если вы планируете использовать Fontawesome 5 или 6 значков, см. Эти руководства: Fontawesome 5 | Fontawesome 6

настройка iOS

Чтобы использовать комплексные значки на iOS, выполните следующий шаг:

Запустите npx pod-install в каталоге iOS

Редактировать Info.plist и добавить свойство, называемое шрифтами, предоставленные приложением (или UIAPPFONTTS, если xcode AutoCoplete не работает):

Список всех доступных шрифтов для копирования и вставки в info.plist

< key >UIAppFonts</ key >
< array >
  < string >AntDesign.ttf</ string >
  < string >Entypo.ttf</ string >
  < string >EvilIcons.ttf</ string >
  < string >Feather.ttf</ string >
  < string >FontAwesome.ttf</ string >
  < string >FontAwesome5_Brands.ttf</ string >
  < string >FontAwesome5_Regular.ttf</ string >
  < string >FontAwesome5_Solid.ttf</ string >
  < string >FontAwesome6_Brands.ttf</ string >
  < string >FontAwesome6_Regular.ttf</ string >
  < string >FontAwesome6_Solid.ttf</ string >
  < string >Foundation.ttf</ string >
  < string >Ionicons.ttf</ string >
  < string >MaterialIcons.ttf</ string >
  < string >MaterialCommunityIcons.ttf</ string >
  < string >SimpleLineIcons.ttf</ string >
  < string >Octicons.ttf</ string >
  < string >Zocial.ttf</ string >
  < string >Fontisto.ttf</ string >
</ array >

Выше шаг может выглядеть примерно так:

Примечание: перекомпилируйте свой проект после добавления или удаления шрифтов.

Настройка Android

Вариант: с Gradle (рекомендуется)

Чтобы сделать управление шрифтом более гладким на 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 " )

Конфигурация монорепо

При работе в MonorePo укажите на правильные пути сценария `fonts.gradle` и файлов шрифтов, относительно файла Android/App/build.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

️ Сообщаемые проблемы возникли при использовании версий RNVI ранее, чем 9,0,0 в контексте монорепо. Поэтому желательно убедиться, что ваша версия RNVI составляет 9.0.0 или более поздней версии.

Вариант: ручная интеграция

Чтобы вручную интегрировать библиотеку, следуйте этим шагам:

Скопируйте содержимое в папке 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 (расположен в папке приложения ), как показано ниже:

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

Измените свой MainApplication.java (расположен в глубоком в рамках android/app/src/main/java/... ), как показано ниже (обратите внимание, что есть two места для редактирования):
```
package com.myapp;

+ import com.oblador.vectoricons.VectorIconsPackage;

....

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

Обратите внимание, что этот необязательный шаг необходим только в том случае, если ваше приложение для реагирования не поддерживает автоматическое связывание ; В противном случае вы можете пропустить это.

настройка macOS

Через react-native-macos

Чтобы настроить библиотеку на вашем проекте MacOS с использованием react-native-macos , выполните следующие действия:

Зайдите в папку node_modules/react-native-vector-icons и перетащите папку Fonts в ваш проект в XCode. Убедитесь, что ваше приложение проверяется в разделе «Добавить в цели», и выберите «Создать ссылки на папки» при запросе.
Отредактируйте свой Info.plist и включите новое свойство с именем проведения ресурса приложения (или ATSApplicationFontsPath если автозаполнение Xcode не функционирует или не используете Xcode). Установите значение этого свойства на Fonts .
Из папки вашего проекта /ios :

bundle exec pod install

Обратите внимание, что после добавления новых шрифтов вам нужно перекомпилировать свой проект. Кроме того, убедитесь, что папка Fonts присутствует в разделе «Ресурсы копирования» на этапах сборки вашего проекта XCode.

Эти шаги будут эффективно интегрировать библиотеку векторных значков в ваш проект MacOS, используя при этом структуру react-native-macos .

Настройка Windows

Через react-native-windows

Чтобы настроить библиотеку на вашем проекте Windows, используя react-native-windows , выполните следующие действия:

В проектах верхнего уровня ( /windows/project-name/Assets ) скопируйте и вставьте файлы шрифтов.
Откройте свое решение в Visual Studio:
а Щелкните правой кнопкой мыши папку активов в своем решении. беременный Выберите добавить> существующий элемент . в Просмотрите и выберите шрифты, которые вы скопировали в /windows/project-name/assets . дюймовый Нажмите «Добавить ».

Обратите внимание, что после добавления новых шрифтов вам нужно перекомпилировать свой проект.

Следуя этим шагам, вы плавно интегрируете библиотеку векторных значков в свой проект Windows, используя структуру react-native-windows .

Реактивная настройка Web

Чтобы перенести мобильное приложение-реагируемое мобильное приложение в Интернет, используя react-native-web вам просто необходимо обеспечить известные шрифты на стороне веб-приложения.

Вам нужно добавить семейство шрифта для каждого шрифта, который вы используете в CSS

Вы можете отлаживать отсутствующие фондовые средства, посмотрев в консоли разработчика в вашем веб-браузере при отладке вашего веб-приложения.

ПРИМЕЧАНИЕ. Если вы используете WebPack или аналогично, вам может потребоваться настроить WebPack для обработки загрузки шрифтов TTF с использованием URL-загрузчика или загрузчика файлов. Смотрите веб -настройку для более подробной информации.

В вашем App.css или аналогично добавьте спецификации семейства FONT:

 @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, выполните следующие действия:

В вашем файле конфигурации WebPack добавьте раздел для обработки файлов TTF с помощью url-loader или file-loader :

 {
  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, что позволит вам легко использовать значки в вашем веб -приложении.

Обновление

Обновление этого пакета часто требует обновления файлов Font, связанных с вашими проектами. Если автоматическое связывание работает для вас, запуск этого снова должен обновить шрифты. В противном случае вам нужно выполнить шаги, описанные в разделе установки.

Компонент `Icon`

Вы можете либо использовать одну из комплексных значков выше, либо свернуть свой собственный шрифт.

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

Характеристики

Любое текстовое свойство и следующее:

Проп	Описание	По умолчанию
`size`	Размер значка, также может быть передан как `fontSize` в объекте стиля.	`12`
`name`	Какой значок показывать, см. Приложение Explorer Icon или одну из ссылок выше.	Никто
`color`	Цвет значка.	Унаследован

Статические методы

Проп	Описание
`getFontFamily`	Возвращает семейство шрифтов, которое в настоящее время используется для извлечения значков в качестве текста. Использование: `const fontFamily = Icon.getFontFamily()`
`getImageSource`	Возвращает обещание, что разрешение на источник растровой версии значка для использования с `Image` Component et al. Использование: `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 компонента, большинство свойств стиля будут работать так, как и ожидалось, вы можете найти это полезным с этим:

backgroundColor
borderWidth
borderColor
borderRadius
padding
margin
color
fontSize

Примечание. В настоящее время на Text не поддерживает стили border* , чтобы обойти это просто обернуть свой Icon с View .

Объединив некоторые из них, вы можете создать, например:

`Icon.Button` Component

Удобный компонент для создания кнопок со значком с левой стороны.

 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 -SpecileBiteFack в дополнение к этому:

Проп	Описание	По умолчанию
`color`	Текст и цвет значков, используйте `iconStyle` или гнездятся `Text` компонент, если вам нужны разные цвета.	`white`
`size`	Размер значков.	`20`
`iconStyle`	Стили, применяемые только к значке, хорошо для установки маржи или другого цвета. Примечание. Используйте `iconStyle` для поля или ожидайте нестабильного поведения.	`{marginRight: 10}`
`backgroundColor`	Фоновый цвет кнопки.	`#007AFF`
`borderRadius`	Радиус границы кнопки, установите на `0` чтобы отключить.	`5`
`onPress`	Функция вызывается, когда нажата кнопка.	Никто

Использование в качестве изображения PNG/исходного объекта

Удобный способ подключить это к другим компонентам, которые полагаются на растровые изображения, а не на масштабируемые векторные значки. Принимает аргументы name , size и color как описано выше.

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

В качестве альтернативы вы можете использовать Icon.getImageSourceSync синхронного метода. Getimagesourcesync, чтобы избежать рендеринга. Имейте в виду, что этот метод блокирует и может понести штрафы за производительность. Последующие вызовы будут использовать кэш, однако.

Мульти-стиль шрифты

Некоторые шрифты сегодня используют несколько стилей, например, Fontawesome 5, который поддерживается этой библиотекой. Использование в значительной степени такое же, как и стандартный компонент 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 et al. Использование: `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])`

Возвращает свой собственный шрифт на основе glyphMap , где ключ-это имя значка, а значение-это либо символ UTF-8, либо его код символа. fontFamily - это имя шрифта, а не имя файла. Откройте шрифт в Font 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, и используйте файл .json , который включен в загруженный вами .zip . Вам также необходимо импортировать файл шрифта .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` в качестве параметров, в таком порядке. Возвращает `true` , если глиф действителен или `false` , если это не так.	`(name, style) => true`

ios

Вы должны вручную сделать ссылку на вашу .ttf в папке Resources Xcodeproj и в Info.plist .

Анимация

React Native поставляется с удивительной библиотекой анимации под названием Animated . Чтобы использовать его со значком, просто создайте анимированный компонент с этой строкой: const AnimatedIcon = Animated.createAnimatedComponent(Icon) . Вы также можете использовать библиотеку анимации более высокого уровня реагируемой.

Примеры использования

ICONEXPLORER

Попробуйте проект IconExplorer в папке Examples/IconExplorer , вы также можете найти любой значок.

Основной пример

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

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

Таббар

Поскольку TabBarIOS был удален из ядра в пользу @React-Navigation/Bottom-Tabs, он также удаляется в качестве удобного компонента из этой библиотеки. Просто используйте 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 >
  ) ;
}

ToolbarArandroid

Поскольку 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

Если у вас уже есть шрифт значка с соответствующим файлом CSS, вы можете легко генерировать набор значков с помощью скрипта generate-icon .

Пример использования:

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

Параметры

Любые флаги, не перечисленные ниже, такие как --componentName и --fontFamily , будут переданы в шаблон.

`-p` , `--prefix`

Префикс селектора CSS [по умолчанию: ".icon-"]

`-t` , `--template`

Шаблон в формате строки шаблона JS [по умолчанию: "./template/iconset.tpl"]

Для шаблона по умолчанию предоставьте --componentName и --fontFamily .

`-o` , `--output`

Сохранить вывод в файл, по умолчанию в Stdout

Изменение

Поиск неисправностей

Значки отображаются как скрещенная коробка на Android

Убедитесь, что вы скопировали шрифт в android/app/src/main/assets/fonts .
Удалите папку сборки с помощью rm -rf android/app/build .
Перекомпилировать проект.

Красный экран с ошибкой «Нераспознанная семья Font Family» на iOS

Убедитесь, что вы вручную добавили ссылку на вашу .ttf в папку Resources Xcodeproj.
Убедитесь, что шрифт, который вы пытаетесь использовать, появляется в Info.plist , если вы добавили всю папку и синий цвет, тогда вам нужно добавить ее в путь.
Убедитесь, что шрифт скопирован в ресурсах пакета копий на этапах сборки .
Удалить папку сборки с помощью rm -rf ios/build
Перекомпилировать проект.

Android Build не удается в Windows без веской причины

И иерархии файлов NPM и Android, как правило, становятся очень глубокими и еще хуже, когда вы их объединяете. Поскольку файловая система Windows имеет максимальную длину, длинные адреса имени файла приведут к многочисленным ошибкам, включая Execution failed for task ':react-native-vector-icons:processReleaseResources' . Так что постарайтесь сохранить путь к папке проекта как можно более коротким.

Неверные значки отображаются после обновления этого пакета

Вы, вероятно, не обновили файлы шрифтов, связанные с вашим нативным проектом после обновления. Тем не менее, это относится только к целям Android, поскольку iOS объединяет шрифты при создании приложения (попробуйте очистить свою сборку из XCode, если проблема существует). На Android вы можете пересмотреть проект или вручную обновить шрифты. Чтобы их автоматически синхронизировал, используйте подход Gradle.

Некоторые значки отсутствуют после обновления этого пакета

Иногда поставщики решают удалить некоторые значки из новых выпусков, это не имеет ничего общего с этим пакетом. Если вы зависите от более старой версии шрифта, вы можете добавить его в качестве специального шрифта.

Невозможно разрешить модуль @expo/vector-icons/xxxfont

Вы, вероятно, пытаетесь использовать @expo/vector-icons и одновременно react-native-vector-icons . Экспо пакет псевдоним это и будет иметь приоритет. Используйте только одну из этих библиотек в вашем проекте.

Web-Pack жалуется на неподдерживаемый синтаксис JSX

Вам нужно будет добавить поддержку JSX для react-native-vector-icons к конфигурации трансполатора, например, Babel.

Например, чтобы добавить react-native-vector-icons в список модулей, которые поддерживают JSX (при использовании WebPack), вам может потребоваться добавить относительный путь к react-native-vector-icons в разделе «Включить конфигурацию».

Это может выглядеть примерно как следующее, если вы используете Babel в 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"),

Лицензия

Этот проект лицензирован по лицензии MIT.

Любые объединенные шрифты являются авторским правом на их соответствующих авторов и в основном под MIT или Sil Ofl.

Расширять

react native vector icons

Реагировать нативные векторные значки

Оглавление

Спонсорство

Комплекты в комплекте

Установка

настройка iOS

Настройка Android

Вариант: с Gradle (рекомендуется)

Вариант: ручная интеграция

Интеграция библиотеки для поддержки getImageSource

настройка macOS

Настройка Windows

Реактивная настройка Web

Веб -настройка

Обновление

Компонент Icon

Характеристики

Статические методы

Стиль

Icon.Button Component

Характеристики

Использование в качестве изображения PNG/исходного объекта

Мульти-стиль шрифты

Статические методы

Компоненты

Пользовательские шрифты

createIconSet(glyphMap, fontFamily[, fontFile])

createIconSetFromFontello(config[, fontFamily[, fontFile]])

createIconSetFromIcoMoon(config[, fontFamily[, fontFile]])

createMultiStyleIconSet(styles [, options])

ios

Анимация

Примеры использования

ICONEXPLORER

Основной пример

Таббар

ToolbarArandroid

Встроенные значки

Создание собственного набора значков из файла CSS

Пример использования:

Параметры

-p , --prefix

-t , --template

-o , --output

Изменение

Поиск неисправностей

Значки отображаются как скрещенная коробка на Android

Красный экран с ошибкой «Нераспознанная семья Font Family» на iOS

Android Build не удается в Windows без веской причины

Неверные значки отображаются после обновления этого пакета

Некоторые значки отсутствуют после обновления этого пакета

Невозможно разрешить модуль @expo/vector-icons/xxxfont

Web-Pack жалуется на неподдерживаемый синтаксис JSX

Лицензия

Интеграция библиотеки для поддержки `getImageSource`

Компонент `Icon`

`Icon.Button` Component

`createIconSet(glyphMap, fontFamily[, fontFile])`

`createIconSetFromFontello(config[, fontFamily[, fontFile]])`

`createIconSetFromIcoMoon(config[, fontFamily[, fontFile]])`

`createMultiStyleIconSet(styles [, options])`

`-p` , `--prefix`

`-t` , `--template`

`-o` , `--output`