search

oblador / react-native-vector-icons

Customizable Icons for React Native with support for image source and full styling.
https://oblador.github.io/react-native-vector-icons/
MIT License
17.31k stars 2.12k forks source link

Can't see Custom Icon(imported from local) #1607

Closed knightmate closed 1 month ago

knightmate commented 3 months ago

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 1 month ago

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

knightmate commented 1 month ago

@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 1 month ago

@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