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>
);
Related
I am trying to import an SVG-File as a React Component. This works fine in other files I am working on. But in the one I have a problem with, instead of the correct image, another image is displayed.
import React from 'react';
import './news-detail.style.css';
import Header from '../header/header.component';
import {useNavigate} from "react-router-dom";
import CustomButton from '../custom-button/custom-button.component';
import { ReactComponent as Img } from './newsdetail.svg';
const NewsDetail = props => {
const navigate = useNavigate();
return <div className='news-detail'>
<Header/>
<h1 className="pageheadline">News</h1>
<CustomButton onClick={() => navigate(-1)}>Back</CustomButton>
<Img className="headerimg"/>
</div>;
};
export default NewsDetail;
This is my code. The newsdetail.svg is not displayed. Instead, a component from my Header is displayed as the image.
Thanks in advance.
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'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/
I am trying to use react-avatar-editor (https://www.npmjs.com/package/react-avatar-editor ) I have installed and import the component but I didn't get the button upload
Here is my simple component wher I used the Avatar Editor
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Nav from "./Nav";
import AvatarEditor from 'react-avatar-editor'
export default class EditProfile extends Component {
render () {
return (
<div>
<Nav logoUrl="logo_white.svg" color="#D41F36"/>
hello there
<AvatarEditor
image="/imgs/A066.jpg"
width={250}
height={250}
border={50}
color={[255, 255, 255, 0.6]} // RGBA
scale={1.5}
rotate={0}
/>
</div>
)
}
}
I should have this screen
but I had this
please help out on this ?
react-avatar-editor doesn't handle the image selection. It deals specifically with the image crop, resizing and rotation of a given image. So you need to code something to get the image and pass to react-avatar-editor component.
You can check how to do it here https://github.com/mosch/react-avatar-editor/blob/master/docs/App.jsx
I'm trying to get familiar with react and web development. And made my first steps.
Right now I'm using react with react-bootstrap & css modules.
In the main.html I had to include the bootstrap.css file.
I would like to replace my searchbar with react-autosuggest
It seems like bootstrap is breaking the style of react-autosuggest. Is it possible to combine both? Or is it a bad practice?
That is my code where I tried to use both searchbars:
import React, {Component} from 'react';
import styles from './App.css';
import Search from "./Search/Search"
import SearchAuto from "./SearchAuto/SearchAuto"
class App extends Component {
render() {
return (
<div>
<div className={styles.App}>
<h1>Title</h1>
<Search onSearch={this.searchForAddress}/>
</div>
<SearchAuto onSearch={this.searchForAddress}/>
</div>
);
}
}
export default App;
Any help would be greatly appreciated!