I'm trying to use font-awesome icons in a react native app, therefore I installed it and imported it using react-native-vector-icons :
import Icon from "react-native-vector-icons/FontAwesome";
.....
<Icon name="map-pin" />
however I don't know where to find the name of the icons, I browsed in the font awesome web site, found some icons, but when I tried to use them, it doesn't work for example in their website this icon's name is abacus, however, when I use it in my app, I get a warning and the icon doesn't display.
You can get the icon names from here https://expo.github.io/vector-icons/
You can use https://oblador.github.io/react-native-vector-icons/ to find the icon names. It has all the icons in the react-native-vector-icons library.
As you said, you can get the names from the official FontAwesome Webiste, but you need to be careful. There are regular icons and pro icons. The pro icons are marked with a small blue banner on the right top. By default, only the free/regular icons are available in the react-native-vector-icons package.
Regular Icon:
Pro Icon
As you can see, the abacus icon is a pro icon and therefore not available in the free tier.
Related
I am making an app using Compose for Desktop. I am trying to include a simple file download Icon that I know is included in the lengthy set of Material Icons, however it is not available under Icons.Filled. Some of the icons included, in my opinion, are nowhere near as commonly used as download... go figure.
I know that Compose for Android has a dependency for an extended set of Material Icons. I tried adding that dependency to my Desktop app, but it threw errors at me.
For now I have added a Feather Icons set courtesy of DevSrSouza, but I would like to know if there is a way to access the Material Icons extension in Compose for Desktop? Thanks.
I guess you have already found the answer but I also had this problem for long time, so here is a right dependency for compose desktop: "org.jetbrains.compose.material:material-icons-extended-desktop:$compose_version"
I am writing a simple react-native app and obv I need some icons. I use Expo Vector Icons because I was told that using these icons is free and I am not violating any rights? Is there any other icons which I can use for free or paid, without worrying that I am breaching some legal rights?
expo vector icons is pretty good, as it contains many other icon packs inside it like ionicons, antdesign, and feather. the full docs for using specific packs, customization are here: https://docs.expo.dev/guides/icons/
I would like to know how to import vector icon I've created or from directory in pc by using react native?
I believe that you're trying to use custom font icons. I've built a library to make it easy.
https://github.com/WrathChaos/react-native-custom-icon
Usage:
import MyIcon from "react-native-custom-icon";
import IcomoonConfig from "./assets/icomoon/selection.json";
<MyIcon name="fireworks" color="red" size={50} config={IcomoonConfig} />
You need to install react-native-vector-icons. It's a must dependency. You can put your svg icons to https://icomoon.io/ and get your .ttf font icons from there. It comes with selection.json and icomoon.ttf files. All you need to do is; put these files on your project and look at the above usage example.
If you cannot make it, I wrote a Step By Step Guide
<Drawer some_styles>
<View >
<Hamburger active={this.state.menuActive}
onPress={this._handleMenuButtonPress}/>
</View>
</Drawer>
I have to use .svg image as icon of hamburger instead of predefined icon.How to set our own image to hamburger. Thanks in advance.
I have used this article to help me include custom icons. I will briefly summarise the steps:
Install react-native-vector-icons, this is a library which allows you to add custom icons alongside their standard built-in icons (which are already great btw).
Convert your SVG icon(s) to a font (.tff file), Fontello or Icomoon are online tools supported by rn-vector-icons which allow you to do just that
Add that font to your project
Create a small config file where you tell rn-vector-icons which font needs to be linked
I have added many font-family and style into my asset folder in React-Native project. It's working fine in simulator, emulator, and iOS device. But some font won't work and not display in Android device.
I have try with react-native link and check the asset folder in Android app directory, nothing missing.
Anyone help please.
I might have a solution for this. I had the same problem, the fonts were visible in my emulator, the font files are located under 'android/src/main/assets/fonts' and yet it wasn't visible on my physical android device (Huawei Honor 8X).
I found out that the problem was with my physical device's Font settings. To fix this, on your phone, go to
Settings -> Display -> Text Style -> Default
Settings screen : Go to Display
Display settings : Look for Text Style, Make sure it is set to default as seen in the pic
Select Default here : Now your custom app fonts should work
Please Note that these settings might differ as per your device. I've mentioned the steps for my phone.
Always use the default Text Style to render custom fonts in your app.
Nowadays, phones like the OnePlus etc. have their own custom fonts and I think this is interfering with custom fonts defined in Applications.
Hope this helps.
Following this article worked for me. The name of the font file name is important to get it working on both platforms.
I had multiple font files with different weights (Circular Std Bold, Circular Std Medium etc..) for these to work on android I dynamically changed the font family style to this name to change the weight.
The font weight style on android didn't work for me.
the problem is with devices that have custom font style like huawei devices. I hope there be a solution for this to not force the user to change it's device font style because of our app.
My font family changes when I connect to my android device but I finally figured out how to fix it. If font weight is set then it changes the font on my device to its default font. After I removed font weight my android devices default font isn't applied anymore.
fontFamily its not work in inlinstyle you must change from
<Text style={{fontFamily:'SantPro'}} />
to
Text style={styles.text}
const styles = StyleSheet.create({
text: {
fontFamily:'SantPro',
},
})