How to customize svg title in React

How to customize svg title in React - reactjs

In svg file have this svg:
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.2856 2H19.5522C20.9037 2 22.0001 3.1059 22.0001 4.47018V7.7641C22.0001 9.12735 20.9037 10.2343 19.5522 10.2343H16.2856C14.933 10.2343 13.8367 9.12735 13.8367 7.7641V4.47018C13.8367 3.1059 14.933 2 16.2856 2Z" stroke="#B5B8BB" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.44892 2H7.71449C9.06703 2 10.1634 3.1059 10.1634 4.47018V7.7641C10.1634 9.12735 9.06703 10.2343 7.71449 10.2343H4.44892C3.09638 10.2343 2 9.12735 2 7.7641V4.47018C2 3.1059 3.09638 2 4.44892 2Z" stroke="#B5B8BB" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.44892 13.7657H7.71449C9.06703 13.7657 10.1634 14.8716 10.1634 16.2369V19.5298C10.1634 20.8941 9.06703 22 7.71449 22H4.44892C3.09638 22 2 20.8941 2 19.5298V16.2369C2 14.8716 3.09638 13.7657 4.44892 13.7657Z" stroke="#B5B8BB" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.2856 13.7657H19.5522C20.9037 13.7657 22.0001 14.8716 22.0001 16.2369V19.5298C22.0001 20.8941 20.9037 22 19.5522 22H16.2856C14.933 22 13.8367 20.8941 13.8367 19.5298V16.2369C13.8367 14.8716 14.933 13.7657 16.2856 13.7657Z" stroke="#B5B8BB" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
I am importing it like this:
import { ReactComponent as Icon } from 'assets/icons/icon.svg';
And use it just like this:
<Icon title="icon title"/>
Can I somehow customize this title? I mean change color, background ...

You can provide props into the SVG tag itself, you can see all the tags you can use on SVG tag here.
So, to change the color on the SVG, you'd pass "fill" to "red". Here's a sandbox example of it.

Related

Add link to path of an SVG in React

I have an SVG of a map that I want to add a link to in React to the path tag.
<svg viewBox="0 0 777.74173 413.26299"
version="1.1" xmlns="http://www.w3.org/2000/svg">
<g id="prov00p36">
<clipPath id="SVG_CP_1">
<path d="M0,0L0,413.26299L777.74173,413.26299L777.74173,0L0,0z" />
</clipPath
<path clipPath="url(#SVG_CP_1)" fill="#E8BEFF" fillRule="evenodd"
stroke="none" d="M248.39427,287.05972L247.4343,286.57968
L247.1943,285.61962L248.39427,286.09965L248.39427,287.05972z"
/>
</g>
</svg>
Can I add a tag in the html? or do I have to create a function?

How can I use this SVG in React without getting any error?

