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)} />
}
Related
Trying to use FontAwesome icons on React but I am having some issues on importing the files correctly.
First I installed some dependencies and I am now able to import the component as follow
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
import { faTrash } from "#fortawesome/free-solid-svg-icons";
and use it (succesfully) as
<FontAwesomeIcon icon={faTrash} />
However, the icon I would like to use is this one ( icon ) but I can't seem to be able to actually import it. If I try import { faThin } from "#fortawesome/free-solid-svg-icons"; it doesn't work and if I try import { faThin } from "#fortawesome/free-thin-svg-icons"; it doesn't neither.
Any ideas?
That font is part of the light package (fa-light fa-trash), so you will need:
#fortawesome/pro-light-svg-icons
and a subscription to pro.
I'm attempting to add an SVG to a React app (built with create-react-app). When I try to add it as a component, I get an error like this:
InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided ('/static/media/logo.8d229b2c.svg') is not a valid name.
What am I missing?
Code:
import React from 'react';
import Logo from '../img/logo.svg';
const Header = () => {
return (
<div>
<Logo />
</div>
)
}
export default Header;
You can import it this way:
import { ReactComponent as Logo } from '../img/logo.svg';
as said in CRA (create-react-app) documentation
an render it the way you want:
import React from 'react';
import { ReactComponent as Logo } from '../img/logo.svg';
const Header = () => {
return (
<div>
<Logo />
</div>
)
}
And also, if it's not necessary to render it as a component, you could just render your svg as an image this way:
import React from 'react';
import logo from '../img/logo.svg';
const Header = () => {
return (
<div>
<img src={logo} alt="logo"/>
</div>
)
}
export default Header;
You need to import the component using this syntax:
import { ReactComponent as Logo } from '../img/logo.svg';
Using the curly braces and ReactComponent is necessary - they tell React that you want to build a component with the SVG.
I only found this because of a Dan Abramov reply to a create-react-app issue. The link he posted in his comment no longer works, but it's still mentioned in the docs.
https://github.com/facebook/create-react-app/issues/5293
https://create-react-app.dev/docs/adding-images-fonts-and-files/
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 a different set of SVG icons based on my Branding variable.
I try something like this :
import { BRANDING } from 'BrandingBuilder';
import {`${BRANDING}-icons.svg`};
But I know React didn't support to import a {variable}. Is there a workaround ?
According to the React Docs:
You can
also import SVGs directly as React components. You can use either of
the two approaches. In your code it would look like this:
import { BRANDING } from 'BrandingBuilder';
import { ReactComponent as Logo } from `${BRANDING}-icons.svg`;
const App = () => (
<div>
{/* Logo is an actual React component */}
<Logo />
</div>
);
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