react-native-icons-svg

v0.1.24

Published

14 days ago

SVG React icons of popular icon packs

Downloads

750

0High
0Medium
0Low

antonseagull

react-native ios android

react-native-icons-svg

English | Русский

🌟 Features

🎨 43,125+ icons from popular icon packs
🌲 Tree-shaking support - only imported icons are bundled
⚡ Lightweight - each icon is ~2-3 KB
🎯 TypeScript support - full type definitions included
📱 React Native SVG - powered by react-native-svg
🎨 Customizable - change size, color, and style

🔍 Icon Browser

Browse and search all 43,125+ icons easily!

Visit antonseagull.com/react-native-icons to:

🔎 Search icons by name or keywords
👀 Preview icons before using them
📋 Copy import statements with one click
🎨 View all available icon packs
⚡ Find the perfect icon for your app quickly

📦 Installation

npm install react-native-icons-svg react-native-svg

yarn add react-native-icons-svg react-native-svg

Note: react-native-svg is a peer dependency and must be installed separately.

🚀 Usage

✅ Correct Usage

Import from specific icon packs - this is the only way to import icons:

import React from 'react';
import { View } from 'react-native';
// Import from specific packs - this is the only supported method
import {
  AiFillHeart,
  AiFillStar,
  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} fill="red" />
      <BsFillStarFill size={48} fill="gold" />
      <FaUser size={48} fill="blue" />
    </View>
  );
}

✅ Bundle size: ~7-10 KB (only 3 icons + utilities)
✅ IDE Performance: Fast autocomplete (loads only ~800-9000 icons per pack)

❌ Incorrect Usage (Avoid)

DON'T try to import from the main entry point:

// ❌ WRONG: This doesn't work - main entry only exports types!
import { AiFillHeart } from 'react-native-icons-svg';

// ✅ CORRECT: Import from specific pack
import { AiFillHeart } from 'react-native-icons-svg/ai';

DON'T import the entire library:

// ❌ BAD: This imports ALL 43,125 icons!
import * as Icons from 'react-native-icons-svg/ai';

function App() {
  return <Icons.AiFillHeart size={48} />;
}

❌ Bundle size: ~687 MB (all icons included)

📖 Icon Props

All icons accept the following props:

| Prop | Type | Default | Description | | -------- | -------- | --------- | ---------------------------------- | | size | number | 24 | Icon size in pixels | | fill | string | - | Fill color of the icon | | stroke | string | - | Stroke color of the icon | | style | object | - | Additional styles | | ... | - | - | Any other react-native-svg props |

⚠️ Breaking Change: In previous versions, the color prop was used to set the icon color. This has been replaced with two separate parameters: fill (for fill color) and stroke (for stroke color). The color prop is now deprecated and will be removed in a future version.

Example

<AiFillHeart size={32} fill="red" stroke="red" style={{ margin: 10 }} opacity={0.8} />

🎨 Available Icon Packs

The library includes 43,125+ icons from popular icon packs:

