Icon showing wrong react-native-vector-icon (icomoon)

Question

I need to show SVG icons inside my application, I did the entire process of installing the react-native-vector-icons library and configuring icomon. Also, I went to the icomon website and created my font files. But when I use it, the application renders an icon different from the one I should be reloaded by the file.

config icomon

import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
import icoMoonConfig from '../../assets/customIcons/selection.json';

export default createIconSetFromIcoMoon(
  icoMoonConfig,
);

icon that should be loaded.

icon being loaded

My code

export function ItemMenuDropdown({ item }) {
  const navigation = useNavigation();

  return (
    <Container onPress={() => navigation.navigate(item.navigation)}>
      <Content>
        <CustomIcon name="pencil" size={normalize(18)} color="#F68B1F" />
        <Text>{item.item}</Text>
      </Content>
    </Container>
  )

I've looked for several solutions here on the site, but I haven't found one that works. Can someone help me?

Answer 1

I think the problem is in your selection.json file. It's either out of date or you're having some kind of cache problem. Maybe you want to try the same operation using this module.

react-icomoon