IcoMoon colored icons on react-native-vector-icons plugin not working properly - react-native

Question

I have created a font pack from Icomoon tool to be able to use it on my react-native app. Black & White icons seems to load just fine, but colored icons are broken and forced to be black & white while in the app.
I'm doing the following to add it, (I also added it manually on XCode inside Resources folder, it's everything linked there)
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
};
When I imported them in the page, the ones in color are loaded fine, although, it shows a "Multicolor" info next to each icon as if it was wrong to do or I have to handle it differently?
In the docs for vector-icons with icomoon, there's not much information about it.
Anyone has an idea on why this is happening? Thanks.

Answer 1

I'm having the same issue, It seems like your are only able to use a single color per icon when using icomoon + react-native-vector-icons. See this warning from the icomoon download page (press the "(i) Muticolor" text from your screenshot)
Font glyphs cannot have more than one color by default. Using CSS, IcoMoon stacks multiple glyphs on top of each other to implement multicolor glyphs. As a result, these glyphs take more than one character code and cannot have ligatures.
To avoid multicolor glyphs, re-import your SVG after changing all its colors to a single color.
As the message says, css is included to fix this issue but it can't be used in React native.
Your best bet is to either load it as an image or to create multiple icons as layer and in the code combine them on top of each other. Mimicking what the included style.css usally does

Answer 2

You can use the icons you get from Icomoon as SVG with multiple color.
React-Icomoon Repo
React-Icomoon with Multiple Color (Demo)