43,000+ иконок в React Native без боли: знакомство с react-native-icons-svg

Когда я начинал проекты на React Native, как и многие разработчики, использовал популярную библиотеку react-native-vector-icons. Она удобна, стабильна и поддерживает множество наборов иконок. Но со временем стали заметны ограничения:

• ⚠️ В сборку попадало слишком много лишних иконок, даже если я использовал всего несколько.
• ⚙️ Отсутствовала полноценная оптимизация под tree-shaking — бандлы разрастались.
• 🧩 Добавление новых паков требовало ручной интеграции.

Я захотел найти решение, которое объединяет гибкость, масштабируемость и эффективность.

Так появилась библиотека react-native-icons-svg — лёгкая альтернатива с поддержкой 43,000+ иконок и полной оптимизацией под современные сборщики.

Основные возможности

• 43,125+ иконок - Включает все популярные паки: Font Awesome, Ant Design, Tabler, Phosphor, Ionicons и другие
• Полный tree-shaking - В сборку попадают только используемые иконки
• Легковесность - Каждая иконка весит около 2–3 KB
• TypeScript - Полная типизация для всех иконок
• Основано на react-native-svg - Поддержка всех возможностей SVG в React Native

📦 Установка

npm install react-native-icons-svg react-native-svg
# или
yarn add react-native-icons-svg react-native-svg

react-native-svg является peer dependency и должна быть установлена отдельно.

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

✅ Рекомендованный способ

Импортируйте иконки из конкретного набора:

import React from 'react';
import { View } from 'react-native';
import { AiFillHeart, AiOutlineUser } from 'react-native-icons-svg/ai';
import { BsFillStarFill } from 'react-native-icons-svg/bs';
import { FaUser } from 'react-native-icons-svg/fa';

export default function App() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <AiFillHeart size={48} color="red" />
      <BsFillStarFill size={48} color="gold" />
      <FaUser size={48} color="blue" />
    </View>
  );
}

📦 Размер бандла: ~7–10 KB (только 3 иконки)

✅ Альтернативный способ

Импортируйте напрямую из корневого модуля:

import { AiFillHeart, AiOutlineUser } from 'react-native-icons-svg/ai';

⚠️ Неправильный способ

// ❌ Так делать не нужно — импортирует ВСЮ библиотеку (~687 MB)
import * as Icons from 'react-native-icons-svg/ai';

<Icons.AiFillHeart size={48} />;

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

Набор иконок	Префикс	Путь импорта	Кол-во
Ant Design Icons	Ai	/ai	822
Bootstrap Icons	Bs	/bs	2,658
Font Awesome	Fa	/fa	2,794
Feather	Fi	/fi	162
Game Icons	Gi	/gi	4,040
Heroicons	Hi	/hi	1,212
Ionicons	Io	/io	1,164
Phosphor Icons	Pi	/pi	9,074
Remix Icon	Ri	/ri	3,020
Tabler Icons	Tb	/tb	5,755
Lucide Icons	Lu	/lu	1,768
Simple Icons	Si	/si	3,276
…и другие	–	–	43,125+

Базовое использование

import { AiFillHeart } from 'react-native-icons-svg/ai';

<AiFillHeart size={24} color="red" />;

📦 Попробуйте прямо сейчас:

👉 npmjs.com/package/react-native-icons-svg

👉 antonseagull.com/react-native-icons

ReactNative react-native-icons react-native-svg-icons react-native-icons-library