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>
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
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 trying to add svg as a background image and i am using a React-Native-Svg to generate my svg and I've been trying to add it onto
<ImageBackground source{{'<svg>...'}} />
But I cant manage to get a anywhere with it
If anybody could give pointers i would really appreciate it
As the documentation says you need to import the .svg file inside de Component:
import Logo from './logo.svg';
You can then use your image as a component:
<Logo width={120} height={40} />
From: https://github.com/react-native-community/react-native-svg#use-with-svg-files
Environment info
React native info output:
"react": "16.8.6",
"react-native": "0.60.4"
Library version: 1.2.3
Steps To Reproduce
Create a fresh project using react-native-cli.
Bring in an SVG file into the src folder of the project (I downloaded and used the homer simpson image mentioned in the documentation of react-native-svg-uri for the test ).
Import the svg as import MySVG from './mysvg.svg';
Pass MySVG into svgXmlData property of SvgUri component
Expected behaviour
The image should render on screen
Reproducible sample code
import React from 'react';
import SvgUri from 'react-native-svg-uri';
import MySVG from './mysvg.svg';
const MyComponent = () => {
return (
<>
<SvgUri
svgXmlData={MySVG}
width="25"
height="25"
/>
</>
);
};
export default MyComponent;
Error Message
You can try this Direct Path Declaration
<SvgUri
width="25"
height="25"
source={require('./mysvg.svg')} />
If you have a svg file declared and not using an uri, I would recommend to use the react-native-svg project from the react-native-community (https://github.com/react-native-community/react-native-svg)
With this, you turn your svg file to a React Stateless Component (the translation is quite straightforward) and you can use it as a standard React component.
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.