| Icon Pack | Prefix | Import Path | Examples | --------------------- | ------ | ----------- | ------------- | Phosphor Icons | Pi | /pi | Tabler Icons | Tb | /tb | Material Design Icons | Md | /md | Game Icons | Gi | /gi | Simple Icons | Si | /si | Remix Icon | Ri | /ri | Bootstrap Icons | Bs | /bs | Lucide Icons | Lu | /lu | Font Awesome | Fa | /fa | Box Icons | Bi | /bi | Line Awesome | Lia | /lia | Ionicons | Io | /io | Heroicons v2 | Hi2 | /hi2 | Ant Design Icons | Ai | /ai | CSS.gg | Cg | /cg | Grommet Icons | Gr | /gr | Heroicons v1 | Hi | /hi | VS Code Icons | Vsc | /vsc | IcoMoon Free | Im | /im | Themify Icons | Tfi | /tfi | Typicons | Ti | /ti | Flat Color Icons | Fc | /fc | Radix Icons | Rx | /rx | Golang Icons | Go | /go | Circum Icons | Ci | /ci | Feather | Fi | /fi | Weather Icons | Wi | /wi | Dev Icons | Di | /di | Simple Line Icons | Sl | /sl | Count | -------------------- | ----- | | PiHeart, PiStar | 9,072 | | TbHome, TbUser | 5,754 | | MdHome, MdStar | 4,339 | | GiSword, GiShield | 4,038 | | SiReact, SiTypescript | 3,274 | | RiHome, RiUser | 3,020 | | BsFillStarFill, BsCheckCircle | 2,656 | | LuHome, LuUser | 1,637 | | FaUser, FaHome | 1,611 | | BiHeart, BiStar | 1,634 | | LiaHomeSolid, LiaUser | 1,544 | | IoHome, IoHeart | 1,357 | | Hi2Home, Hi2User | 972 | | AiFillHeart, AiOutlineUser | 831 | | CgHome, CgUser | 704 | | GrHome, GrUser | 635 | | HiHome, HiUser | 460 | | VscHome, VscFile | 466 | | ImHome, ImUser | 415 | | TfiHome, TfiUser | 352 | | TiHome, TiUser | 336 | | FcHome, FcIdea | 329 | | RxHome, RxComponent | 318 | | GoHome, GoGear | 317 | | CiHome, CiUser | 288 | | FiHome, FiUser | 287 | | WiDaySunny, WiRain | 219 | | DiReact, DiJavascript | 192 | | SlHome, SlUser | 189 |

Note: All icons must be imported from their specific pack paths (e.g., /ai, /bs). The main entry point only exports types.

🌲 Tree-Shaking

This library is fully optimized for tree-shaking. Modern bundlers (Metro, Webpack, Rollup) will automatically remove unused icons from your bundle.

How it works:

Named exports: Each icon is exported individually
No side effects: Declared in package.json as "sideEffects": false
ES modules: Built in ESM format for optimal tree-shaking

Bundle size comparison:

| Usage | Icons Included | Bundle Size | | ---------------------- | -------------- | ----------- | | 1 icon | 1 icon | ~2-3 KB | | 3 icons | 3 icons | ~7-10 KB | | 10 icons | 10 icons | ~15-20 KB | | import * as Icons... | ALL 43,125 | ~687 MB ⚠️ |

📚 Examples

Basic Example

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

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

With Custom Styles

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

<AiFillStar
  size={32}
  fill="gold"
  style={{
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
  }}
/>;

Dynamic Icon Selection

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

function FavoriteButton({ isFavorite }) {
  const Icon = isFavorite ? AiFillHeart : AiOutlineHeart;
  return <Icon size={24} fill={isFavorite ? 'red' : 'gray'} />;
}

🛠️ Development

Regenerate icon exports

If you add new icons, regenerate the index file:

npm run generate-index
npm run prepare

📄 License

MIT © Anton Seagull

🙏 Credits

This library includes icons from the following projects:

react-native-icons-svg (Русская версия)

🌟 Возможности

🎨 43,125+ иконок из популярных наборов
🌲 Поддержка tree-shaking - в сборку попадают только импортированные иконки
⚡ Легковесность - каждая иконка ~2-3 КБ
🎯 Поддержка TypeScript - полные определения типов
📱 React Native SVG - работает на react-native-svg
🎨 Настраиваемость - изменяйте размер, цвет и стиль

🔍 Браузер иконок

Удобный поиск по всем 43,125+ иконкам!

Посетите antonseagull.com/react-native-icons чтобы:

🔎 Искать иконки по названию или ключевым словам
👀 Предпросматривать иконки перед использованием
📋 Копировать импорты одним кликом
🎨 Просматривать все доступные наборы иконок
⚡ Быстро находить идеальную иконку для вашего приложения

📦 Установка

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,
  AiFillStar,
  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} fill="red" />
      <BsFillStarFill size={48} fill="gold" />
      <FaUser size={48} fill="blue" />
    </View>
  );
}

