react-native-vector-icons插件上的IcoMoon彩色图标无法正常工作

Question

我已经从Icomoon工具创建了一个字体包，以便能够在我的react-native应用程序上使用它。黑白图标似乎可以很好地加载，但是彩色图标在应用程序中会损坏并被迫变为黑白。 我正在执行以下操作来添加它（（我还手动将它添加到了Resources文件夹中的XCode上，所有内容都链接在那里）

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的矢量图标的docs中，关于它的信息不多。

任何人都知道为什么会这样吗？谢谢。

Answer 1

我遇到了同样的问题，当您使用icomoon + react-native-vector-icons时，似乎每个图标只能使用一种颜色。从icomoon下载页面上看到此警告（按屏幕快照中的“（i）杂色”文字）

字体字形在默认情况下不能超过一种颜色。通过使用CSS，IcoMoon可以将多个字形相互堆叠以实现多色字形。结果，这些字形使用了多个字符代码，并且没有连字。

为避免使用多色字形，请在将所有颜色更改为单一颜色后重新导入SVG。

如消息所示，css已包括在内，可解决此问题，但不能在React native中使用。

您最好的选择是将其作为图像加载或创建多个图标作为图层，并在代码中将它们相互叠加。模仿所包含的style.css通常会做什么