React SVG Component using Objects - javascript

I'm trying to get SVG's in a object file. then use SVG's like this.
import {CustomIcons} from "./Icons"
<CustomIcons name="FrameIcon" />
<CustomIcons name="VectorIcon" />
I just want to import one file and get a custom icon based on the name. I been trying this for hours and I'm lost
CustomIcon.tsx
export const CustomIcons = {
FrameIcon: (
<svg
width="632"
height="330"
viewBox="0 0 632 330"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M460.923 -287.339L760.908 192.738C748.744 201.994 736.08 210.636 723.487 219.419C695.409 238.987 667.885 262.248 636.416 276.436C612.104 287.397 589.793 302.386 564.742 311.911C523.785 327.491"
fill="#232323"
/>
</svg>
),
VectorIcon: (
<svg
width="632"
height="330"
viewBox="0 0 632 330"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M460.923 -287.339L760.908 192.738C748.744 201.994 736.08 210.636 723.487 219.419C69"
fill="#232323"
/>
</svg>
),
};


I see a couple of issues here, I'll try to explain as much as I can:
The type of the exported value (e.g. FrameIcon) is supposed to be a function
For instance, your file should export this way:
export {
FrameIcon: () => (
<svg
width="632"
height="330"
viewBox="0 0 632 330"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M460.923 -287.339L760.908 192.738C748.744 201.994 736.08 210.636 723.487 219.419C695.409 238.987 667.885 262.248 636.416 276.436C612.104 287.397 589.793 302.386 564.742 311.911C523.785 327.491"
fill="#232323"
/>
</svg>
),
VectorIcon: () => (
<svg
width="632"
height="330"
viewBox="0 0 632 330"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M460.923 -287.339L760.908 192.738C748.744 201.994 736.08 210.636 723.487 219.419C69"
fill="#232323"
/>
</svg>
),
};
The import is supposed to be:
import { FrameIcon } from './Icons'
Extra tip(s)
Create a folder called Icon, create the following files in it:
index.js
FrameIcon.jsx
VectorIcon.jsx
Your index.js should export all the icons created in this folder, for instance:
export * from './FrameIcon';
export * from './VectorIcon';
Your FrameIcon for instance should be:
const FrameIcon = () => (
<svg
width="632"
height="330"
viewBox="0 0 632 330"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M460.923 -287.339L760.908 192.738C748.744 201.994 736.08 210.636 723.487 219.419C695.409 238.987 667.885 262.248 636.416 276.436C612.104 287.397 589.793 302.386 564.742 311.911C523.785 327.491"
fill="#232323"
/>
</svg>
)
export { FrameIcon };
I hope this helps.


