Как подключить иконки в проекте React Native?

В React Native подключение иконок чаще всего реализуется с помощью библиотеки react-native-vector-icons, которая предоставляет доступ к большому количеству популярных наборов иконок (FontAwesome, MaterialIcons, Ionicons и др.). Она позволяет использовать иконки как компоненты, настраивать их размер, цвет, обрабатывать события нажатия и интегрировать с другими элементами интерфейса.

Установка библиотеки react-native-vector-icons

1. Установка через npm или yarn

npm install react-native-vector-icons

или

yarn add react-native-vector-icons

2. Настройка для проектов на React Native CLI (не Expo)

Если вы используете React Native CLI (не Expo), иконки нужно связать (link) или убедиться, что ваш проект использует автолинковку (начиная с React Native 0.60+).

Для Android:

  1. В android/app/build.gradle добавьте: 
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
  1. Убедитесь, что шрифты будут скопированы в APK.

Для iOS:

  1. Откройте ios/YourProject.xcworkspace в Xcode.

  2. Перетащите содержимое папки node_modules/react-native-vector-icons/Fonts в Xcode → Resources проекта.

  3. Убедитесь, что шрифты указаны в 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>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>
</array>

3. Использование в проектах на Expo

В Expo react-native-vector-icons уже встроена, и вы можете использовать её без дополнительной установки или настройки. Вместо этого используйте обёртку от Expo:

import { Ionicons } from '@expo/vector-icons';

Использование иконок

Пример с Ionicons:

import Ionicons from 'react-native-vector-icons/Ionicons';
<Ionicons name="home-outline" size={30} color="#4F8EF7" />

Поддерживаемые наборы иконок

react-native-vector-icons поддерживает множество коллекций:

Импорт Название коллекции
AntDesign Ант-дизайн
--- ---
Entypo Entypo
--- ---
EvilIcons EvilIcons
--- ---
Feather Feather
--- ---
FontAwesome FontAwesome 4
--- ---
FontAwesome5 FontAwesome 5
--- ---
Foundation Foundation
--- ---
Ionicons Ionicons
--- ---
MaterialIcons Material Icons
--- ---
MaterialCommunityIcons Material Community Icons
--- ---
Octicons Octicons
--- ---
SimpleLineIcons Simple Line Icons
--- ---
Zocial Zocial
--- ---

Пример импорта:

import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import FontAwesome from 'react-native-vector-icons/FontAwesome';

Атрибуты и настройка

Все иконки поддерживают следующие свойства:

Свойство Описание
name Название иконки (строка)
--- ---
size Размер в пикселях
--- ---
color Цвет
--- ---
style Стилизация (например, отступы)
--- ---

Пример:

<MaterialIcons name="menu" size={32} color="black" style={{ marginRight: 10 }} />

Иконка как кнопка

Иконки можно использовать как интерактивные элементы:

<Ionicons
name="ios-add-circle-outline"
size={40}
color="green"
onPress={() => alert('Нажато')}
/>

Поиск иконок по названию

Используйте официальный Icon Explorer от разработчика библиотеки:

  • Позволяет искать по ключевым словам.

  • Позволяет копировать точное имя (name) иконки.

  • Указывает из какого набора иконок она.

Использование в TabBar и Drawer

Многие навигационные библиотеки (например, @react-navigation) поддерживают интеграцию с react-native-vector-icons.

Пример с нижним таббаром:

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Ionicons from 'react-native-vector-icons/Ionicons';
<Tab.Navigator
screenOptions={({ route }) => ({
tabBarIcon: ({ color, size }) => {
let iconName;
if (route.name === 'Home') {
iconName = 'home-outline';
} else if (route.name === 'Settings') {
iconName = 'settings-outline';
}
return &lt;Ionicons name={iconName} size={size} color={color} /&gt;;
},
})}
\>
&lt;Tab.Screen name="Home" component={HomeScreen} /&gt;
&lt;Tab.Screen name="Settings" component={SettingsScreen} /&gt;
&lt;/Tab.Navigator&gt;

Кастомные шрифты-иконки

Если нужно добавить собственные иконки (например, SVG, превращённые в шрифт), можно использовать генераторы вроде IcoMoon и сгенерировать .ttf шрифт, который можно подключить как пользовательский шрифт.

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

import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
export default function IconExample() {
return (
&lt;View style={styles.container}&gt;
&lt;Text style={styles.title}&gt;Мои иконки&lt;/Text&gt;
&lt;FontAwesome name="rocket" size={40} color="#900" /&gt;
&lt;TouchableOpacity style={styles.button}&gt;
&lt;FontAwesome name="thumbs-up" size={24} color="white" /&gt;
&lt;Text style={styles.buttonText}&gt;Нравится&lt;/Text&gt;
&lt;/TouchableOpacity&gt;
&lt;/View&gt;
);
}
const styles = StyleSheet.create({
container: {
marginTop: 100,
alignItems: 'center',
},
title: {
fontSize: 22,
marginBottom: 20,
},
button: {
flexDirection: 'row',
backgroundColor: '#2980b9',
padding: 12,
borderRadius: 6,
alignItems: 'center',
marginTop: 20,
},
buttonText: {
color: '#fff',
marginLeft: 10,
fontSize: 16,
},
});

Библиотека react-native-vector-icons предоставляет обширный набор инструментов для интеграции иконок в интерфейс, позволяет использовать готовые наборы, делать иконки интерактивными, настраивать стили и использовать их в системах навигации. В проектах на Expo подключение ещё проще, так как библиотека уже встроена и готова к использованию без настройки.

08-08-2025
Easy 7 просмотров