I want to use JavaScript SVG as an icon. However, I keep getting this error. I fixed one error by changing xmls:xlink into xmlsXlink. However, it did not work same for xml:space.
SVG code
<svg
className="icon"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
version="1.1"
id="Layer_1"
x="0px"
y="0px"
viewBox="0 0 85 85"
style="enable-background:new 0 0 85 85;"
xml:space="preserve"
>
<polygon
class="st0"
points="6.3,1.2 13,75.4 42.4,83.8 72.1,75.4 78.9,1.2"
fill="#FFF"
/>
<g>
<g transform="translate(4.988 -113.385)">
<path
d="M7.1,189.8l-6.9-76.4H75l-7,76.4l-30.6,8.6L7.1,189.8z M62.4,185.6l5.8-65.5H37.6l0.2,72.2 L62.4,185.6z M34.7,129.8h-7.4L27.2,169l-14.5-4v9l21.9,5.9L34.7,129.8L34.7,129.8z"
fill="#D4B830"
/>
<path
d="M32.3,179.2c-1-0.3-5.7-1.6-10.6-2.9l-8.8-2.4v-4.4c0-4.3,0-4.4,0.4-4.3 c0.2,0.1,3.4,1,7.1,2l6.7,1.8l0.1-19.5l0.1-19.5h7.3v24.9c0,19.7-0.1,24.9-0.3,24.9C34.2,179.7,33.2,179.4,32.3,179.2L32.3,179.2z"
fill="#EBEBEB"
opacity="0.986"
fill-opacity="0"
enable-background="new"
/>
<path
d="M12.8,174v-9c0,0,9.2,2.6,14.4,3.9l0.1-39.1h7.4v50.1L12.8,174L12.8,174z"
fill="#EBEBEB"
opacity="0.986"
fill-opacity="0.9216"
enable-background="new"
/>
<path
d="M37.6,120.2h30.6l-5.8,65.5l-24.8,6.7V120.2z M60.8,174.6l2-24.5L48,151.8v-13.1l15.9-0.1 l0.6-8.9l-23.9,0.1l0.3,32.5l14.5-2.5l-0.2,7.2l-14.7,4l0.1,8.9L60.8,174.6L60.8,174.6z"
fill="#FDD83C"
/>
</g>
</g>
</svg>

You've no text in the file so just remove the xml:space attribute altogether.

SVG different in browser

I am having an issue with the following SVG:
<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" x="0" y="0" version="1.1" xml:space="preserve" viewBox="0 0 106 79">
<defs/>
<style>
.st0{fill:none;stroke:#18385f;stroke-width:1;stroke-linecap:round}.st0,.st1{stroke-miterlimit:10}.st1,.st2,.st4{fill:none;stroke:#18385f;stroke-width:1;stroke-linecap:round;stroke-linejoin:round}.st4{stroke-miterlimit:10;stroke-dasharray:3}
</style>
<path d="M71.8 72.5H33.2c-.6 0-1.1-.5-1.1-1.1V45.7c0-.6.5-1.1 1.1-1.1h38.6c.6 0 1.1.5 1.1 1.1v25.7c0 .6-.5 1.1-1.1 1.1zM74.6 77.9H30.4c-1.5 0-2.7-1.2-2.7-2.7 0-1.5 1.2-2.7 2.7-2.7h44.1c1.5 0 2.7 1.2 2.7 2.7.1 1.5-1.2 2.7-2.6 2.7z" class="st0"/>
<path d="M37.4 47.8h30.1v21.5H37.4zM37.4 52.1h30.2" class="st0"/>
<path d="M44 33.3c0-.1-.4-1.7.5-2.6.8-.8 2.2-.9 3.4 0 .2-1.5 1.3-2.6 2.4-2.6 1.1 0 1.8.9 1.9 1 .6-1.9 2.5-2.8 3.9-2.1 1.1.6 1.8 2.1 1.5 3.7 1.1-.2 2.2.5 2.4 1.6.2 1.2-.6 2.5-1.9 2.6H45c-.3-.2-.8-.7-1-1.6zM52.5 39.7v-4.8 4.8zM1.1 1.5h15.1v17.2H1.1zM10.8 1.5v5.4M16.2 6.9h-5.4M45 1.5h15.1v17.2H45zM54.7 1.5v5.4M60 6.9h-5.3M89.7 1.5h15.1v17.2H89.7zM99.4 1.5v5.4M104.8 6.9h-5.4M52.5 18.7v9.7" class="st1"/>
<g>
<path d="M60 9h2.5" class="st2"/>
<path fill="none" stroke="#18385f" stroke-dasharray="4.393 4.393" stroke-linecap="round" stroke-linejoin="round" d="M66.9 9h15.4"/>
<path d="M84.5 9H87" class="st2"/>
</g>
<path d="M97.3 18.7v14M61.1 32.7H97" class="st4"/>
<path d="M8.7 18.7v14M43.9 32.7H9" class="st1"/>
</svg>
On my preview renders perfectly, even the export that the freelancer gave me on PNG looks perfect, tho on my react app looks odd:
Any idea on what to do? I even pass it through here to fix the code: https://jakearchibald.github.io/svgomg/

How to turn an SVG file into a React component?

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?

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>
);
}

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>
)
}