You should define CustomIcons as function component
something like this should work
import React from 'react';
const CustomIcons = (props) => {
const icons = {
FrameIcon :
<svg width="632" height="330" viewBox="0 0 632 330" fill="none" xmlns="http://www.w3.org/2000/svg" >
<path d="M460.923 -287.339L760.908 192.738C748.744 201.994 736.08 210.636 723.487 219.419C695.409 238.987 667.885 262.248 636.416 276.436C612.104 287.397 589.793 302.386 564.742 311.911C523.785 327.491" fill="#232323"/>
</svg>,
VectorIcon:
<svg width="632" height="330" viewBox="0 0 632 330" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M460.923 -287.339L760.908 192.738C748.744 201.994 736.08 210.636 723.487 219.419C69" fill="#232323"/>
</svg>
}
return <>
{icons[props.name]}
</>
};
export default CustomIcons;
`

Related

Get Id clicked on a svg in JavaScript/React

I have a dynamic svg which had a data-id in it's path. I want to find out the id of the path clicked in the svg.
sample svg -
<svg width="208" height="94" viewBox="0 0 208 94" fill="none" xmlns="http://www.w3.org/2000/svg">
<path data-workSpaceId="1" d="M0" fill="#BFBEBE"/>
<path data-workSpaceId="2" d="M15.75" fill="white"/>
<path data-workSpaceId="3" d="M14." fill="#20968F"/>
</svg>
How I'm fetching the svg in react -
<img src={//The svg imported here} onClick={(e) => console.log(e.target.getAttribute('data-workSpaceId')) }}
Any help welcomed :)

It is possible to use fetch to get the SVG and use dangerouslySetInnerHTML to insert the SVG.
For instance, if you have the following test.svg file in the public folder:
<svg width="208" height="94" viewBox="0 0 208 94" fill="none" xmlns="http://www.w3.org/2000/svg">
<path data-id="1" d="M 10 10 H 90 V 90 H 10 L 10 10" fill="#BFBEBE"/>
<path data-id="2" d="M 5 5 H 50 V 50 H 5 L 5 5" fill="red"/>
<path data-id="3" d="M 120 120 H 50 V 50" fill="#20968F"/>
</svg>
you can write the following:
import {useEffect, useState} from "react";
function App() {
const [svgText, setSvgText] = useState(null);
useEffect(() => {
fetch("/test.svg")
.then(res => res.text())
.then(svgText => setSvgText(svgText))
}, []);
return (
<div dangerouslySetInnerHTML={{ __html: svgText}}
onClick={(event) => console.log(event.target.getAttribute('data-id'))}>
</div>
);
}
export default App;
Note that I simplified data-workSpaceId to data-id.
If you want to keep data-workSpaceId, the JavaScript code should be event.target.getAttribute('data-workspaceid').
This answer helped me.

how to import and display 'svg' file in react native

I have an svg file:
<svg xmlns="http://www.w3.org/2000/svg" width="260.346" height="65.709" viewBox="0 0 260.346 65.709">
<g id="logo" transform="translate(-0.763 -0.949)">
<path id="text" d="M229.184,75.248h2.56V57.7h-2.56ZM236.318,57.7V75.248H238.7V62.6c0-.249-.009-.481-.025-.7s-.03-.43-.038-.646q-.018-.386-.061-.771c.132.165.244.31.335.434s.187.246.287.361.206.235.323.359.256.278.423.461l12.428,13.148h2.436V57.7h-2.386V70.513a5.447,5.447,0,0,0,.025.547c.016.174.032.361.05.56s.041.456.074.771c-.216-.265-.395-.481-.535-.646s-.273-.323-.4-.472-.263-.309-.4-.46-.319-.344-.534-.559L238.877,57.7h-2.56Zm21.5,13.994q.2.274.547.721a5.807,5.807,0,0,0,.969.944,8.765,8.765,0,0,0,1.566.97,11.736,11.736,0,0,0,2.286.82,15.145,15.145,0,0,0,2.187.385,21.478,21.478,0,0,0,2.336.138,14.858,14.858,0,0,0,4.7-.66,5.831,5.831,0,0,0,3.008-2.124,4.4,4.4,0,0,0,.733-1.6,6.733,6.733,0,0,0,.162-1.329,4.472,4.472,0,0,0-.361-1.877A4.064,4.064,0,0,0,275,66.76a4.946,4.946,0,0,0-1.292-.857,7.934,7.934,0,0,0-1.428-.5q-.563-.123-1.132-.212t-1.13-.136q-1.193-.125-2.374-.224t-2.373-.224A14.071,14.071,0,0,1,263.3,64.3a2.233,2.233,0,0,1-1.18-.708,1.929,1.929,0,0,1-.522-1.342,2.469,2.469,0,0,1,.323-1.157,2.645,2.645,0,0,1,1.243-1.055,6.374,6.374,0,0,1,1.976-.56,16.76,16.76,0,0,1,2.25-.161,12.99,12.99,0,0,1,2.832.31,7.14,7.14,0,0,1,2.587,1.157,3.915,3.915,0,0,1,.533.434c.14.142.3.3.486.486l2.262-.92a8.9,8.9,0,0,0-.746-.92,6.5,6.5,0,0,0-1.019-.845,9.107,9.107,0,0,0-3.331-1.405,18.5,18.5,0,0,0-3.654-.36q-.4,0-1.168.037a14.786,14.786,0,0,0-1.678.187,12.784,12.784,0,0,0-1.864.459,6.156,6.156,0,0,0-1.74.883,4.55,4.55,0,0,0-1.279,1.441,4.19,4.19,0,0,0-.5,2.113,5.167,5.167,0,0,0,.224,1.4,3.439,3.439,0,0,0,1.019,1.529,4.4,4.4,0,0,0,1.081.721,6.489,6.489,0,0,0,1.4.447,18.178,18.178,0,0,0,1.975.285q1.156.112,2.8.262,1.316.1,2.448.235a9.426,9.426,0,0,1,1.977.436,3.193,3.193,0,0,1,1.329.832,2.087,2.087,0,0,1,.486,1.455,2.944,2.944,0,0,1-1.53,2.585,8.333,8.333,0,0,1-4.436.969,16.324,16.324,0,0,1-3.43-.361,8.632,8.632,0,0,1-3.132-1.354,8.089,8.089,0,0,1-.759-.585,4.038,4.038,0,0,1-.459-.484l-2.287.945ZM279.961,57.7V68.016q0,.746.049,1.528a6.422,6.422,0,0,0,.3,1.554,5.5,5.5,0,0,0,.771,1.5,5.923,5.923,0,0,0,1.441,1.38,8.27,8.27,0,0,0,3.1,1.342,16.711,16.711,0,0,0,3.392.348,13.39,13.39,0,0,0,3.841-.461,9.668,9.668,0,0,0,2.423-1.055,5.418,5.418,0,0,0,1.554-1.4,5.959,5.959,0,0,0,.8-1.541,5.751,5.751,0,0,0,.3-1.541q.037-.757.036-1.428V57.7h-2.51V68.438q0,.546-.036,1.144a4.109,4.109,0,0,1-.249,1.168,3.518,3.518,0,0,1-.671,1.094,3.714,3.714,0,0,1-1.306.895,7.447,7.447,0,0,1-1.8.558,12.193,12.193,0,0,1-2.35.212,11.958,11.958,0,0,1-1.839-.124,9.34,9.34,0,0,1-1.379-.311,5.422,5.422,0,0,1-.969-.4q-.321-.173-.634-.36a3.924,3.924,0,0,1-.906-.784,3.137,3.137,0,0,1-.522-.919,4.576,4.576,0,0,1-.248-1.119,13.389,13.389,0,0,1-.063-1.379V57.7h-2.51Zm34.747,2.113q.435,0,.87.025a3.787,3.787,0,0,1,.87.149,2.728,2.728,0,0,1,.8.385,2.529,2.529,0,0,1,.671.734,2.74,2.74,0,0,1,.4.881,3.909,3.909,0,0,1,.125.982,3.81,3.81,0,0,1-.125.956,2.341,2.341,0,0,1-.472.908,2.729,2.729,0,0,1-.87.77,4,4,0,0,1-1.044.4,6.126,6.126,0,0,1-1.105.149q-.541.024-1.082.025h-8.674V59.814h9.644ZM302.6,75.248h2.485V68.239h8.475l5.941,7.009h3.256L316.3,67.841q.447-.074,1.231-.273a5.1,5.1,0,0,0,1.566-.721,4.557,4.557,0,0,0,1.354-1.467,4.806,4.806,0,0,0,.572-2.51,5.55,5.55,0,0,0-.161-1.4,4.956,4.956,0,0,0-.411-1.069,5.167,5.167,0,0,0-.509-.782,3.131,3.131,0,0,0-.486-.5,4.718,4.718,0,0,0-1.193-.808,6.124,6.124,0,0,0-1.254-.422,7.371,7.371,0,0,0-1.268-.161q-.6-.024-1.206-.025H302.6V75.248Zm35.145-6.363h-8.674l3.7-7.282c.082-.165.156-.323.224-.472s.133-.307.2-.472q.074-.2.136-.373c.042-.116.079-.232.113-.348.034.116.066.228.1.335s.066.221.1.336c.066.149.128.3.186.447a3.683,3.683,0,0,0,.212.447l3.7,7.382Zm-14.639,6.363h2.784l2.137-4.325h10.787l2.138,4.325h2.858l-9-17.573h-2.634l-9.072,17.573ZM346.274,57.7V75.248h2.386V62.6c0-.249-.009-.481-.025-.7s-.03-.43-.039-.646q-.018-.386-.061-.771c.132.165.244.31.335.434s.187.246.287.361.206.235.323.359.256.278.423.461L362.33,75.248h2.436V57.7H362.38V70.513a5.45,5.45,0,0,0,.025.547c.016.174.033.361.05.56s.041.456.074.771c-.216-.265-.395-.481-.535-.646s-.274-.323-.4-.472-.263-.309-.4-.46-.319-.344-.533-.559L348.834,57.7h-2.56ZM386.711,69.88a6.914,6.914,0,0,1-.633.981,6.061,6.061,0,0,1-1.132,1.132,7.478,7.478,0,0,1-2.187,1.068,11.081,11.081,0,0,1-3.405.447,10.9,10.9,0,0,1-3.952-.659,6.633,6.633,0,0,1-2.436-1.578,6.16,6.16,0,0,1-1.417-2.386,8.838,8.838,0,0,1-.4-2.61,6.865,6.865,0,0,1,.671-3.17,6.094,6.094,0,0,1,1.79-2.138,7.479,7.479,0,0,1,2.573-1.218,11.778,11.778,0,0,1,3.019-.385,10.828,10.828,0,0,1,3.046.4,8.126,8.126,0,0,1,2.149.919,4.731,4.731,0,0,1,1.218,1.094,11.393,11.393,0,0,1,.7,1.069l2.684-.6q-.21-.359-.434-.709a8.564,8.564,0,0,0-.646-.87,9.585,9.585,0,0,0-.908-.931,9.319,9.319,0,0,0-1.218-.92,9.061,9.061,0,0,0-1.864-.87,14.471,14.471,0,0,0-1.889-.5,14.041,14.041,0,0,0-1.69-.224q-.62-.044-1.243-.05a14.614,14.614,0,0,0-2.945.26,12.37,12.37,0,0,0-2.138.621,7.9,7.9,0,0,0-1.43.734q-.546.373-.82.6a12.416,12.416,0,0,0-1.006.895,7.108,7.108,0,0,0-1.069,1.379,8.2,8.2,0,0,0-.845,1.977,9.681,9.681,0,0,0-.336,2.709,10.049,10.049,0,0,0,.659,3.665,7.946,7.946,0,0,0,1.989,2.958,9.419,9.419,0,0,0,3.33,1.977,13.84,13.84,0,0,0,4.684.721q.847,0,1.69-.088a16.152,16.152,0,0,0,1.814-.285,13.518,13.518,0,0,0,1.828-.535,9.088,9.088,0,0,0,1.726-.857,9.2,9.2,0,0,0,1.118-.845,8.01,8.01,0,0,0,.833-.858,7.465,7.465,0,0,0,.633-.882q.274-.447.522-.895Zm5.841,5.369h16.827V73.086H395.037V67.171h13.347V65.107H395.037V59.863h13.72V57.7H392.552ZM229.209,48.933h2.336V38q0-1.044-.012-1.679-.01-.54-.038-1.08-.021-.411-.063-.82c-.023-.249-.053-.538-.086-.87q.175.483.373.958.174.408.361.845t.422.943q.234.511.608,1.256L238.6,48.932h2.287l5.99-12.378c.165-.348.307-.642.423-.883q.163-.338.311-.683c.091-.215.181-.436.274-.66s.194-.509.31-.857q-.067.49-.113.982t-.061.993q-.028.671-.037,1.342-.015,1.026-.013,2.051V48.932h2.337V31.385h-3.38l-5.543,11.508q-.252.548-.509,1.093c-.142.3-.266.584-.373.858s-.217.554-.323.844-.237.644-.386,1.057c-.165-.414-.307-.766-.422-1.057s-.228-.567-.335-.832q-.18-.438-.373-.87-.268-.59-.56-1.168l-5.468-11.433h-3.43V48.932Zm25.178,0h2.56V31.385h-2.56Zm7.134-17.548V48.933h2.386V36.281c0-.248-.009-.481-.025-.7s-.03-.431-.038-.646q-.018-.386-.061-.771c.132.165.244.312.335.434s.187.246.287.361.206.235.323.361.256.277.423.459l12.428,13.148h2.436V31.385h-2.386V44.2a5.443,5.443,0,0,0,.025.545c.016.175.032.361.05.56s.041.456.074.77c-.216-.265-.395-.481-.535-.646s-.273-.323-.4-.472-.263-.309-.4-.461-.319-.344-.534-.558L264.08,31.385h-2.56Zm23.138,17.548h16.827V46.77H287.144V40.854h13.347V38.792H287.144V33.547h13.72V31.385h-16.2V48.932ZM316.8,33.5c.282,0,.572.009.87.025a3.769,3.769,0,0,1,.87.149,2.689,2.689,0,0,1,.8.386,2.513,2.513,0,0,1,.671.732,2.754,2.754,0,0,1,.4.882,3.837,3.837,0,0,1,0,1.94,2.346,2.346,0,0,1-.472.906,2.73,2.73,0,0,1-.87.771,4.005,4.005,0,0,1-1.044.4,6.126,6.126,0,0,1-1.105.149q-.541.024-1.082.025h-8.674V33.5H316.8Zm-12.1,15.435h2.485V41.923h8.475l5.941,7.009h3.256l-6.462-7.407q.447-.075,1.231-.274a5.1,5.1,0,0,0,1.566-.72,4.561,4.561,0,0,0,1.354-1.467,4.807,4.807,0,0,0,.572-2.51,5.534,5.534,0,0,0-.161-1.4,4.948,4.948,0,0,0-.411-1.07,5.178,5.178,0,0,0-.509-.782,3.149,3.149,0,0,0-.486-.5,4.684,4.684,0,0,0-1.193-.807,5.953,5.953,0,0,0-1.254-.422,7.233,7.233,0,0,0-1.268-.162q-.6-.024-1.206-.025h-11.93V48.932Zm30.845-4.3q-.149.323-.248.533a3.528,3.528,0,0,0-.162.411c-.041.133-.077.273-.111.422s-.075.332-.125.547a10.278,10.278,0,0,0-.361-1.118q-.092-.239-.2-.472-.137-.3-.285-.6L327.93,31.385h-2.759L333.6,48.932h2.51l8.277-17.547H341.65l-6.114,13.248Zm23.811-2.063h-8.674l3.7-7.282c.082-.165.156-.323.224-.472s.132-.307.2-.472c.05-.133.095-.257.136-.373s.079-.233.113-.348c.032.115.066.228.1.335l.1.336c.066.149.127.3.186.447a3.634,3.634,0,0,0,.212.447l3.7,7.382Zm-14.639,6.363h2.784l2.138-4.325h10.787l2.138,4.325h2.858l-9-17.572H353.78l-9.072,17.573Z" transform="translate(-148.27 -19.74)" fill="#fff"/>
<path id="bg" d="M.763.949H66.472V66.658H.763Z" fill="#082240" fill-rule="evenodd"/>
<g id="Group_1" data-name="Group 1" transform="translate(-2.092 0.96)">
<path id="Path_4" data-name="Path 4" d="M128.559,49.729h4.208v4.208h-4.208Z" transform="translate(-79.953 -34.664)" fill="#fff" fill-rule="evenodd"/>
<path id="Path_5" data-name="Path 5" d="M128.559,49.729h24.208v4.208H128.559Z" transform="translate(-109.953 -34.664)" fill="#fff" fill-rule="evenodd"/>
<path id="Path_6" data-name="Path 6" d="M128.559,49.729h4.208V75.285h-4.208Z" transform="translate(-79.953 -24.664)" fill="#fff" fill-rule="evenodd"/>
<path id="Path_7" data-name="Path 7" d="M128.559,49.729h4.208V75.285h-4.208Z" transform="translate(-89.953 -24.664)" fill="#fff" fill-rule="evenodd"/>
<path id="Path_8" data-name="Path 8" d="M128.559,49.729h4.208V75.285h-4.208Z" transform="translate(-99.953 -24.664)" fill="#fff" fill-rule="evenodd"/>
<path id="Path_9" data-name="Path 9" d="M128.559,49.729h4.208V75.285h-4.208Z" transform="translate(-109.953 -24.664)" fill="#fff" fill-rule="evenodd"/>
</g>
</g>
</svg>
My problem it's that I can't import the svg like this:
import Svg from "../assets/svg.svg";
And display it's in the jsx like react:
<div>
<Svg />
</div>
Now, I import my svg as functional component and display inside the Jsx:
<View style={styles.footerLogo}>
<Text style={styles.footerText}>
Developed by <Svg /> // Svg its a functional component.
</Text>
</View>
My question is, How can I import svg as local file and display it in my code?

React-Native doesn't support SVG files directly. You can use this svg support library.
https://github.com/kristerkari/react-native-svg-transformer

I needed to import the svg as component :
import {Svg as ReactComponent} from '../'

I want to Transfer my SVG in React To React Native

I have a simple SVG code, which is a circle progress bar with an image, and I used it to change the value of progress as below, I want to have this SVG with this feature in react native,
things I tried :
react-native-SVG package, but didn't work and I get some weird behavior with it
the code in React js , the props is changed from outside so I can change any props to change progress value , and image inside , as well as the width too ,
function CircularBar({ imgSrc, progress, width }) {
return (
<svg viewBox="0 0 200 210" width={width}>
<defs>
<mask id="m1">
<circle cx="100" cy="105" r="55" fill="white" />
</mask>
<linearGradient
id="lg1"
gradientTransform="rotate(0) skewX(-20) skewY(-40)"
>
<stop offset="0" stop-color="red" />
<stop offset="75%" stop-color="orange" />
</linearGradient>
</defs>
<image mask="url(#m1)" href={imgSrc} width="200" />
<path
pathLength="360"
d="M100 175 a 75 75 0 1 1 1 0"
stroke="LightSlateGray"
fill="none"
stroke-width="30"
stroke-linecap="round"
stroke-dasharray="270 360"
stroke-dashoffset="-45"
/>
<path
pathLength="360"
d="M100 175 a 75 75 0 1 1 1 0"
stroke="url(#lg1)"
fill="none"
stroke-width="15"
stroke-linecap="round"
stroke-dasharray={`${progress * 270} 360`}
stroke-dashoffset="-45"
/>
<g
transform="translate(100 180)"
font-size="16"
font-family="sans-serif"
font-weight="bold"
text-anchor="middle"
>
<text>Overall</text>
<text transform="translate(0 20)">Wellbeing</text>
</g>
</svg>
);
}
export default CircularBar;
this is where I'm stuck, this is the code for react native side
import React from 'react';
import Svg, {
Circle,
Defs,
G,
Image,
LinearGradient,
Mask,
Path,
Stop,
Text,
} from 'react-native-svg';
function CircularBar({imgSrc, progress, width}) {
return (
<Svg width="200" height="400">
<Defs>
<Mask id="m1">
<Circle cx="100" cy="105" r="500" fill="white" />
</Mask>
<LinearGradient
id="lg1"
gradientTransform="rotate(0) skewX(-20) skewY(-40)">
<Stop offset="0" stop-color="red" />
<Stop offset="75%" stop-color="orange" />
</LinearGradient>
</Defs>
<Image mask="url(#m1)" href={imgSrc} width="200" />
<Path
pathLength="360"
d="M100 175 a 75 75 0 1 1 1 0"
stroke="#778899"
fill="none"
stroke-width="30"
stroke-linecap="round"
stroke-dasharray="270 360"
stroke-dashoffset="-45"
/>
<Path
pathLength="360"
d="M100 175 a 75 75 0 1 1 1 0"
stroke="url(#lg1)"
fill="none"
stroke-width="15"
stroke-linecap="round"
stroke-dasharray={`200 360`}
stroke-dashoffset="-45"
/>
<G
transform="translate(100 180)"
font-size="16"
font-family="sans-serif"
font-weight="bold"
text-anchor="middle">
<Text>Overall</Text>
<Text transform="translate(0 20)">Wellbeing</Text>
</G>
</Svg>
);
}
so I hope you could help me with it

I normally use https://react-svgr.com/playground/?native=true to convert my svg to a react native component.
Make sure you check react-native on the left tab.
Example raw svg
<svg width="40" height="40" viewBox="0 0 40 40" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path opacity="0.1" d="M40 20C40 31.0457 31.0457 40 20 40C8.9543 40 0 31.0457 0
20C0 8.9543 8.9543 0 20 0C31.0457 0 40 8.9543 40 20ZM4 20C4 28.8366 11.1634 36
20 36C28.8366 36 36 28.8366 36 20C36 11.1634 28.8366 4 20 4C11.1634 4 4 11.1634
4 20Z" fill="#2B86C3"/>
<path d="M20 40C16.0979 40 12.281 38.8585 9.01954 36.7161C5.75811 34.5738
3.19463 31.5242 1.64491 27.943C0.0951845 24.3618 -0.373076 20.4054 0.297814
16.5614C0.968704 12.7174 2.74944 9.15359 5.42063 6.30906C8.09182 3.46453
11.5368 1.46353 15.3311 0.552601C19.1254 -0.358333 23.1033 -0.139414 26.7748
1.18239C30.4462 2.50419 33.6508 4.87112 35.9937 7.9916C38.3366 11.1121 39.7155
14.8498 39.9605 18.7442L35.9684 18.9954C35.7724 15.8798 34.6693 12.8897 32.795
10.3933C30.9206 7.8969 28.357 6.00335 25.4198 4.94591C22.4827 3.88847 19.3003
3.71333 16.2649 4.44208C13.2294 5.17083 10.4735 6.77162 8.3365 9.04725C6.19955
11.3229 4.77496 14.1739 4.23825 17.2491C3.70154 20.3244 4.07615 23.4894 5.31593
26.3544C6.5557 29.2193 8.60649 31.659 11.2156 33.3729C13.8248 35.0868 16.8783
36 20 36V40Z" fill="#2B86C3"/>
<path d="M12.6744 14.8182H11.1779L8.63743 16.4787V17.9503L11.0735
16.3594H11.1332V25H12.6744V14.8182ZM18.7894 25.1392C20.8377 25.1392 22.2994
23.6925 22.2944 21.7088C22.2994 19.7401 20.9272 18.3082 19.0728
18.3082C18.3171 18.3082 17.6161 18.5966 17.2184 18.9844H17.1587L17.4819
16.1357H21.8022V14.8182H16.2042L15.6325 19.9489L17.0394 20.1577C17.4222
19.8146 18.1083 19.581 18.7248 19.581C19.9329 19.5909 20.8079 20.4957 20.8079
21.7386C20.8079 22.9616 19.9577 23.8466 18.7894 23.8466C17.805 23.8466 17.0245
23.2202 16.945 22.3452H15.4535C15.5131 23.9659 16.9201 25.1392 18.7894
25.1392ZM27.655 25.169C30.0066 25.169 31.3837 23.25 31.3837 19.9141C31.3837
16.603 29.9867 14.679 27.655 14.679C25.3184 14.679 23.9263 16.598 23.9213
19.9141C23.9213 23.245 25.2985 25.1641 27.655 25.169ZM27.655 23.8416C26.2779
23.8416 25.4476 22.4595 25.4476 19.9141C25.4526 17.3786 26.2828 15.9815 27.655
15.9815C29.0222 15.9815 29.8574 17.3786 29.8574 19.9141C29.8574 22.4595
29.0272 23.8416 27.655 23.8416Z" fill="#2B86C3"/>
</svg>
after converting :
import * as React from "react"
import Svg, { Path } from "react-native-svg"
function SvgComponent(props) {
return (
<Svg
width={props.width}
height={40}
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<Path
opacity={0.1}
d="M40 20c0 11.046-8.954 20-20 20S0 31.046 0 20 8.954 0 20 0s20 8.954 20 20zM4 20c0 8.837 7.163 16 16 16s16-7.163 16-16S28.837 4 20 4 4 11.163 4 20z"
fill="#2B86C3"
/>
<Path
d="M20 40a20 20 0 1119.96-21.256l-3.992.251A16 16 0 1020 36v4z"
fill="#2B86C3"
/>
<Path
d="M12.674 14.818h-1.496l-2.54 1.66v1.472l2.435-1.59h.06V25h1.541V14.818zM18.79 25.14c2.049 0 3.51-1.447 3.505-3.43.005-1.969-1.367-3.4-3.221-3.4-.756 0-1.457.288-1.855.675h-.06l.324-2.848h4.32v-1.318h-5.598l-.572 5.13 1.407.21c.383-.343 1.07-.577 1.686-.577 1.208.01 2.083.915 2.083 2.158 0 1.223-.85 2.108-2.019 2.108-.984 0-1.765-.627-1.844-1.502h-1.492c.06 1.62 1.467 2.794 3.336 2.794zm8.866.03c2.352 0 3.729-1.919 3.729-5.255 0-3.311-1.397-5.235-3.729-5.235-2.337 0-3.729 1.919-3.734 5.235 0 3.331 1.378 5.25 3.734 5.255zm0-1.327c-1.377 0-2.207-1.383-2.207-3.928.005-2.535.835-3.933 2.207-3.933 1.367 0 2.202 1.398 2.202 3.933 0 2.545-.83 3.928-2.202 3.928z"
fill="#2B86C3"
/>
</Svg>
)
}
export default SvgComponent
and use in your component like:
import SvgComponent from '...path.../SvgComponent'
.
.
.
<View>
<SvgComponent width={40} />
<Text>your number</Text>
</View>
make your number over progress with absolute position
I specify width since I have value of width in my svg component is {props.width}
Similarly for numbers and use your own logic.

I found the solution you will have to take a raw SVG , and then used it in SVGXML from react_native_svg
let xml = `
<svg viewBox="0 0 200 210" width="100%"
>
<defs>
<linearGradient id="b" gradientTransform="matrix(1.3054 -.8391 -.36397 1 0 0)">
<stop offset="0" stop-color="red"/>
<stop offset="75%" stop-color="orange"/>
</linearGradient>
<mask id="a">
<circle cx="100" cy="100" r="55" fill="#fff"/>
</mask>
</defs>
<image mask="url(#a)" height="250" width="200" href="https://djelfa.cc/man.png" />
<path pathLength="360" d="M100 175a75 75 0 1 1 1 0" stroke="#789" fill="none" stroke-width="30" stroke-linecap="round" stroke-dasharray="270 360" stroke-dashoffset="-45"/>
<path pathLength="360" d="M100 175a75 75 0 1 1 1 0" stroke="url(#b)" fill="none" stroke-width="15" stroke-linecap="round" stroke-dasharray="${
counter ? counter * 270 : 0
} 360" stroke-dashoffset="-45"/>
<g font-size="16" font-family="sans-serif" font-weight="bold" text-anchor="middle">
<text transform="translate(100 180)">Overall</text>
<text transform="translate(100 200)">Wellbeing</text>
</g>
</svg>
`;
return <SvgXml xml={xml} width="100%" height="100%" />;
the only problem here is how to make the image fit inside the mask, I mean how to make the image contained inside it, that's the difference between my react code and this code even they are the same

Dynamically change color of an SVG class on click in React?

I have a React component that includes a color picker and an SVG with distinct regions that can be filled in independently of each other. My goal here is to be able to click on a color in the color picker and then click on a region of the SVG where it will then be filled with the selected color.
This is the code I have for the component
import React, { useState } from "react";
import { GithubPicker } from "react-color";
//components
import "./css/CustomCreation.css";
function CustomCreation() {
const [color, setColor] = useState("");
const colorList = ["#000000", "#ffffff", "#ff0000"];
return (
<div>
<div>
<GithubPicker
colors={colorList}
color={color}
onChange={(updatedColor) => setColor(updatedColor.hex)}
width="100px"
/>
<div>You selected {color}</div>
</div>
<svg
version="1.0"
xmlns="http://www.w3.org/2000/svg"
width="200"
viewBox="0 0 370.000000 1000.000000"
preserveAspectRatio="xMidYMid meet"
>
<g transform="translate(0.000000,1000.000000) scale(0.100000,-0.100000)">
<g className="outline">
<path
id="outline"
d="M1885,9350C1813,9341,1774,9332,1706,9307C1598,9267,1500,9072,1500,8896C1500,8820,1498,8812,1474,8789C1450,8767,1448,8760,1453,8710C1456,8679,1470,8630,1485,8600C1519,8529,1522,8517,1521,8445C1520,8398,1514,8377,1494,8348C1477,8323,1470,8305,1475,8291C1480,8275,1477,8270,1462,8270C1435,8270,1424,8253,1416,8202C1408,8151,1366,8103,1299,8070C1275,8058,1241,8037,1223,8024C1206,8011,1187,8000,1183,8000C1168,8000,1103,7927,1085,7890C1056,7833,1023,7800,901,7704C825,7645,769,7593,740,7552C571,7321,550,7289,550,7262C550,7246,544,7212,536,7186C526,7153,523,7107,527,7022C532,6903,528,6873,491,6768C473,6715,471,6686,472,6429C472,6235,469,6145,461,6137C455,6131,450,6115,450,6102C450,6089,445,6070,440,6060C434,6050,427,5990,424,5928L418,5815L478,5695C537,5579,608,5474,653,5437C665,5428,704,5405,739,5387C793,5360,810,5344,858,5275C888,5231,929,5179,948,5160C967,5141,990,5109,1001,5089C1011,5069,1030,5040,1043,5024C1089,4969,1092,4955,1071,4913C1061,4892,1044,4827,1035,4768C1019,4667,1019,4649,1035,4468C1054,4253,1054,4238,1040,3951C1033,3822,1025,3736,1016,3716C985,3644,971,3591,966,3515C963,3471,958,3403,954,3363C950,3319,952,3280,959,3259C970,3227,959,3159,938,3135C921,3116,930,3059,956,3020C976,2991,980,2977,972,2967C959,2951,934,2877,925,2827C921,2799,923,2781,935,2763C950,2740,950,2737,934,2725C917,2713,917,2706,927,2658C934,2622,935,2573,929,2505C924,2450,922,2387,925,2365C953,2112,964,2055,987,2032C1000,2019,1010,1999,1010,1987C1010,1974,1026,1886,1046,1790C1065,1694,1082,1606,1082,1595C1082,1584,1091,1523,1102,1460C1125,1328,1123,1230,1097,1202C1073,1176,1076,1161,1105,1150C1125,1142,1130,1134,1128,1113C1125,1089,1129,1085,1152,1082C1178,1079,1180,1076,1180,1030C1180,973,1173,950,1155,950C1147,950,1139,933,1135,909C1128,867,1109,809,1066,701C1014,570,1022,475,1088,441C1108,430,1136,411,1150,398C1177,372,1218,347,1270,324C1289,315,1325,296,1350,280C1375,265,1438,237,1490,218L1585,185L1800,185C1990,185,2019,187,2043,203C2065,217,2070,228,2070,260C2070,313,2059,338,2011,390C1989,415,1970,438,1970,442C1970,445,1932,492,1885,546C1838,600,1800,648,1800,652C1800,665,1846,661,1943,639C1993,627,2067,612,2105,605C2174,593,2358,520,2370,500C2383,478,2526,459,2685,457C2868,455,2929,469,2956,521C2983,574,2975,609,2924,657C2898,681,2873,700,2868,700C2863,700,2843,712,2823,728C2803,743,2757,771,2721,791C2669,819,2650,836,2632,871C2599,933,2583,948,2515,982C2447,1015,2400,1056,2400,1081C2400,1103,2335,1160,2311,1160C2274,1160,2267,1185,2274,1278C2287,1427,2289,1438,2303,1467C2319,1500,2334,1566,2356,1705C2364,1760,2380,1845,2390,1894C2401,1943,2417,2035,2426,2099C2435,2162,2446,2223,2451,2232C2456,2242,2465,2328,2471,2422C2477,2525,2487,2611,2496,2634C2507,2662,2508,2676,2500,2685C2492,2695,2493,2701,2502,2709C2567,2761,2600,2796,2605,2819C2608,2835,2622,2862,2635,2880C2648,2898,2656,2918,2652,2924C2642,2940,2649,3046,2665,3120C2673,3156,2691,3248,2706,3325C2721,3402,2746,3506,2762,3555C2806,3693,2812,3739,2799,3878C2790,3971,2790,4022,2799,4093C2806,4143,2815,4300,2820,4440C2831,4728,2834,4750,2862,4750C2873,4750,2895,4764,2912,4781C2942,4810,2943,4813,2937,4880C2934,4917,2926,4966,2919,4988C2908,5026,2909,5031,2945,5088C2985,5153,3009,5212,3010,5247C3010,5260,2995,5287,2977,5307C2954,5333,2938,5365,2928,5410C2907,5494,2893,5530,2880,5530C2875,5530,2870,5534,2870,5539C2870,5544,2865,5561,2859,5577C2834,5636,2799,5735,2799,5745C2799,5751,2802,5794,2807,5841C2812,5888,2812,5942,2807,5961C2803,5980,2797,6085,2793,6195L2788,6395L2823,6427C2872,6471,2876,6503,2845,6585C2831,6622,2820,6667,2820,6685C2820,6723,2788,6801,2764,6821C2750,6832,2749,6847,2755,6913C2759,6960,2758,6996,2752,7003C2746,7010,2737,7051,2730,7094C2724,7138,2715,7183,2710,7194C2706,7206,2697,7235,2690,7260C2665,7350,2610,7491,2590,7517C2579,7531,2570,7548,2570,7555C2570,7573,2543,7593,2460,7636C2357,7689,2357,7689,2391,7728C2407,7746,2420,7769,2420,7780C2420,7812,2401,7850,2383,7857C2348,7869,2330,7903,2330,7958C2330,8017,2310,8073,2285,8087C2270,8096,2276,8111,2338,8221C2377,8290,2421,8381,2435,8425L2462,8504L2442,8521C2422,8536,2422,8543,2430,8633C2435,8686,2437,8736,2434,8743C2431,8752,2443,8764,2467,8775C2506,8794,2602,8871,2652,8925C2719,8998,2667,9075,2520,9120C2495,9127,2471,9137,2466,9142C2460,9146,2451,9150,2444,9150C2438,9150,2413,9169,2389,9193C2326,9253,2283,9289,2247,9310C2189,9343,2007,9363,1885,9350Z"
fill="black"
/>
</g>
<g className="headwear">
<path
id="cap"
d=" M2161,9299C2199,9288,2243,9268,2259,9257C2356,9184,2379,9166,2377,9164C2376,9163,2355,9166,2330,9170C2305,9175,2233,9179,2170,9179C2035,9179,1922,9154,1820,9099C1733,9053,1580,8911,1559,8858C1536,8799,1529,8831,1541,8937C1548,8996,1560,9045,1579,9085C1595,9118,1613,9160,1620,9177C1633,9211,1710,9270,1740,9270C1750,9270,1775,9277,1796,9287C1830,9301,1933,9314,2053,9318C2075,9319,2123,9311,2161,9299Z"
/>
<path
id="brim"
d=" M2375,9119C2413,9108,2475,9089,2512,9078C2586,9056,2649,9015,2650,8989C2650,8964,2547,8866,2468,8815L2431,8792L2425,8832C2416,8886,2359,8993,2323,9024C2269,9073,2224,9082,2083,9077C1965,9073,1948,9070,1870,9038C1823,9019,1760,8991,1730,8976C1661,8941,1681,8961,1786,9032C1852,9077,1883,9091,1956,9108C2077,9137,2081,9137,2200,9139C2280,9140,2321,9135,2375,9119Z"
/>
</g>
<g className="skin">
<path
id="face"
d="M2267,9010C2326,8976,2364,8915,2376,8833C2379,8807,2387,8777,2391,8768C2404,8744,2390,8560,2376,8560C2363,8560,2252,8616,2232,8633C2216,8646,1899,8644,1799,8630C1762,8625,1692,8607,1642,8590C1593,8574,1549,8560,1545,8560C1542,8560,1528,8585,1514,8615C1473,8709,1487,8798,1539,8771C1571,8753,1580,8758,1580,8792C1580,8828,1635,8885,1704,8920C1741,8939,1922,9019,1960,9033C1968,9036,2029,9039,2095,9039C2210,9040,2217,9039,2267,9010Z"
/>
<path
id="wrist"
d="M1472,4813C1461,4797,1438,4772,1421,4756C1392,4728,1390,4728,1390,4748C1390,4761,1407,4782,1436,4805C1492,4847,1497,4848,1472,4813Z"
/>
</g>
<g className="top">
<path
id="top"
d="M2298,8553C2359,8522,2410,8492,2410,8486C2409,8455,2331,8274,2300,8235C2296,8230,2277,8195,2257,8159L2222,8092L2250,8065C2274,8042,2279,8028,2285,7962C2292,7888,2294,7883,2336,7843C2380,7800,2392,7767,2366,7757C2358,7754,2341,7729,2328,7701L2304,7652L2346,7645C2370,7642,2404,7629,2422,7617C2440,7604,2474,7584,2497,7571C2531,7551,2544,7535,2573,7471C2592,7429,2612,7382,2618,7365C2674,7208,2719,6983,2713,6890C2709,6831,2711,6822,2734,6795C2761,6764,2785,6697,2777,6675C2774,6669,2783,6637,2796,6604C2824,6536,2827,6482,2805,6473C2796,6470,2780,6450,2770,6430C2753,6397,2750,6369,2750,6218C2749,6123,2754,6020,2761,5990C2774,5928,2774,5907,2760,5796C2752,5731,2753,5714,2765,5696C2774,5685,2785,5657,2791,5635C2797,5613,2824,5545,2851,5484C2878,5423,2900,5363,2900,5350C2900,5336,2915,5310,2936,5289C2971,5253,2972,5251,2960,5213C2953,5192,2939,5163,2928,5148C2918,5133,2898,5096,2884,5066C2863,5020,2851,5007,2802,4980C2771,4962,2727,4933,2705,4915C2683,4898,2638,4866,2605,4844C2550,4808,2540,4805,2475,4805C2437,4805,2367,4815,2320,4826C2273,4838,2204,4855,2165,4864C2127,4874,2048,4897,1990,4915C1930,4934,1881,4945,1876,4940C1871,4935,1857,4935,1844,4941C1795,4959,1693,4978,1642,4979C1613,4979,1581,4982,1571,4985C1551,4991,1538,5031,1551,5051C1555,5059,1544,5081,1520,5109C1463,5178,1437,5236,1443,5282C1450,5332,1428,5424,1390,5505C1374,5540,1360,5575,1360,5582C1359,5589,1346,5611,1330,5630C1308,5655,1300,5675,1300,5702C1300,5725,1291,5755,1276,5778C1255,5811,1253,5824,1258,5891C1261,5952,1259,5972,1245,5993C1230,6016,1230,6026,1241,6077C1248,6109,1257,6140,1262,6147C1267,6153,1275,6234,1280,6327C1287,6481,1303,6570,1322,6570C1327,6570,1330,6577,1330,6585C1330,6594,1339,6618,1350,6640C1375,6689,1375,6721,1350,6793C1338,6828,1328,6885,1326,6942C1320,7076,1254,7320,1224,7320C1200,7320,1201,7303,1234,7189C1253,7126,1271,7046,1274,7010C1286,6892,1298,6816,1314,6759L1330,6704L1286,6619L1242,6534L1236,6369C1232,6279,1225,6196,1220,6185C1216,6174,1207,6125,1201,6076C1192,6000,1193,5984,1205,5970C1223,5950,1225,5925,1216,5829C1209,5755,1209,5754,1234,5742C1259,5731,1266,5712,1261,5666C1260,5655,1271,5635,1284,5621C1310,5593,1384,5411,1396,5347C1400,5324,1398,5305,1390,5295C1373,5274,1413,5171,1467,5099C1507,5046,1511,5036,1512,4977C1514,4908,1504,4886,1467,4874C1455,4871,1421,4850,1392,4828C1345,4791,1340,4784,1340,4749C1340,4727,1336,4710,1331,4710C1318,4710,1178,4865,1159,4902C1149,4920,1132,4954,1121,4978C1110,5001,1090,5031,1078,5044C1065,5057,1054,5074,1052,5081C1050,5089,1040,5104,1030,5115C1020,5126,1005,5150,996,5168C987,5185,976,5200,971,5200C967,5200,928,5247,885,5305C815,5400,801,5414,746,5440C671,5475,626,5516,595,5579C581,5606,563,5633,555,5640C547,5647,540,5660,540,5670C540,5680,533,5693,525,5700C517,5706,500,5736,487,5764C465,5811,463,5827,467,5916C470,5972,481,6045,492,6085C510,6147,513,6187,515,6435C517,6666,520,6725,534,6770C568,6880,570,6897,569,7025C567,7186,586,7275,636,7340C654,7365,692,7419,720,7461C778,7550,838,7608,938,7675C978,7701,1016,7732,1021,7742C1026,7752,1036,7760,1043,7760C1057,7760,1074,7784,1106,7851C1130,7900,1201,7967,1260,7997C1300,8018,1348,8051,1407,8098C1441,8126,1449,8139,1454,8180C1460,8221,1465,8229,1491,8240C1517,8251,1521,8257,1516,8280C1513,8299,1517,8314,1530,8327C1544,8342,1550,8370,1555,8438L1562,8528L1599,8538C1619,8543,1671,8558,1715,8570C1772,8586,1836,8594,1940,8599C2199,8611,2173,8614,2298,8553Z"
/>
</g>
<g className="pants">
<path
id="pants"
d="M2877,4963C2873,4960,2874,4952,2879,4946C2892,4929,2901,4827,2890,4810C2885,4802,2861,4790,2838,4785C2787,4772,2793,4799,2785,4520C2782,4407,2772,4241,2763,4151C2749,4011,2749,3967,2759,3851L2771,3715L2732,3595C2710,3529,2680,3405,2666,3320C2651,3235,2635,3157,2630,3148C2616,3122,2599,2963,2606,2925C2611,2898,2608,2890,2591,2881C2579,2874,2570,2864,2570,2858C2570,2834,2528,2760,2514,2760C2506,2760,2490,2750,2479,2739C2463,2723,2459,2710,2463,2685C2467,2660,2464,2647,2448,2633C2432,2619,2429,2607,2434,2579C2442,2529,2423,2250,2410,2235C2405,2229,2393,2174,2384,2114C2375,2054,2353,1924,2335,1825C2316,1726,2296,1611,2289,1570C2275,1478,2258,1442,2224,1434C2198,1427,1933,1434,1925,1441C1923,1443,1925,1483,1930,1530C1935,1577,1944,1722,1951,1852C1961,2043,1961,2102,1951,2157C1934,2247,1939,2653,1958,2672C1976,2690,1973,2705,1946,2737C1927,2760,1922,2781,1916,2862C1909,2953,1910,2961,1930,2982C1956,3011,1953,3044,1923,3048C1893,3052,1894,3056,1931,3098C1965,3136,1964,3126,1937,3287C1928,3345,1910,3396,1880,3456L1837,3542L1864,3628C1887,3703,1889,3716,1876,3728C1837,3768,1800,3691,1737,3439C1723,3386,1708,3334,1702,3323C1679,3282,1668,3130,1681,3049C1693,2974,1692,2961,1668,2929C1659,2916,1660,2909,1673,2896C1681,2887,1693,2880,1699,2880C1718,2880,1711,2864,1688,2852C1675,2846,1648,2835,1626,2828C1581,2813,1566,2784,1573,2728C1579,2686,1553,2642,1479,2565L1441,2525L1437,2280C1435,2145,1427,1959,1420,1867C1410,1743,1410,1694,1418,1677C1424,1665,1432,1588,1434,1505C1441,1308,1443,1296,1458,1277C1466,1268,1470,1244,1468,1219C1464,1169,1467,1170,1300,1140C1168,1115,1170,1115,1170,1145C1170,1159,1163,1173,1155,1176C1147,1180,1142,1185,1144,1189C1146,1192,1153,1230,1159,1272C1167,1332,1167,1358,1156,1396C1148,1423,1139,1479,1136,1520C1132,1561,1123,1620,1116,1650C1108,1680,1097,1730,1091,1760C1086,1790,1076,1842,1069,1875C1063,1908,1055,1954,1050,1978C1046,2002,1033,2034,1021,2050C993,2088,980,2200,971,2475C965,2643,966,2687,977,2696C994,2711,994,2761,975,2787C962,2806,962,2812,975,2844C983,2863,990,2890,990,2903C990,2916,997,2935,1005,2946C1028,2976,1024,3015,995,3034C971,3050,959,3100,979,3100C984,3100,993,3129,1000,3164C1009,3214,1009,3237,1000,3265C991,3293,991,3324,999,3395C1005,3446,1010,3511,1010,3538C1010,3591,1022,3638,1048,3685C1059,3705,1067,3755,1072,3835C1076,3901,1084,4020,1090,4100C1098,4214,1097,4273,1085,4375C1054,4660,1055,4693,1099,4858C1113,4908,1123,4911,1140,4871C1146,4854,1192,4799,1241,4748C1290,4697,1330,4652,1330,4648C1330,4643,1338,4640,1348,4640C1368,4640,1483,4747,1484,4766C1485,4772,1500,4791,1519,4809C1545,4833,1551,4845,1546,4864C1543,4878,1544,4892,1550,4895C1555,4898,1560,4912,1560,4926C1560,4939,1563,4950,1566,4950C1569,4950,1616,4941,1670,4930C1724,4919,1795,4906,1827,4901C1859,4896,1928,4880,1980,4866C2032,4851,2100,4835,2130,4829C2160,4823,2194,4814,2205,4809C2216,4804,2263,4789,2310,4774C2422,4739,2523,4743,2587,4783C2611,4798,2632,4810,2634,4810C2637,4810,2670,4833,2707,4861C2744,4889,2791,4920,2810,4929C2829,4938,2849,4951,2853,4958C2857,4964,2866,4970,2872,4970C2878,4970,2880,4967,2877,4963Z"
/>
</g>
<path
class="gap"
id="gap"
d="M1821,3473C1858,3412,1870,3381,1895,3280C1908,3228,1921,3178,1925,3168C1929,3157,1919,3138,1896,3112C1856,3068,1853,3055,1877,3028C1891,3013,1891,3006,1881,2986C1872,2971,1870,2945,1874,2914C1877,2887,1880,2835,1879,2798C1879,2733,1880,2730,1905,2720C1929,2711,1930,2708,1919,2693C1900,2670,1892,2138,1911,2104C1920,2087,1921,2041,1915,1923C1911,1836,1908,1753,1909,1737C1910,1722,1906,1681,1900,1647C1894,1613,1885,1522,1880,1445C1868,1281,1844,1171,1811,1137C1796,1120,1782,1083,1770,1025C1759,978,1739,917,1724,890L1698,842L1625,918C1556,990,1552,996,1547,1050C1543,1081,1534,1120,1525,1136C1517,1152,1510,1186,1510,1212C1510,1238,1503,1285,1494,1317C1485,1352,1477,1434,1474,1525C1472,1608,1465,1692,1458,1713C1449,1741,1450,1772,1459,1843C1466,1893,1474,2057,1476,2205C1479,2354,1483,2484,1485,2496C1488,2508,1519,2550,1556,2591C1620,2663,1621,2665,1615,2707C1606,2772,1614,2786,1673,2806C1702,2815,1731,2827,1738,2833C1756,2847,1753,2884,1731,2904C1715,2918,1714,2926,1723,2950C1731,2972,1731,2995,1722,3038C1715,3070,1713,3119,1716,3146C1723,3209,1760,3380,1770,3401C1775,3410,1781,3438,1785,3464C1789,3489,1794,3510,1795,3510C1797,3510,1808,3493,1821,3473Z"
fill="white"
/>
<g className="shoes">
<path
id="rightshoe"
d="M2232,1291C2229,1171,2238,1144,2287,1124C2335,1104,2360,1082,2360,1059C2360,1039,2438,971,2496,942C2519,930,2549,907,2561,890C2620,813,2652,782,2697,760C2723,747,2768,719,2797,698C2826,677,2852,660,2857,660C2861,660,2879,646,2897,628C2963,564,2934,517,2818,499C2741,486,2761,486,2600,499C2455,510,2430,518,2230,607C2200,621,2153,635,2125,640C2098,645,2055,654,2030,660C2005,667,1938,679,1881,687C1784,701,1775,705,1741,739L1704,776L1732,820C1766,873,1797,954,1811,1024C1825,1095,1840,1130,1856,1130C1872,1130,1873,1136,1901,1281L1923,1397L2079,1393L2235,1389L2232,1291Z"
/>
<path
id="leftshoe"
d="M1499,1086C1505,1061,1510,1027,1510,1010C1510,983,1523,966,1585,906C1648,846,1660,829,1660,802C1660,776,1671,758,1715,715C1745,684,1770,655,1770,650C1770,633,1837,536,1870,505C1888,489,1927,443,1956,403C1986,364,2014,328,2020,325C2032,318,2033,270,2022,253C2006,227,1953,220,1788,220C1619,220,1617,220,1511,256C1453,275,1389,301,1370,314C1351,326,1319,342,1300,350C1258,366,1160,429,1160,439C1160,443,1148,453,1133,461C1091,482,1084,492,1077,537C1069,586,1102,706,1151,802C1156,811,1163,838,1166,860C1170,883,1183,917,1196,936C1214,962,1220,985,1220,1023L1220,1076L1308,1093C1356,1103,1402,1115,1410,1120C1418,1126,1439,1130,1456,1130C1485,1130,1489,1126,1499,1086Z"
/>
</g>
</g>
</svg>
</div>
);
}
export default CustomCreation;
If I alter a line like this
<g className="headwear" fill={color}>
The corresponding className will successfully be filled to the chosen color.
Is there any way I can get this to function with an onClick in the tag?

I don't know if this fits your needs,but have a look at my codesandbox
https://codesandbox.io/s/amazing-greider-kdjoc
What i did was to declare a new colors variable which will hold as properties all the class names.
then at each g tag i put code like the following:
<g
className="top"
fill={colors.top ? colors.top : "black"}
onClick={() => {
setColors({ ...colors, top: color });
}}
>
my sandbox has this approach for top and pants g tags. You can of course populate all the others too. I just wanted to show you how I made it work.

Of course.
<g
className="headwear"
fill={color}
onClick={() => {
setColor("#FF0000");
}}
>
...
</g>
I would recommend creating a functional react component for the g tag to manage the onClick and color state.

How do I let a user click a color to become a function that changes the fill of an svg object on click

I'm trying to create a color pallette that users can click on that then becomes the color to fill an svg object. kind of like a simple coloring pages for kids. I can't seem to figure out how to tell javascript to save the color, and I can't use php.
I've tried to create an input type color. The problem is the transition between chosing the color and clicking the color
I think my code is not even the direction I should be going..
<input type="color" id="myColor">
<input type="color" id="myColor">
<button class="btn" id="btn-reset">reset</button>
<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"
width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
<path id="path1" fill="#FFFFFF" stroke="#231F20" stroke-miterlimit="10" d="M291.451,51.919v202.54c0,0,164.521,119.846,140.146,0
C407.227,134.613,291.451,51.919,291.451,51.919z"/>
<path id="path2" fill="#FFFFFF" stroke="#231F20" stroke-miterlimit="10" d="M169.595,150.844c0,0-76.24,69.615-40.606,128.309
c35.634,58.695,155.798-51.867,151.654-85.993C276.498,159.034,177.054,89.42,169.595,150.844z"/>
<path id="path3" fill="#FFFFFF" stroke="#231F20" stroke-miterlimit="10" d="M40.332,90.466c0,0-39.911,76.119-2.691,87.83
c37.22,11.71,78.923-46.844,56.054-78.462C70.826,68.216,40.332,90.466,40.332,90.466z"/>
</svg>
</div>
var x = document.getElementById("myColor").value;
document.getElementById("demo").innerHTML = x;
}
I expect the colors at the top to save their color code to fill the paths in the svg onclick. But I can't get it to work. Like a coloring page for kids.

ID must be unique !
const
ChoseColor = document.querySelector('#btn-Color-hidden'),
ResetButton = document.querySelector('#btn-reset'),
All_svgPath = document.querySelectorAll('#Layer_1 path'),
defaultColor = '#FFFFFF',
LayerSVG = document.querySelector('#Layer_1');
var PathColor = null;
LayerSVG.onclick=e=>{
if (!e.target.matches('path')) return;
e.stopPropagation();
PathColor = e.target;
ChoseColor.value = PathColor.getAttribute('fill');
ChoseColor.click();
}
ChoseColor.onchange=_=> {
PathColor.setAttribute('fill', ChoseColor.value)
}
ResetButton.onclick=_=>{
All_svgPath.forEach(p=>{ p.setAttribute('fill', defaultColor) })
}
<input type="color" id="btn-Color-hidden" style="display: none">
<button class="btn" id="btn-reset">reset</button>
<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"
width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
<path id="path1" fill="#FFFFFF" stroke="#231F20" stroke-miterlimit="10" d="M291.451,51.919v202.54c0,0,164.521,119.846,140.146,0
C407.227,134.613,291.451,51.919,291.451,51.919z"/>
<path id="path2" fill="#FFFFFF" stroke="#231F20" stroke-miterlimit="10" d="M169.595,150.844c0,0-76.24,69.615-40.606,128.309
c35.634,58.695,155.798-51.867,151.654-85.993C276.498,159.034,177.054,89.42,169.595,150.844z"/>
<path id="path3" fill="#FFFFFF" stroke="#231F20" stroke-miterlimit="10" d="M40.332,90.466c0,0-39.911,76.119-2.691,87.83
c37.22,11.71,78.923-46.844,56.054-78.462C70.826,68.216,40.332,90.466,40.332,90.466z"/>
</svg>

Categories