✅ Размер бандла: ~7-10 КБ (только 3 иконки + утилиты)
✅ Производительность IDE: Быстрый автокомплит (загружает только ~800-9000 иконок пака)

❌ Неправильное использование (Избегайте)

НЕ ПЫТАЙТЕСЬ импортировать из главной точки входа:

// ❌ НЕПРАВИЛЬНО: Это не работает - главная точка входа экспортирует только типы!
import { AiFillHeart } from 'react-native-icons-svg';

// ✅ ПРАВИЛЬНО: Импортируйте из конкретного пака
import { AiFillHeart } from 'react-native-icons-svg/ai';

НЕ ИМПОРТИРУЙТЕ всю библиотеку целиком:

// ❌ ПЛОХО: Это импортирует ВСЕ 43,125 иконок!
import * as Icons from 'react-native-icons-svg/ai';

function App() {
  return <Icons.AiFillHeart size={48} />;
}

❌ Размер бандла: ~687 МБ (все иконки включены)

📖 Свойства иконок

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

| Свойство | Тип | По умолчанию | Описание | | -------- | -------- | ------------ | ---------------------------------------- | | size | number | 24 | Размер иконки в пикселях | | fill | string | - | Цвет заливки иконки | | stroke | string | - | Цвет обводки иконки | | style | object | - | Дополнительные стили | | ... | - | - | Любые другие свойства react-native-svg |

⚠️ Важное изменение: В предыдущих версиях использовался параметр color для установки цвета иконки. Теперь он заменён на два отдельных параметра: fill (для цвета заливки) и stroke (для цвета обводки). Параметр color устарел и будет удалён в будущей версии.

Пример

<AiFillHeart size={32} fill="red" stroke="red" style={{ margin: 10 }} opacity={0.8} />

🎨 Доступные наборы иконок

Библиотека включает 43,125+ иконок из популярных наборов:

| Набор иконок | Префикс | Путь импорта | Примеры | Количество | | --------------------- | ------- | ------------ | --------------------------------- | ---------- | | Phosphor Icons | Pi | /pi | PiHeart, PiStar | 9,072 | | Tabler Icons | Tb | /tb | TbHome, TbUser | 5,754 | | Material Design Icons | Md | /md | MdHome, MdStar | 4,339 | | Game Icons | Gi | /gi | GiSword, GiShield | 4,038 | | Simple Icons | Si | /si | SiReact, SiTypescript | 3,274 | | Remix Icon | Ri | /ri | RiHome, RiUser | 3,020 | | Bootstrap Icons | Bs | /bs | BsFillStarFill, BsCheckCircle | 2,656 | | Lucide Icons | Lu | /lu | LuHome, LuUser | 1,637 | | Font Awesome | Fa | /fa | FaUser, FaHome | 1,611 | | Box Icons | Bi | /bi | BiHeart, BiStar | 1,634 | | Line Awesome | Lia | /lia | LiaHomeSolid, LiaUser | 1,544 | | Ionicons | Io | /io | IoHome, IoHeart | 1,357 | | Heroicons v2 | Hi2 | /hi2 | Hi2Home, Hi2User | 972 | | Ant Design Icons | Ai | /ai | AiFillHeart, AiOutlineUser | 831 | | CSS.gg | Cg | /cg | CgHome, CgUser | 704 | | Grommet Icons | Gr | /gr | GrHome, GrUser | 635 | | Heroicons v1 | Hi | /hi | HiHome, HiUser | 460 | | VS Code Icons | Vsc | /vsc | VscHome, VscFile | 466 | | IcoMoon Free | Im | /im | ImHome, ImUser | 415 | | Themify Icons | Tfi | /tfi | TfiHome, TfiUser | 352 | | Typicons | Ti | /ti | TiHome, TiUser | 336 | | Flat Color Icons | Fc | /fc | FcHome, FcIdea | 329 | | Radix Icons | Rx | /rx | RxHome, RxComponent | 318 | | Golang Icons | Go | /go | GoHome, GoGear | 317 | | Circum Icons | Ci | /ci | CiHome, CiUser | 288 | | Feather | Fi | /fi | FiHome, FiUser | 287 | | Weather Icons | Wi | /wi | WiDaySunny, WiRain | 219 | | Dev Icons | Di | /di | DiReact, DiJavascript | 192 | | Simple Line Icons | Sl | /sl | SlHome, SlUser | 189 |

