Векторна графіка

Для відображення іконок у застосунку можна використовувати зображення. Наприклад імпортувати файл з розширенням png, який підтримує прозорість. Утім для іконок використовувати векторні зображення набагато продуктивніше. Нижче наведено деякі способи доєднати до проєкту векторні іконки.

Expo Icons

Expo пропонує готову бібліотеку в якій є набір поширених векторних іконок. Якщо проєкт створювали за допомогою npx create-expo-app, то ця бібліотека уже встановлена. Спочатку обираємо іконку, яка нам сподобалась. Клацаємо на неї, копіюємо код імпорту і саму іконку і вставляємо в нашу програму.

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

<AntDesign name="pluscircleo" size={24} color="black" />

Пропси налаштування: name, size, color, backgroundColor, style. Ці іконки можуть мати проп onPress відтак налаштувати обробку натискання без додаткової обгортки.

App.js

import { StyleSheet, View } from "react-native";

import Ionicons from "@expo/vector-icons/Ionicons";

export default function App() {
  return (
    <View style={styles.container}>
      <Ionicons name="md-checkmark-circle" size={32} color="green" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
});

This part is under construction.....

Кастомні іконки зі шрифтів

Є можливість використовувати іконки

createIconSet

createIconSetFromIcoMoon

createIconSetFromFontello

Кастомні іконки

Використовувати наведені вище бібліотеки легко і зручно. Утім, якщо в нашому проєкті є іконки, яких немає в базі, то потрібно заверстати наш власний svg. Тоді потрібно використовувати інші бібліотеки. Наприклад react-native-svg

https://www.npmjs.com/package/react-native-svg

terminal

npm i react-native-svg

https://www.npmjs.com/package/react-native-ionicons

Посилання на офіційну документацію:

Expo Icons

Набір іконок від Expo

react-native-vector-icons

react-native-ionicons

react-native-svg