Цветные значки IcoMoon на плагине response-native-vector-icons не работают должным образом

Question

Я создал пакет шрифтов из инструмента Icomoon, чтобы иметь возможность использовать его в своем приложении реакции-родной. Черно-белые значки, кажется, загружаются просто отлично, но цветные значки ломаются и становятся черно-белыми, пока находятся в приложении. Я делаю следующее, чтобы добавить его (я также добавил его вручную на XCode внутри папки Resources, там все связано)

import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
import icomoonConfig from './../selection.json';
const Icomoon = createIconSetFromIcoMoon(icomoonConfig, 'icomoon', 'icomoon.ttf');

const icomoon = {
    'book': [30],
    'book-color': [30],
    'find': [30],
    'find-color': [30],
    'match': [30],
    'match-color': [30],
    'megaphone': [30],
    'megaphone-color': [30]
}


const icomoonLoaded = new Promise((resolve, reject) => {
    Promise.all(
        Object.keys(icomoon).map(iconName =>
            Icomoon.getImageSource(
                iconName.replace(replaceSuffixPattern, ''),
                icomoon[iconName][0],
                icomoon[iconName][1]
            )
        ),
    ).then(sources => {
        Object.keys(icomoon)
            .forEach((iconName, idx) => (
                iconsMap[iconName] = sources[idx]
            ));
        resolve(true);
    });
});

export {
    iconsMap,
    icomoonLoaded
};

Когда я импортирую их на страницу, цветные загружаются нормально, хотя рядом с каждым значком отображается информация "Многоцветный", как будто это неправильно, или мне приходится обращаться с этим по-другому?

В документах для векторных иконок с icomoon об этом не так много информации.

У кого-нибудь есть идея, почему это происходит? Благодарю.

Answer 1

У меня такая же проблема. Похоже, вы можете использовать только один цвет для каждого значка при использовании icomoon + react-native-vector-icons. См. Это предупреждение на странице загрузки icomoon (нажмите текст "(i) Muticolor" на скриншоте)

По умолчанию глифы шрифта не могут иметь более одного цвета. Используя CSS, IcoMoon складывает несколько глифов друг на друга для реализации многоцветных глифов. В результате эти глифы принимают более одного кода символа и не могут иметь лигатуры.

Чтобы избежать появления многоцветных глифов, повторно импортируйте SVG-файл после изменения всех его цветов на один цвет.

Как говорится в сообщении, css включен для решения этой проблемы, но его нельзя использовать в React native.

Лучше всего либо загрузить его как изображение, либо создать несколько значков в виде слоя и в коде объединить их друг над другом. Подражая тому, что включено style.css обычно делает

Answer 2

Вы можете использовать значки, которые вы получаете от Icomoon, в виде SVG с несколькими цветами.

Репозиторий React-Icomoon

React-Icomoon с несколькими цветами (демо)