2

我从 Icomoon 工具创建了一个字体包，以便能够在我的 react-native 应用程序上使用它。黑白图标似乎加载得很好，但彩色图标在应用程序中被破坏并被迫为黑白。我正在执行以下操作来添加它，（我还在资源文件夹中的 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的矢量图标的文档中，没有太多关于它的信息。

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

4

2 回答 2

1

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

默认情况下，字体字形不能有超过一种颜色。使用 CSS，IcoMoon 将多个字形堆叠在一起以实现多色字形。因此，这些字形采用多个字符代码并且不能有连字。

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

正如消息所说，包含 css 以解决此问题，但它不能在 React native 中使用。

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

于 2020-09-24T13:08:39.390 回答
0

您可以使用从 Icomoon 获得的图标作为具有多种颜色的 SVG。

React-Icomoon 回购

具有多种颜色的 React-Icomoon（演示）

于 2022-02-19T08:48:52.480 回答