colors.js
import * as React from 'react'
export default colors = {
blue: "#4D8ADA",
blue1: "#FAFCFF",
blue2: "#D5E2F2",
blue3: "#DEECFE",
black: "#1E1E1E",
blackOpacity80: "rgba(30,30,30,0.8)",
blackOpacity20: "rgba(30,30,30,0.2)",
white: "white",
red: "#EE6161"
}
Icon/index.js
import { createIconSetFromFontello } from "@expo/vector-icons";
import {fontelloconfig} from '../../assets/fonts/fontIcon/config.json'
import * as React from 'react'
export default Icon = (name,size,color) =>{
return (
createIconSetFromFontello(fontelloconfig, 'fonticons')
)
}
Добавим файл с перечнем цветов, которые будут использоваться в проекте.
Из файла src/assets/styles/colors.js экспортируй по умолчанию объект.
В этом объекте определи цвета: blue: #4D8ADA, blue1: #FAFCFF, blue2: #D5E2F2, blue3: #DEECFE, black: #1E1E1E,
blackOpacity80: rgba(30, 30, 30, 0.8), blackOpacity20: rgba(30, 30, 30, 0.2), white: white,red: #EE6161.
Добавим компонент иконки: src/components/Icon/index.js. Для этого используем библиотеку @expo/vector-icons.
Импортируем метод createIconSetFromFontello и вызовем его, что бы получить компонент векторной иконки.
Именно этот компонент и надо вернуть из компонента Icon, пробросив в него пропсы name, size, color.
При вызове метода createIconSetFromFontello передай первый аргумент - fontelloConfig из src/assets/fonts/fontIcon/config.json.
Вторым аргументом передай строку fonticons.
