问题
I am currently doing this:
class Checked extends React.Component {
render() {
return (
<svg width="24" fill="#00ea00" height="24" viewBox="0 0 24 24">
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
</svg>
);
}
}
But I would like to be doing something like this:
import imgTable from '../img/catering_table.svg'
class Checked extends React.Component {
render() {
return imgTable;
}
}
Why does this not work? Am I returning the variable here and not the actual contents? I would have thought the two are equivalent.
PS: Webpack is set up correctly, I am using imports somewhere else in that file, so it's not that. (I am using GatsbyJS here by the way)
回答1:
Option 1: Wrap with a stateless component:
const ImgTable = () => (
<svg width="24" fill="#00ea00" height="24" viewBox="0 0 24 24">
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
</svg>
);
export default ImgTable;
Now you can import it as a component:
import ImgTable from '../img/ImgTable'
class Checked extends React.Component {
render() {
return <ImgTable />;
}
}
Option 2: Use dangerouslySetInnerHTML (notice the name). However, you'll need to convert the SVG to string on import using something like babel-plugin-transform-svg-import-to-string:
import imgTable from '../img/catering_table.svg' // this will return a string
class Checked extends React.Component {
render() {
return <div dangerouslySetInnerHTML={{__html: imgTable }} />;
}
}
回答2:
babel-plugin-inline-react-svg
is a plugin that allows you do exactly what you hinted at in your question. It simply creates a react component for every node in the svg file. Then it wraps the the entire component tree with a root element that you can easily name.
Import you svg like this import SampleSVG from './sample.svg';
. And render it in your application like this <SampleSVG />
. It's safe and simple.
回答3:
You can pass an SVG to a variable in React as follows:
const checkIcon = {
icon: <svg data-name="Group 1642" width="25.771" height="25.771" className="info--text-icon" viewBox="0 0 25.771 25.771">
<path data-name="Path 99" d="M11.979 17.51h-.021a.97.97 0 01-.694-.313l-4.889-5.309a.971.971 0 011.429-1.316l4.2 4.566L23.661 3.521a.971.971 0 111.371 1.375L12.665 17.231a.972.972 0 01-.686.279z" fill="#44bbc7" ></path><path data-name="Path 100" d="M12.885 25.771a12.885 12.885 0 010-25.771.971.971 0 010 1.943 10.943 10.943 0 1010.943 10.942.971.971 0 011.943 0 12.9 12.9 0 01-12.886 12.886z" fill="#44bbc7" ></path>
</svg>
};
And to call the variable:
const Informations = () => {
return (
<>
{check.icon} This is SVG with React
</>
)
}
来源:https://stackoverflow.com/questions/46829592/react-returning-svg-contents-as-variable