How to turn an SVG file into a React component? - reactjs

Question

I have made the instagram logo in Illustrator and I extracted the generated code and I want to turn that code into a React component.
raw SVG code
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<style type="text/css">
.st0{fill:url(#SVGID_1_);}
.st1{fill:#FFFFFF;}
</style>
<g>
<radialGradient id="SVGID_1_" cx="441.1558" cy="73.5138" r="47.7212" gradientTransform="matrix(14.2175 0 0 -14.2171 -6122.1636 1596.7922)" gradientUnits="userSpaceOnUse">
<stop offset="9.693880e-02" style="stop-color:#FFD87A"/>
<stop offset="0.1426" style="stop-color:#FCCE78"/>
<stop offset="0.2263" style="stop-color:#F5B471"/>
<stop offset="0.3378" style="stop-color:#EB8D65"/>
<stop offset="0.449" style="stop-color:#E36058"/>
<stop offset="0.6786" style="stop-color:#CD3694"/>
<stop offset="1" style="stop-color:#6668B0"/>
</radialGradient>
<path class="st0" d="M512,395.1c0,64.6-52.3,116.9-116.9,116.9H116.9C52.3,512,0,459.7,0,395.1V117C0,52.4,52.4,0,117,0h276.3
C458.9,0,512,53.1,512,118.7V395.1z"/>
<g>
<path class="st1" d="M327.2,70.6H184.8c-63.1,0-114.3,51.2-114.3,114.3v142.3c0,63.1,51.1,114.2,114.3,114.2h142.3
c63.1,0,114.2-51.1,114.2-114.2V184.9C441.4,121.7,390.3,70.6,327.2,70.6z M405.8,313.5c0,51-41.3,92.3-92.3,92.3h-115
c-51,0-92.3-41.3-92.3-92.3v-115c0-51,41.3-92.3,92.3-92.3h115c51,0,92.3,41.4,92.3,92.3V313.5z"/>
<path class="st1" d="M261,159c-54,0-97.7,43.7-97.7,97.7c0,53.9,43.7,97.7,97.7,97.7c53.9,0,97.7-43.7,97.7-97.7
C358.6,202.7,314.9,159,261,159z M261,315.4c-32.5,0-58.8-26.3-58.8-58.8s26.3-58.8,58.8-58.8c32.4,0,58.8,26.3,58.8,58.8
C319.7,289.1,293.4,315.4,261,315.4z"/>
<path class="st1" d="M376.7,157.5c0,13.7-11.1,24.8-24.8,24.8c-13.7,0-24.8-11.1-24.8-24.8s11.1-24.9,24.8-24.9
S376.7,143.7,376.7,157.5z"/>
</g>
</g>
</svg>
This is what I've done so far , but it doesn't work.
InstagramLogo.js
import React from 'react';
/**
* <?xml version="1.0" encoding="utf-8"?>
* Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)
*/
export default ({
style={},
fill0={
offset_1: "9.693880e-02",
offset_2: "0.1426",
offset_3: "0.2263",
offset_4: "0.3378",
offset_5: "0.449",
offset_6: "0.6786",
offset_7: "1",
style_1: "stop-color:#FFD87A",
style_2: "stop-color:#FCCE78",
style_3: "stop-color:#F5B471",
style_4: "stop-color:#EB8D65",
style_5: "stop-color:#E36058",
style_6: "stop-color:#CD3694",
style_7: "stop-color:#6668B0",
},
fill1='#FFFFFF',
viewBox="0 0 512 512",
}) =>
<svg
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
x="0px" y="0px"
viewBox={viewBox}
xmlSpace="preserve"
>
<g>
<radialGradient id="SVGID_1_" cx="441.1558" cy="73.5138" r="47.7212" gradientTransform="matrix(14.2175 0 0 -14.2171 -6122.1636 1596.7922)" gradientUnits="userSpaceOnUse">
<stop offset={fill0.offset_1} style={style.fill0.style_1}/>
<stop offset={fill0.offset_2} style={style.fill0.style_2}/>
<stop offset={fill0.offset_3} style={style.fill0.style_3}/>
<stop offset={fill0.offset_4} style={style.fill0.style_4}/>
<stop offset={fill0.offset_5} style={style.fill0.style_5}/>
<stop offset={fill0.offset_6} style={style.fill0.style_6}/>
<stop offset={fill0.offset_7} style={style.fill0.style_7}/>
</radialGradient>
<path
class="st0"
d="M512,395.1c0,64.6-52.3,116.9-116.9,116.9H116.9C52.3,512,0,459.7,0,395.1V117C0,52.4,52.4,0,117,0h276.3
C458.9,0,512,53.1,512,118.7V395.1z"
fill={fill0}
/>
<g>
<path
class="st1"
d="M327.2,70.6H184.8c-63.1,0-114.3,51.2-114.3,114.3v142.3c0,63.1,51.1,114.2,114.3,114.2h142.3
c63.1,0,114.2-51.1,114.2-114.2V184.9C441.4,121.7,390.3,70.6,327.2,70.6z M405.8,313.5c0,51-41.3,92.3-92.3,92.3h-115
c-51,0-92.3-41.3-92.3-92.3v-115c0-51,41.3-92.3,92.3-92.3h115c51,0,92.3,41.4,92.3,92.3V313.5z"
fill={fill1}
/>
<path
class="st1"
d="M261,159c-54,0-97.7,43.7-97.7,97.7c0,53.9,43.7,97.7,97.7,97.7c53.9,0,97.7-43.7,97.7-97.7
C358.6,202.7,314.9,159,261,159z M261,315.4c-32.5,0-58.8-26.3-58.8-58.8s26.3-58.8,58.8-58.8c32.4,0,58.8,26.3,58.8,58.8
C319.7,289.1,293.4,315.4,261,315.4z"
/>
<path
class="st1"
d="M376.7,157.5c0,13.7-11.1,24.8-24.8,24.8c-13.7,0-24.8-11.1-24.8-24.8s11.1-24.9,24.8-24.9
S376.7,143.7,376.7,157.5z"
fill={fill1}
/>
</g>
</g>
</svg>
I tried to take those offsets and style rules and declare them as props and then passing them back to the radialGradient. It doesn't work and I have tweaked them several times but still cant make it work. How can I fix this component so that the svg logo gets displayed?

Answer 1

you had few issues in you component, first the class attribute should be className, and when using style attribute, you have as an object not a normal CSS string value, here is a fixed component code or a link to a working codesandbox too
import React from "react";
export default function Logo({
style = {},
fill0 = {
offset_1: "9.693880e-02",
offset_2: "0.1426",
offset_3: "0.2263",
offset_4: "0.3378",
offset_5: "0.449",
offset_6: "0.6786",
offset_7: "1",
style_1: { stopColor: "#FFD87A" },
style_2: { stopColor: "#FCCE78" },
style_3: { stopColor: "#F5B471" },
style_4: { stopColor: "#EB8D65" },
style_5: { stopColor: "#E36058" },
style_6: { stopColor: "#CD3694" },
style_7: { stopColor: "#6668B" }
},
fill1 = "#FFFFFF",
viewBox = "0 0 512 512"
}) {
return (
<svg
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox={viewBox}
xmlSpace="preserve"
>
<g>
<radialGradient
id="SVGID_1_"
cx="441.1558"
cy="73.5138"
r="47.7212"
gradientTransform="matrix(14.2175 0 0 -14.2171 -6122.1636 1596.7922)"
gradientUnits="userSpaceOnUse"
>
<stop offset={fill0.offset_1} style={fill0.style_1} />
<stop offset={fill0.offset_2} style={fill0.style_2} />
<stop offset={fill0.offset_3} style={fill0.style_3} />
<stop offset={fill0.offset_4} style={fill0.style_4} />
<stop offset={fill0.offset_5} style={fill0.style_5} />
<stop offset={fill0.offset_6} style={fill0.style_6} />
<stop offset={fill0.offset_7} style={fill0.style_7} />
</radialGradient>
<path
className="st0"
d="M512,395.1c0,64.6-52.3,116.9-116.9,116.9H116.9C52.3,512,0,459.7,0,395.1V117C0,52.4,52.4,0,117,0h276.3
C458.9,0,512,53.1,512,118.7V395.1z"
fill="url(#SVGID_1_)"
/>
<g>
<path
className="st1"
d="M327.2,70.6H184.8c-63.1,0-114.3,51.2-114.3,114.3v142.3c0,63.1,51.1,114.2,114.3,114.2h142.3
c63.1,0,114.2-51.1,114.2-114.2V184.9C441.4,121.7,390.3,70.6,327.2,70.6z M405.8,313.5c0,51-41.3,92.3-92.3,92.3h-115
c-51,0-92.3-41.3-92.3-92.3v-115c0-51,41.3-92.3,92.3-92.3h115c51,0,92.3,41.4,92.3,92.3V313.5z"
fill={fill1}
/>
<path
className="st1"
d="M261,159c-54,0-97.7,43.7-97.7,97.7c0,53.9,43.7,97.7,97.7,97.7c53.9,0,97.7-43.7,97.7-97.7
C358.6,202.7,314.9,159,261,159z M261,315.4c-32.5,0-58.8-26.3-58.8-58.8s26.3-58.8,58.8-58.8c32.4,0,58.8,26.3,58.8,58.8
C319.7,289.1,293.4,315.4,261,315.4z"
fill={fill1}
/>
<path
className="st1"
d="M376.7,157.5c0,13.7-11.1,24.8-24.8,24.8c-13.7,0-24.8-11.1-24.8-24.8s11.1-24.9,24.8-24.9
S376.7,143.7,376.7,157.5z"
fill={fill1}
/>
</g>
</g>
</svg>
);
}

Answer 2

Save svg to a file like
Icon.svg
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.5 1.5C9.5 1.09375 9.34375 0.75 9.0625 0.4375C8.75 0.15625 8.40625 0 8 0C7.5625 0 7.21875 0.15625 6.9375 0.4375C6.625 0.75 6.5 1.09375 6.5 1.5C6.5 1.9375 6.625 2.28125 6.9375 2.5625C7.21875 2.875 7.5625 3 8 3C8.40625 3 8.75 2.875 9.0625 2.5625C9.34375 2.28125 9.5 1.9375 9.5 1.5ZM8 13C8.40625 13 8.75 13.1562 9.0625 13.4375C9.34375 13.75 9.5 14.0938 9.5 14.5C9.5 14.9375 9.34375 15.2812 9.0625 15.5625C8.75 15.875 8.40625 16 8 16C7.5625 16 7.21875 15.875 6.9375 15.5625C6.625 15.2812 6.5 14.9375 6.5 14.5C6.5 14.0938 6.625 13.75 6.9375 13.4375C7.21875 13.1562 7.5625 13 8 13ZM14.5 6.5C14.9062 6.5 15.25 6.65625 15.5625 6.9375C15.8438 7.25 16 7.59375 16 8C16 8.4375 15.8438 8.78125 15.5625 9.0625C15.25 9.375 14.9062 9.5 14.5 9.5C14.0625 9.5 13.7188 9.375 13.4375 9.0625C13.125 8.78125 13 8.4375 13 8C13 7.59375 13.125 7.25 13.4375 6.9375C13.7188 6.65625 14.0625 6.5 14.5 6.5ZM3 8C3 8.4375 2.84375 8.78125 2.5625 9.0625C2.25 9.375 1.90625 9.5 1.5 9.5C1.0625 9.5 0.71875 9.375 0.4375 9.0625C0.125 8.78125 0 8.4375 0 8C0 7.59375 0.125 7.25 0.4375 6.9375C0.71875 6.65625 1.0625 6.5 1.5 6.5C1.90625 6.5 2.25 6.65625 2.5625 6.9375C2.84375 7.25 3 7.59375 3 8ZM3.40625 11.0938C3.8125 11.0938 4.15625 11.25 4.46875 11.5312C4.75 11.8438 4.90625 12.1875 4.90625 12.5938C4.90625 13.0312 4.75 13.375 4.46875 13.6562C4.15625 13.9688 3.8125 14.0938 3.40625 14.0938C2.96875 14.0938 2.625 13.9688 2.34375 13.6562C2.03125 13.375 1.90625 13.0312 1.90625 12.5938C1.90625 12.1875 2.03125 11.8438 2.34375 11.5312C2.625 11.25 2.96875 11.0938 3.40625 11.0938ZM12.5938 11.0938C13 11.0938 13.3438 11.25 13.6562 11.5312C13.9375 11.8438 14.0938 12.1875 14.0938 12.5938C14.0938 13.0312 13.9375 13.375 13.6562 13.6562C13.3438 13.9688 13 14.0938 12.5938 14.0938C12.1562 14.0938 11.8125 13.9688 11.5312 13.6562C11.2188 13.375 11.0938 13.0312 11.0938 12.5938C11.0938 12.1875 11.2188 11.8438 11.5312 11.5312C11.8125 11.25 12.1562 11.0938 12.5938 11.0938ZM3.40625 1.90625C3.8125 1.90625 4.15625 2.0625 4.46875 2.34375C4.75 2.65625 4.90625 3 4.90625 3.40625C4.90625 3.84375 4.75 4.1875 4.46875 4.46875C4.15625 4.78125 3.8125 4.90625 3.40625 4.90625C2.96875 4.90625 2.625 4.78125 2.34375 4.46875C2.03125 4.1875 1.90625 3.84375 1.90625 3.40625C1.90625 3 2.03125 2.65625 2.34375 2.34375C2.625 2.0625 2.96875 1.90625 3.40625 1.90625Z" fill="#FFCC33"/>
</svg>
And in App.js import it as
import React from 'react'
import { ReactComponent as Icon } from './icon.svg
function App() {
return (
<div>
<Icon/>
</div>
)
}

Answer 3

You can try react-svg-loader with webpack.