I'm loading an SVG in a react app. The SVG references an external style sheet.
If I move the SVG out of the JSX and into the index.html, the SVG uses the defined css class.
If I use a a library such as react-svg, the svg is loading the external css class in JSX.
Why does the SVG not load the external CSS when using the SVG in JSX?
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import ReactSVG from 'react-svg'
class App extends Component {
render() {
return (
<object data={logo} className="App-logo" type="image/svg+xml"></object>
);
}
}
export default App;
<?xml-stylesheet type="text/css" href="./App.css" ?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
<g class='svgTestFill'>
<path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 ..."/>
<circle cx="420.9" cy="296.5" r="45.7"/>
<path d="M520.5 78.1z"/>
</g>
</svg>
This should render the logo with a red fill. I also do not want to use the SVG inline. I have to import the SVG as an object.
After inspecting network requests, the CSS file I'm referencing in the SVG is returned from the create-react app as an HTML page, not CSS. Maybe this is the problem?
This turns out is an issues with a crate react app. If using a relative path in the SVG, the request to the external sheet will be in the static/media directory. If the path to the external css sheet in absolute, this works.
Related
For a website using NextJS and Sanity.io,
I am importing an image locally
import large_logo from '../../assets/logo-large-1200x630.svg
and am calling it inside an img tag as src
<img src={large_logo}/>
However, the image is broken and not displayed.
The HTML is rendered as
<img src="[object Object]">
The only solution to this problem was to call the src of the "object"
<img src={large_logo.src}/>
However vanilla React does not require us to call the src.
Does importing not work when using NextJS and Sanity?
For Next.js you have to do something like this:
/* import Image component */
import Image from 'next/image';
/* import the required svg file */
import large_logo from '../../assets/logo-large-1200x630.svg
and then in JSX
<Image src={large_logo} />
When you are using Next.js and wanna render an image that the size is more than 40*40(pixels) need to import the <Image /> component from next/image.
That component optimize your image and render in your Application. So follow the example below to help yourself..
import Image from 'next/image';
import large_logo from '../../public/logo-large-1200x630.svg
inside your component you can add this code snipet for your image
<Image src={large_logo} alt="logo" width={200} height={100} quality={100} />
First of all you need to change the image directory of the image and put it in your public directory of your App, cause this is the default behaviour that Next.js needs for the images.
Inside your component you need to pass the src value, alt value and usually height - width prop or layout prop.
You can also need the official documentation for the of Next.js : https://nextjs.org/docs/api-reference/next/image
This is the svg and below is a picture of the code. I use styled components. That is why my img tag is Image.
It's only displaying the alt text. I also use React
For adding SVGs in React you need to use import/require.
You can import a file right in a JavaScript module. This tells webpack
to include that file in the bundle. Unlike CSS imports, importing a
file gives you a string value. This value is the final path you can
reference in your code, e.g. as the src attribute of an image or the
href of a link to a PDF.
import React from 'react';
import logo from './logo.png'; // Tell webpack this JS file uses this image
console.log(logo); // /logo.84287d09.png
function Header() {
// Import result is the URL of your image
return <img src={logo} alt="Logo" />;
}
export default Header;
I'm having a problem with importing SVG files in React JS.
import { ReactComponent as Logo} from '../logo.svg'
i don't know why but in some components <Logo /> will render correctly
while in other components it doesn't show, the SVG is there when i use inspect and it does take the space it needs but the SVG is blank / empty.
anyone else encountered this issue?
Try:
import { default as logo } from '../logo.svg';
and use as source in a node of type img, like this:
<img src={logo} />
I had the same exact issue and wrapping the logo component in an svg tag or div made it render on to the screen for me. I can also change the SVG color by setting it from the logo as well.
import { ReactComponent as Logo} from '../logo.svg'
<svg><Logo fill="blue" width="100%" height="100%" /></svg>
// or...
<div><Logo fill="blue" width="100%" height="100%" /></div>
Without the <svg> or <div> tag wrapped around it, it was rendering a blank image, taking up the space and all but no visuals. Once I added the wrapper tag around it, it worked. I like this approach since you can dynamically change the SVG styling based on user input.
I had same problem, for some it was how i imported them so I resolved this by using:
import {ReactComponent as Icon} from 'pathtoyourfile.svg
then use as:
<Icon />
Other times however, and I have fallen foul to this a few times, SVG's often have similar class and id names, so if you check the file you might see clip0, image0, pattern0 etc. If you have multiple svg's good chance the ID's and Class names are clashing and are overriding each other. For me the easiest solution was to change the naming convention manually, not sure if a more automated solution exists?
You could do it like so
import React from 'react';
import logo from './logo.png'; // Tell webpack this JS file uses this image
console.log(logo); // /logo.84287d09.png
function Header() {
// Import result is the URL of your image
return <img src={logo} alt="Logo" />;
}
export default Header;
I checked, only create-react-app could use SVG as a component
https://create-react-app.dev/docs/adding-images-fonts-and-files/#adding-svgs
Note: this feature is available with react-scripts#2.0.0 and higher,
and react#16.3.0 and higher.
I am using React version 16.8.6. I am trying to load some SVG images in my application, But there is a 1-second delay before the image appears in dom.
Here is how I load svg image
import menuIcon from 'public/images/menu_icon.svg';
<img src={menuIcon} />
Please find the gif link that shows the loading delay issue.
https://ibb.co/jH35S38
PS. This happens in production only.
I had the same problem, i found the article below which says that you can use SVGs as component and because the image is not loaded as a separate file there is no delay.
It works for me.
https://blog.logrocket.com/how-to-use-svgs-in-react/
import React from 'react';
import {ReactComponent as ReactLogo} from './logo.svg';
const App = () => {
return (
<div className="App">
<ReactLogo />
</div>
);
}
export default App;
I am using SvgIcon in a react app from material-ui https://material-ui.com/api/svg-icon/. All examples in the document are <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />. I don't know what it is. How can I use this component to render a svg from external file?
I have checked this post How to use an SVG file in a SvgIcon in Material-UI but it doesn't give an answer to load external files.
There is no way to use Path to load external svg. You should use <img /> inside de <Icon> according to this answer in github:
In the '#Christos-Lytras' answer there is an example on how to do it
You may import svg icon as a react component and use this component wrapped inside the SvgIcon component:
import { ReactComponent as Car } from './icons/car.svg'
...
<SvgIcon>
<Car />
</SvgIcon>