You can try react-svg-loader with webpack.

How to use a custom SVG file in material ui SVG ICON

I am trying to use a chip with SVG delete icon,
The icon code is
const icon = (props) => {
return (
<SvgIcon>
<img src={'ic_check.svg'} style={{width: '20px'}} width={'20px'}/>
</SvgIcon>
)
};
The content of SVG file
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<g fill="none" fill-rule="evenodd">
<rect width="20" height="20" x="2" y="2" fill="#6FB934" rx="10"/>
<path fill="#FFF" fill-rule="nonzero" d="M9.5 15.475L6.025 12l-1.183 1.175L9.5 17.833l10-10-1.175-1.175z"/>
<path d="M0 0h24v24H0z"/>
</g>
</svg>
and the chip finally is
<Chip
label={ViewUtils.NOT_EXPIRED}
className={classes.chip}
onDelete={() => {}}
deleteIcon={<icon/>}/>
But this is not working and I checked for the path and it is correct as I can render same svg in img tag.

Nayan SvgIcon takes a svg path that you can further style. But in your case your svg is already styled. It doesn't take svg file directory path which actually lose SvgIcon API purpose.
You just need to remove SvgIcon from img tag:
<Chip
label={ViewUtils.NOT_EXPIRED}
className={classes.chip}
onDelete={() => {console.log('You Deleted this icon')}}
deleteIcon={icon}
/>
and Make you svg as const or import from assets file directory I haven't tried that,
const icon = <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<g fill="none" fill-rule="evenodd">
<rect width="20" height="20" x="2" y="2" fill="#6FB934" rx="10"/>
<path fill="#FFF" fill-rule="nonzero" d="M9.5 15.475L6.025 12l-1.183 1.175L9.5 17.833l10-10-1.175-1.175z"/>
<path d="M0 0h24v24H0z"/>
</g>
</svg>
There is a reason why we can't make <icon/> component. If we make it as component as following:
const Icon = (props) => {
return (
<SvgIcon>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<g fill="none" fill-rule="evenodd">
<rect width="20" height="20" x="2" y="2" fill="#6FB934" rx="10" />
<path
fill="#FFF"
fill-rule="nonzero"
d="M9.5 15.475L6.025 12l-1.183 1.175L9.5 17.833l10-10-1.175-1.175z"
/>
<path d="M0 0h24v24H0z" />
</g>
</svg>
</SvgIcon>
)
};
It works like a charm but onDelete doesn't get fired on this component.I've reported this issue as well on material UI. In first case onDelete gets called every time. Feel free to ask any question.
EDITED Fixed the above issue for Icon as Component rather than const. here is the codesandbox link for working example:
https://codesandbox.io/s/98842r4yy4

I am using React and typescript, created a component and added the tags from HTML and it worked normally.
export const IconTable: React.FC = () => {
return (
<svg width="130" height="130" viewBox="0 0 1024 1024">
<path d="M505.947 123.597a23.096 23.096 0 0 0-16.99-7.477h-6.837c-17.929 0-32.631 13.468-34.198 "/>
</svg>
);

Develop Reference

c reactjs sql-server angularjs arrays wpf database batch-file google-app-engine silverlight

How to customize svg title in React - reactjs

You can provide props into the SVG tag itself, you can see all the tags you can use on SVG tag here. So, to change the color on the SVG, you'd pass "fill" to "red". Here's a sandbox example of it.

Related

Add link to path of an SVG in React

How can I use this SVG in React without getting any error?

SVG different in browser

How to turn an SVG file into a React component?

How to use a custom SVG file in material ui SVG ICON

Categories

Resources