Can I import react-native-vector-icons/font-awesome and react-native-vector-icons/Ionicons on same screen?
Basically I want to use both font-awesome and Ionicons icons on same screen for different icons?
Example-
import ActionButton from 'react-native-action-button';
import Icon from 'react-native-vector-icons/font-awesome';
import Icon from 'react-native-vector-icons/Ionicons';
Yes, you can. Because FontAwesome and Ionicons are exported as defaults, you can import them with any name, like so
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
import IonIcon from 'react-native-vector-icons/Ionicons';
and in your render() method use like
<FontAwesomeIcon name="github" size={16} color="red">
<IonIcon name="github" size={16} color="blue">
Related
I have installed React Native Vector Icons, I have changed the android/app/build.gradle adding apply from: "../../node_modules/react-native-vector-icons/fonts.gradle".
When I try to import icons in the file (for example):
import React from 'react';
import {StatusBar, StyleSheet, Text, FlatList, View, TextInput, Button} from 'react-native';
import { Ionicons } from "react-native-vector-icons/MaterialIcons";
const HomeScreen = () => {
return (
<View style={styles.page}>
<Ionicons name="ios-camera-reverse" />
</View>
);
};
export default HomeScreen;
then I got an error (screen):
I have installed React Native Vector Icons, I have changed the android/app/build.gradle adding apply from: "../../node_modules/react-native-vector-icons/fonts.gradle".
Try to change Import:
import Ionicons from "react-native-vector-icons/MaterialIcons";
check default import here: https://github.com/oblador/react-native-vector-icons/blob/master/MaterialIcons.js
Hi there hope someone can help, using fontawesome 6 with typescript e.g
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
import { faClock } from '#fortawesome/pro-light-svg-icons';
then using the icon like so:
<FontAwesomeIcon icon={faClock} fixedWidth />
if i try this:
<FontAwesomeIcon icon="fa-clock fa-border" fixedWidth />
it doesnt match the expected icon props of FontAwesomeIcon
in the documentation it mentions border styles e.g. fa-border-left and fa-border-color. My question is can i use these with the icon component or do i have to use something like in the example e.g.
<i class="fa-solid fa-cutlery"></i>
Thanks for the Help !
This question already has answers here:
import icons dynamically react fontawesome
(5 answers)
Closed 11 months ago.
I'm trying to use font awesome based on variable.
{var icon = 'FaFolder'}
<FontAwesomeIcon icon={(icon)} />
This is the error: Could not find icon {prefix: "fas", iconName: "faFolder"}
Of course I'm importing everything, and when I hardcoded the string instead of the var it works perfect.
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
import { FaFolder } from '#fortawesome/free-solid-svg-icons'
I know that if i refer the var to the FaFolder I'm importing like this
var icon = FaFolder
it will work but I have more than 10 icons I'm using and staring refer each one it is not efficient.
Any one knows how can I do it?
To make it work you have two options:
Option 1: Import font-awesome icons from CDN and use them not in the react component (this will allow you to store the icon name in the db and than you can add dynamically a className to <i> tags
Option 2: call the full icon name in an array: <FontAwesomeIcon icon={["fab", "github"]} />
Option 3: You have to pre-import in you index.js ALL the icons you need in your whole project in your index.js or App.js and then you can use them by retrieving their names from the db.
//App.js
//....
//React imports
import { library } from '#fortawesome/fontawesome-svg-core' //allows later to just use icon name to render-them
import { fab } from '#fortawesome/free-brands-svg-icons'
import { faCheckSquare, faCoffee } from '#fortawesome/free-solid-svg-icons'
library.add(fab, faCheckSquare, faCoffee)
//Other_file.js
import React from 'react'
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
export const Beverage = () => (
<div>
<FontAwesomeIcon icon="check-square" /> //Put here your icon string
Your <FontAwesomeIcon icon="coffee" /> is hot and ready!
</div>
)
Try like this
{var icon = ['fa','folder']}
<FontAwesomeIcon icon={icon} />
or
<FontAwesomeIcon icon={['fa','folder']} />
Yeah, your problem is that FaFolder being imported isn't a string. It's an object. You could consider adding FaFolder to state or importing it in the file you'll use it and using it instead. Something like this:
import React from 'react'
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
import { FaFolder } from '#fortawesome/free-solid-svg-icons'
export default function Component(props) {
let icon = FaFolder;
return <FontAwesomeIcon icon={(icon)} />
}
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
import '#fortawesome/fontawesome-free-solid';
import '#fortawesome/free-brands-svg-icons';
In rendering code:
<FontAwesomeIcon icon={'facebook'} />
<FontAwesomeIcon icon={['fab','facebook']} />
<FontAwesomeIcon icon={['fab','facebook-f']} />
Nothing works.
I have the following errors:
backend.js:6 Could not find icon {prefix: "fab", iconName: "facebook"}
in FontAwesomeIcon (created by MyView)
in DashboardView (created by Router.Consumer)
in Router.Consumer (created by Route)
in Route
What am I missing?
I saw someone's advice to import specific objects like -
import { faFacebookF } from '#fortawesome/free-brands-svg-icons'
from here Font Awesome 5 use social/brand icons in React (and it's not a duplicate).
But I don't want to import specific objects, because my users should be able to use any icons, and it's specified in the model.
It's also unclear how these icons all work.
I had to change the import to:
import { library } from '#fortawesome/fontawesome-svg-core';
import { fab } from '#fortawesome/free-brands-svg-icons';
and add the following code:
library.add(fab);
After these changes everything started working.
I want to import two modules having same name i.e
import {Input, Icon} from 'native-base'
and
import {Input, Button} from 'react-native-elements'
How can I import and use both of them in my JSX? is it possible?
You can use as when importing
import {Input as InputBase, Icon} from 'native-base'
import {Input, Button} from 'react-native-elements'
Yes you can use import as:
import {Input as NativeBaseInput, Icon } from 'native-base'
import {Input, Button} from 'react-native-elements'