

Note: use iconStyle for margins or expect unstable behaviour.īorder radius of the button, set to 0 to disable.Ī function called when the button is pressed.Ĭonvenient way to plug this in into other components that rely on bitmap images rather than scalable vector icons. Styles applied to the icon only, good for setting margins or a different color. Text and icon color, use iconStyle or nest a Text component if you need different colors. Import Icon from 'react-native-vector-icons/FontAwesome' const myButton = ( Īny Text, TouchableHighlight or TouchableWithoutFeedback property in addition to these: Prop
#Free ios vector icons android#
NOTE: On android Text doesn't currently support border* styles, to circumvent this simply wrap your Icon with a View.īy combining some of these you can create for example :Ī convenience component for creating buttons with an icon on the left side. Since Icon builds on top of the Text component, most style properties will work as expected, you might find it useful to play around with these: Usage: const isNameValid = Icon.hasIcon(name) Usage: const glyphMap = Icon.getRawGlyphMap()Ĭhecks if the name is valid in current icon set. Returns the raw glyph map of the icon set. Usage: const source = Icon.getImageSourceSync(name, size, color) Usage: const source = await Icon.getImageSource(name, size, color) Returns a promise that resolving to the source of a bitmap version of the icon for use with Image component et al. Usage: const fontFamily = Icon.getFontFamily() Returns the font family that is currently used to retrieve icons as text. What icon to show, see Icon Explorer app or one of the links above. Size of the icon, can also be passed as fontSize in the style object. Import Icon from 'react-native-vector-icons/FontAwesome' const myIcon = PropertiesĪny Text property and the following: Prop In your webpack configuration file, add a section to handle ttf files using url-loader (or file-loader) Note: you need to recompile your project after adding new fonts.

Make sure your app is checked under "Add to targets" and that "Create folder references" is checked.

Browse to node_modules/react-native-vector-icons and drag the folder Fonts to your project in Xcode.List of all available fonts to copy & paste in ist Edit ist and add a property called Fonts provided by application (or UIAppFonts if Xcode won't autocomplete/not using Xcode) and type in the files you just added.Not familiar with Xcode? Try this article Make sure your app is checked under "Add to targets" and that "Create groups" is checked if you add the whole folder. Browse to node_modules/react-native-vector-icons and drag the folder Fonts (or just the ones you want) to your project in Xcode.If you want to use any of the bundled icons, you need to add the icon fonts to your Xcode project. If you intend to use FontAwesome 5, check out this guide to get you started.For each platform (iOS/Android/Windows) you plan to use, follow one of the options for the corresponding platform.
#Free ios vector icons install#

