oblador/react-native-vector-icons

Can't see Custom Icon(imported from local)

knightmate opened this issue · 3 comments

knightmate commented

ref-https://stackoverflow.com/questions/56574618/why-i-cant-see-custom-created-icomoon-icons-in-my-app#new-answer

I imported the TTF file from Icomoon's website (https://icomoon.io/app/#/select). However, when I use the imported icons in my application, they are not displaying properly. Interestingly, everything works fine when I use the fonts provided by Icomoon
it takes the space also onClick is working but icon is not visible

johnf commented

Can you share the code you are using to configure the font?

knightmate commented

@johnf
import { createIconSetFromFontello } from 'react-native-vector-icons'; import fontelloConfig from './config.json'; const Icon = createIconSetFromFontello(fontelloConfig); ... export default () => <Icon name="toad" size={80} color="#bf1313" />;
I have followed all the steps outlined in the article "Add Custom Icons to Your React Native Application" (https://medium.com/bam-tech/add-custom-icons-to-your-react-native-application-f039c244386c). When using internal icons with the same steps, it works as expected. However, when adding a custom icon, it's not displaying properly;
the space is being allocated but the icon itself isn't visible

johnf commented

@knightmate You are using the fontello instructions. Check here for the section for IcoMoon
https://github.com/oblador/react-native-vector-icons?tab=readme-ov-file#custom-fonts

3rd example