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 !
Related
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)} />
}
I have the following icon in my code:
<FontAwesomeIcon id="star" onClick={this.handleClick} icon={hollowstar} size="lg" />
I need the icon to change from hollowstar to solidstar onclick. How can this be accomplished?
You can do something like this:
import { faStar as fasFaStar } from '#fortawesome/free-solid-svg-icons';
import { faStar as farFaStar } from '#fortawesome/free-regular-svg-icons';
// ...
const [star, setStar] = useState(farFaStar);
// ...
<FontAwesomeIcon
onClick={() => {
setStar(fasFaStar);
}}
icon={star}
// Other props...
/>
So in the code we import the same star icon with different styles like described in the documentation here: https://github.com/FortAwesome/react-fontawesome#how-do-i-import-the-same-icon-from-two-different-styles.
Since the icon is just an object you can save it to the state and update the state to the other icon inside an onClick function.
For clarity, I've used a functional component here.
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 recently added FontAwesomeReact to my React site. I'm using the icons in a Sidebar component that displays on every page.
Page:
import React from 'react'
import Header from '../components/header'
import Sidebar from '../components/sidebar'
import Layout from '../components/layout'
import Footer from '../components/footer'
class IndexPage extends React.Component {
render() {
return (
<Header />
<Sidebar />
<Layout>
<p>Hello there is some content here </p>
</Layout>
<Footer />
)
}
}
Sidebar component:
import React from 'react'
import Menucard from '../components/menucard'
import { library } from '#fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
import { faInfoCircle, /*...*/, faCheck} from '#fortawesome/free-solid-svg-icons'
library.add(faInfoCircle,/*...*/,faCheck)
const clubAdminMenu = (
<div>
<h2>Club Admin</h2>
<ul>
<li className="pod">
<FontAwesomeIcon icon="user" pull="right" /> Manage Registrations
</li>
<li className="pod">
<a href="..."><FontAwesomeIcon ... /> ...<a>
</li>
...
</ul>
</div>
)
class Sidebar extends React.Component {
render() {
return (
<div className="Sidebar">
<Menucard content={clubAdminMenu} />
...
</div>
)
}
}
export default Sidebar
At first I assumed that <FontAwesomeIcon /> would be defined everywhere, since it's imported in <Sidebar /> and <Sidebar /> is on every page. Clearly I was wrong, the icons did not show up on any page unless I explicitly included import { FontAwesomeIcon } from '#fortawesome/react-fontawesome' on every single page.
But when I include that import on every page, the compiler warns me that 'FontAwesomeIcon' is defined but never used about a zillion times (once on every page that doesn't include <FontAwesomeIcon /> in its body, even if it is included in <Sidebar />) I get why it's saying this, but if I remove the import, the icons do not render in the sidebar on that page.
These two things seem to contradict each other. Am I missing something? Is there a better way to do this?
This is the official documentation for Font Awesome v5.15 https://fontawesome.com/v5.15/how-to-use/on-the-web/using-with/react
It says that you need to include the below code in App.js (Not necessarily, but if you want to use font awesome icons in a lot of files, it is a good idea to make it Global)
import { library } from "#fortawesome/fontawesome-svg-core";
import { fab } from "#fortawesome/free-brands-svg-icons"; // To use branded icons such as Google, Github, etc.
import {
faCheckSquare,
faCoffee,
faInfoCircle,
// All other icons (except fab) that you want to use MUST be declared here
} from "#fortawesome/free-solid-svg-icons";
library.add(fab, faCheckSquare, faCoffee, faInfoCircle); // All icons imported must be added to the library
And then in every file where you want to use Font Awesome icons, you must include
import { FontAwesomeIcon } from "#fortawesome/react-fontawesome";
And then to use the Font Awesome icons, you need to do the following:
<FontAwesomeIcon icon={[iconType, icon]} />
where iconType = 'fab', 'fas', etc.
and icon = 'github', 'coffee', etc.
<FontAwesomeIcon icon={['fab', 'google']} />
<FontAwesomeIcon icon={['fas', 'coffee']} />
When you import
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
You need to call
<FontAwesomeIcon />
The reason you get that message because you are just importing it but you never called it. So do as I suggested above
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">