Внимание: Все иконки должны импортироваться из путей конкретных паков (например, /ai, /bs). Главная точка входа экспортирует только типы.

🌲 Tree-Shaking

Эта библиотека полностью оптимизирована для tree-shaking. Современные сборщики (Metro, Webpack, Rollup) автоматически удалят неиспользуемые иконки из вашего бандла.

Как это работает:

Именованные экспорты: Каждая иконка экспортируется отдельно
Без побочных эффектов: Объявлено в package.json как "sideEffects": false
ES модули: Собрано в ESM формате для оптимального tree-shaking

Сравнение размеров бандла:

| Использование | Включено иконок | Размер бандла | | ---------------------- | --------------- | ------------- | | 1 иконка | 1 иконка | ~2-3 КБ | | 3 иконки | 3 иконки | ~7-10 КБ | | 10 иконок | 10 иконок | ~15-20 КБ | | import * as Icons... | ВСЕ 43,125 | ~687 МБ ⚠️ |

📚 Примеры

Базовый пример

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

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

С пользовательскими стилями

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

<AiFillStar
  size={32}
  fill="gold"
  style={{
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
  }}
/>;

Динамический выбор иконки

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

function FavoriteButton({ isFavorite }) {
  const Icon = isFavorite ? AiFillHeart : AiOutlineHeart;
  return <Icon size={24} fill={isFavorite ? 'red' : 'gray'} />;
}

🛠️ Разработка

Регенерация экспортов иконок

Если вы добавили новые иконки, регенерируйте индексный файл:

npm run generate-index
npm run prepare

⚠️ Важные замечания

✅ ПРАВИЛЬНО:

// ✅ Единственный правильный способ - импорт из конкретных паков
import { AiFillHeart, AiFillStar } from 'react-native-icons-svg/ai';
import { BsFillStarFill } from 'react-native-icons-svg/bs';

❌ НЕПРАВИЛЬНО:

// ❌ Это НЕ работает - главная точка входа экспортирует только типы!
import { AiFillHeart } from 'react-native-icons-svg';

// ❌ Не импортируйте всё
import * as Icons from 'react-native-icons-svg/ai';

📄 Лицензия

🙏 Благодарности

Эта библиотека включает иконки из следующих проектов:

Made with ❤️ using create-react-native-library

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

react-native-icons-svg

🌟 Features

🔍 Icon Browser

📦 Installation

🚀 Usage

✅ Correct Usage

❌ Incorrect Usage (Avoid)

📖 Icon Props

Example

🎨 Available Icon Packs

🌲 Tree-Shaking

How it works:

Bundle size comparison:

📚 Examples

Basic Example

With Custom Styles

Dynamic Icon Selection

🛠️ Development

Regenerate icon exports

📄 License

🙏 Credits

react-native-icons-svg (Русская версия)

🌟 Возможности

🔍 Браузер иконок

📦 Установка

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

✅ Правильное использование

❌ Неправильное использование (Избегайте)

📖 Свойства иконок

Пример

🎨 Доступные наборы иконок

🌲 Tree-Shaking

Как это работает:

Сравнение размеров бандла:

📚 Примеры

Базовый пример

С пользовательскими стилями

Динамический выбор иконки

🛠️ Разработка

Регенерация экспортов иконок

⚠️ Важные замечания

✅ ПРАВИЛЬНО:

❌ НЕПРАВИЛЬНО:

📄 Лицензия

🙏 Благодарности