How to add SVG icons using vanilla javascript, dynamically - javascript

How would i add SVG icons using vanilla javascript?
In HTML you just put it in, that's it. On javascript I've tried a ton of things, none worked.
And I'm gonna need to add a bunch, dynamically, based on the user actions.
This is how it's implemented in HTML :
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-settings" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="#9E9E9E" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" />
<circle cx="12" cy="12" r="3" />
</svg>
dropping the above anywhere in HTML will lead to a 'settings' icon showing up at that location.

That's quite simple and one liner:
const svgIcon = `<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-settings" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="#9E9E9E" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" /><circle cx="12" cy="12" r="3" /></svg>`;
document.getElementById('targetElement').outerHTML += svgIcon;
<div id="targetElement"></div>

Related

How to use stroke-offset to animating path in this SVG

How can I use stroke-offset to animating path in this SVG? I very appreciate it if anyone can help me.
<svg xmlns="http://www.w3.org/2000/svg" id="logo" width="200" viewBox="0 0 132.64 140.91">
<path id="path1" d="M123.26 15.4C115.58 5 103.78 0 87.17 0H0v6.73h87.17c15.08 0 25.63 4.35 32.26 13.3 7.25 9.78 7.93 18.38 7.93 38.71v23.32c0 20.4-.68 29-7.93 38.83-8.65 11.67-20.62 13.29-32.26 13.29H5.27V33.26H0v107.65h87.17c12.21 0 26-1.83 36.08-15.39 8.95-12.08 9.39-23.79 9.39-43.46V58.74c0-19.6-.44-31.28-9.38-43.34z" fill="#f96464"/>
<path id="path2" d="M109.31 25.48c7.84 9.08 7.76 19.83 7.76 32v25.89c0 12.13 0 22.91-7.83 32-6.79 7.85-15 8.16-25.69 8.16H15.8V33.26h-7v96.42h78.37c11.74 0 22.23-1.79 29.7-11.88 6.11-8.24 7-15 7-35.74V58.74c0-20.72-.87-27.39-7-35.63-6.87-9.22-17.76-11.89-29.7-11.89H0v6.19h83.55c10.67 0 18.97.23 25.76 8.07z" fill="#00aad8"/>
<path id="path3" d="M103.41 33.8c4.67 5.41 4.88 11.38 4.87 23.29v26.32c0 12.09-.2 18.14-4.94 23.62-4.09 4.73-9.42 5.25-19.79 5.25h-59v-79h-5.24V119h64.24c10.75 0 17.69-.46 23.33-7 6.68-7.72 6.68-16.94 6.67-28.62V57.09c0-11.52 0-20.62-6.6-28.28-5.7-6.58-12.61-6.91-23.4-6.91H0v6.73h83.55c10.69 0 15.8.49 19.86 5.17z" fill="'#b7c406"/>
</svg>
This path is drawn with fill. So, I can not use 'stroke-dashoffset'.

changing svg icon color into different color

Is there any way i could achieve this (see pictures), i have tried with fill="white" but that wont give white color to those parts where i want it, its easier to understand with picture below:
what i have done at the moment:
what i want to achieve:
my code:
import React from "react";
function Graph() {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="35"
height="35"
viewBox="0 0 64 64"
>
<path
fill="white"
d="M57 38c0-6.279-4.851-11.438-11-11.949v12.535l7.678 7.678A11.944 11.944 0 0057 38z"
></path>
<path
fill="white"
d="M3 53c0 .551.449 1 1 1h56c.551 0 1-.449 1-1V22H3zm7-2a4 4 0 110-8 4 4 0 010 8zm12 0a4 4 0 110-8 4 4 0 010 8zm23-27c7.72 0 14 6.28 14 14s-6.28 14-14 14-14-6.28-14-14 6.28-14 14-14zM5 38h1v-9h4v9h4V27h4v11h4V25h4v13h1v2H5z"
></path>
<path
fill="white"
d="M45 50c2.693 0 5.174-.903 7.179-2.407L44.586 40H33.181c.956 5.666 5.885 10 11.819 10zM44 26.051c-6.149.511-11 5.67-11 11.949h11zM60 10H4c-.551 0-1 .449-1 1v9h58v-9c0-.551-.449-1-1-1zm-50 7H6v-4h4zm8 0h-4v-4h4zm8 0h-4v-4h4z"
></path>
</svg>
);
}
export default Graph;
You can use react style to insert color to background
<svg
xmlns="http://www.w3.org/2000/svg"
width="35"
height="35"
viewBox="0 0 64 64"
style={{ backgroundColor: "black" }}
>
<path
fill="white"
d="M57 38c0-6.279-4.851-11.438-11-11.949v12.535l7.678 7.678A11.944 11.944 0 0057 38z"
></path>
<path
fill="white"
d="M3 53c0 .551.449 1 1 1h56c.551 0 1-.449 1-1V22H3zm7-2a4 4 0 110-8 4 4 0 010 8zm12 0a4 4 0 110-8 4 4 0 010 8zm23-27c7.72 0 14 6.28 14 14s-6.28 14-14 14-14-6.28-14-14 6.28-14 14-14zM5 38h1v-9h4v9h4V27h4v11h4V25h4v13h1v2H5z"
></path>
<path
fill="white"
d="M45 50c2.693 0 5.174-.903 7.179-2.407L44.586 40H33.181c.956 5.666 5.885 10 11.819 10zM44 26.051c-6.149.511-11 5.67-11 11.949h11zM60 10H4c-.551 0-1 .449-1 1v9h58v-9c0-.551-.449-1-1-1zm-50 7H6v-4h4zm8 0h-4v-4h4zm8 0h-4v-4h4z"
></path>
</svg>
I think your snippet is mostly fine as it is.
If you change all 3 fill="white" to black, and set a white background, it will look as expected

Move masked svg with CSS and JS with mobile chrome based browsers

I have a SVG object.
<svg version="1.1" viewBox="0 0 200 172.29" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(2.2495 0 0 2.2495 -12.814 -35.835)" stroke="#333" stroke-miterlimit="10">
<path d="m78.259 50.602c13.319 2.133 14.25-10.228 14.241-13.55" fill="none" stroke-linecap="round" stroke-width="4.208"/>
<path d="m18.922 56.574h-8.679a2.743 2.743 0 0 1-2.743-2.743v-7.138a2.743 2.743 0 0 1 2.743-2.743h8.679z" fill="#f47e60" stroke-width="3.607"/>
</g>
<g id="pig" transform="matrix(2.2495 0 0 2.2495 -12.814 -35.835)">
<g stroke="#333" stroke-miterlimit="10">
<path d="m28.203 82.098-4.803-1.462a3.1 3.1 0 0 1-2.063-3.868l4.713-15.483 10.734 3.268-4.713 15.483a3.1 3.1 0 0 1-3.868 2.062z" fill="#f47e60" stroke-width="4.097"/>
<path d="m66.242 82.072 5.22-1.589a3.19 3.19 0 0 0 2.123-3.982l-4.687-15.396-11.325 3.447 4.687 15.396a3.191 3.191 0 0 0 3.982 2.124z" fill="#f47e60" stroke-width="4.208"/>
<path d="m47.707 22.636c-4.499 0-8.788 0.727-12.712 2.035a11.28 11.28 0 0 0-0.945-1.545c-1.313-1.822-3.247-3.34-5.477-4.281-2.24-0.929-4.738-1.33-7.275-0.916 1.534 1.694 3.452 6.355 3.452 6.355s1.017 2.311 2 4.334c-7.785 5.062-12.784 12.872-12.784 21.644 0 15.257 15.106 27.626 33.74 27.626s33.74-12.369 33.74-27.626c1e-3 -15.258-15.105-27.626-33.739-27.626z" fill="#f8b26a" stroke-linejoin="round" stroke-width="3.673"/>
</g>
</g>
<g transform="matrix(2.2495 0 0 2.2495 -12.814 -35.835)">
<path d="m57.851 31.201a35.536 35.536 0 0 0-10.145-1.457c-2.78 0-5.468 0.315-8.019 0.902" fill="#f8b26a" stroke="#333" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="3.673"/>
<circle cx="27.608" cy="42.441" r="3.574" fill="#333"/>
</g>
<path id="pigFill" d="m77.485 10.578a2.6994 3.5305 0 0 0-2.2803 1.5975l-2.1748 4.3372a2.6994 3.5305 0 0 0 0.08348 4.0307h-4.4682l-0.03515-0.61297a2.7039 3.5362 0 0 0-2.9041-3.2552l-3.9542 0.39936a2.7039 3.5362 0 0 0-2.4956 3.4689h-29.179v116.56h129.39v-116.56h-12.342l0.65024-1.8947c0.49715-1.4534-3.1e-4 -3.1577-1.1116-3.808l-4.5341-2.6515a2.2045 2.8831 0 0 0-2.9129 1.4535l-2.3593 6.9005h-1.8673a2.6994 3.5305 0 0 0 0.0396-1.8621l-0.94903-5.0384a2.7017 3.5333 0 0 0-3.2688-2.5866l-14.912 4.7923-1.4323-3.0928a2.7039 3.5362 0 0 0-3.7126-1.1888l-3.3918 2.6841a2.7039 3.5362 0 0 0-0.99296 4.6622l-1.2522 0.404a2.7017 3.5333 0 0 0-1.4631 1.2259h-0.61511l-3.4928-5.8884a2.7039 3.5362 0 0 0-3.7916-0.6269l-3.1327 3.1762a2.7039 3.5362 0 0 0-1.0105 3.3389h-1.7355l-10.936-9.3851a2.6994 3.5305 0 0 0-1.4631-0.58047z" fill="#66503a" stroke-width="1.4711"/>
</svg>
with a masked part declared using CSS
#pigFill {
clip-path: ellipse(64px 54px at 64px -36px);
transform: translate(0px,100px);
}
I wrote a piece of JS to move the mask and it's content
$("#pigFill").css("clip-path", "ellipse(64px 54px at 64px "+clippathVal+"px)");
$("#pigFill").css("transform", "translate(0px,"+translateVal+"px)");
Here's the codepen POC https://codepen.io/Chagam/pen/wvozYPr
It's working ok, except with chrome based browsers on android such as Brave or Chrome. the animated part has wrong position and size. The transform: translate(0px,100px); seems to break everything. But it works as expected on firefox and safari.
Is there an other way to get the same result working on all browsers ?
Found a way to have it work on every browsers !!
Heres is the full fix : https://codepen.io/Chagam/pen/jOVyRYO
Basically changed 'translate' to 'translateY' as I only translate vertically.
#pigFill {
clip-path: ellipse(50% 43% at 50% -43%);
transform: translateY(70%);
}
$("#pigFill").css("clip-path", "ellipse(50% 43% at 50% "+clippathVal+"%)");
$("#pigFill").css("transform", "translateY("+translateVal+"%)");
I also changed translate and clip path values from px to %

How to I modify color in an SVG in React?

I'm looking to modify the color of an SVG. I'm currently attempting to modify the file directly however with no luck. I'm using react and here is the code for the SVG I'm trying to edit.
import * as React from "react";
const ReduceCosts: React.FC = (props: React.SVGProps<SVGSVGElement>) => {
return (
<svg
width="55px"
height="65px"
viewBox="0 0 53 45"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<title>{"Reduce Costs Icon#1x"}</title>
<defs>
<filter id="prefix__a">
<feColorMatrix
in="SourceGraphic"
values="0 0 0 0 0.870588 0 0 0 0 0.172549 0 0 0 0 0.058824 0 0 0 1.000000 0"
/>
</filter>
</defs>
<g
transform="translate(1 -4)"
filter="url(#prefix__a)"
fill="none"
fillRule="evenodd"
>
<g stroke="#000" fill="#000">
<path d="M43.822 28.67c-.3-.193-.58-.413-.84-.656-.93-.893-1.36-1.932-1.092-2.657.204-.562.525-.866.887-.903h.079c.473.035.9.3 1.139.709.62 1.06.457 2.152-.173 3.522v-.015zm4.625 1.05a.93.93 0 00-1.218-.494h0a3.001 3.001 0 01-1.68.157c.73-1.616 1.097-3.375.047-5.15a3.23 3.23 0 00-2.992-1.612 2.957 2.957 0 00-2.463 2.1c-.525 1.44.069 3.22 1.575 4.641a7.47 7.47 0 001.229.946 2.723 2.723 0 01-1.512 1.05c-.714.152-1.528-.1-2.415-.751a14.01 14.01 0 00-4.898-7.518.929.929 0 10-1.176 1.433c2.913 2.43 4.536 5.623 4.536 9.015 0 3.759-2.032 7.312-5.57 9.759a.92.92 0 00-.384.945l1.14 5.712h-5.077a.4.4 0 01-.336-.23l-.64-3.061a.924.924 0 00-1.093-.714c-2.814.51-5.696.51-8.51 0a.924.924 0 00-1.092.714l-.64 3.013a.397.397 0 01-.337.23H9.87l1.134-5.276a.934.934 0 00-.635-1.086 7.26 7.26 0 01-4.515-4.347.925.925 0 00-.856-.578h-2.51a3.465 3.465 0 01-.63-.036v-5.864c0-.756.394-.756.588-.756h1.959a.93.93 0 00.908-.725 11.547 11.547 0 012.662-5.124.941.941 0 00.23-.688c-.178-2.247-1.018-3.633-1.91-5.103l-.231-.383c2.966-.126 5.376.525 7.014 1.88a.93.93 0 00.934.152 18.388 18.388 0 013.638-.96.93.93 0 10-.304-1.833 21.01 21.01 0 00-3.491.892c-1.717-1.233-4.641-2.41-9.45-1.848a.934.934 0 00-.714 1.36c.336.64.672 1.187.997 1.722.777 1.286 1.407 2.32 1.607 3.911A13.284 13.284 0 003.67 30.12H2.446C.982 30.119 0 31.169 0 32.718v5.827c0 1.974 1.869 1.974 2.488 1.974h1.917a9.087 9.087 0 004.61 4.568L8.01 49.748c-.108.5.016 1.02.336 1.418.36.428.891.67 1.45.661l5.144-.03a2.205 2.205 0 002.142-1.697l.447-2.157c2.464.35 4.965.35 7.428 0l.452 2.142a2.221 2.221 0 002.147 1.695l5.14.032a1.842 1.842 0 001.438-.651 1.7 1.7 0 00.347-1.413l-1.05-5.28c3.77-2.783 5.901-6.731 5.901-10.931v-.599a4.163 4.163 0 002.488.257 4.663 4.663 0 002.846-2.1 4.89 4.89 0 003.292-.147.935.935 0 00.489-1.228h-.001z" />
<path d="M27.752 6.384a6.872 6.872 0 11-6.873 6.872v-.005a6.878 6.878 0 016.873-6.873v.006zm0 15.603a8.73 8.73 0 10-8.731-8.736 8.741 8.741 0 008.73 8.736h0z" />
</g>
</g>
</svg>
);
};
export default React.memo(ReduceCosts);
I understand that I should be changing the fill and/or stroke value. However I can't manage to adjust the color of this thing which is showing orange, although the stroke and fill values are currently #000. Thanks.
The SVG you're using uses feColorMatrix which changes the hue of the color.
I removed that for you below and added the orange into the stroke and fill color.
<svg
width="55px"
height="65px"
viewBox="0 0 53 45"
xmlns="http://www.w3.org/2000/svg"
>
<title>Something</title>
<g
transform="translate(1 -4)"
fill="none"
fillRule="evenodd"
>
<g stroke="#F07345" fill="#F07345">
<path d="M43.822 28.67c-.3-.193-.58-.413-.84-.656-.93-.893-1.36-1.932-1.092-2.657.204-.562.525-.866.887-.903h.079c.473.035.9.3 1.139.709.62 1.06.457 2.152-.173 3.522v-.015zm4.625 1.05a.93.93 0 00-1.218-.494h0a3.001 3.001 0 01-1.68.157c.73-1.616 1.097-3.375.047-5.15a3.23 3.23 0 00-2.992-1.612 2.957 2.957 0 00-2.463 2.1c-.525 1.44.069 3.22 1.575 4.641a7.47 7.47 0 001.229.946 2.723 2.723 0 01-1.512 1.05c-.714.152-1.528-.1-2.415-.751a14.01 14.01 0 00-4.898-7.518.929.929 0 10-1.176 1.433c2.913 2.43 4.536 5.623 4.536 9.015 0 3.759-2.032 7.312-5.57 9.759a.92.92 0 00-.384.945l1.14 5.712h-5.077a.4.4 0 01-.336-.23l-.64-3.061a.924.924 0 00-1.093-.714c-2.814.51-5.696.51-8.51 0a.924.924 0 00-1.092.714l-.64 3.013a.397.397 0 01-.337.23H9.87l1.134-5.276a.934.934 0 00-.635-1.086 7.26 7.26 0 01-4.515-4.347.925.925 0 00-.856-.578h-2.51a3.465 3.465 0 01-.63-.036v-5.864c0-.756.394-.756.588-.756h1.959a.93.93 0 00.908-.725 11.547 11.547 0 012.662-5.124.941.941 0 00.23-.688c-.178-2.247-1.018-3.633-1.91-5.103l-.231-.383c2.966-.126 5.376.525 7.014 1.88a.93.93 0 00.934.152 18.388 18.388 0 013.638-.96.93.93 0 10-.304-1.833 21.01 21.01 0 00-3.491.892c-1.717-1.233-4.641-2.41-9.45-1.848a.934.934 0 00-.714 1.36c.336.64.672 1.187.997 1.722.777 1.286 1.407 2.32 1.607 3.911A13.284 13.284 0 003.67 30.12H2.446C.982 30.119 0 31.169 0 32.718v5.827c0 1.974 1.869 1.974 2.488 1.974h1.917a9.087 9.087 0 004.61 4.568L8.01 49.748c-.108.5.016 1.02.336 1.418.36.428.891.67 1.45.661l5.144-.03a2.205 2.205 0 002.142-1.697l.447-2.157c2.464.35 4.965.35 7.428 0l.452 2.142a2.221 2.221 0 002.147 1.695l5.14.032a1.842 1.842 0 001.438-.651 1.7 1.7 0 00.347-1.413l-1.05-5.28c3.77-2.783 5.901-6.731 5.901-10.931v-.599a4.163 4.163 0 002.488.257 4.663 4.663 0 002.846-2.1 4.89 4.89 0 003.292-.147.935.935 0 00.489-1.228h-.001z" />
<path d="M27.752 6.384a6.872 6.872 0 11-6.873 6.872v-.005a6.878 6.878 0 016.873-6.873v.006zm0 15.603a8.73 8.73 0 10-8.731-8.736 8.741 8.741 0 008.73 8.736h0z" />
</g>
</g>
</svg>
Now you can use that to change the color more direclty
<svg
width="55px"
height="65px"
viewBox="0 0 53 45"
xmlns="http://www.w3.org/2000/svg"
>
<title>Something</title>
<g
transform="translate(1 -4)"
fill="none"
fillRule="evenodd"
>
<g stroke="blue" fill="blue">
<path d="M43.822 28.67c-.3-.193-.58-.413-.84-.656-.93-.893-1.36-1.932-1.092-2.657.204-.562.525-.866.887-.903h.079c.473.035.9.3 1.139.709.62 1.06.457 2.152-.173 3.522v-.015zm4.625 1.05a.93.93 0 00-1.218-.494h0a3.001 3.001 0 01-1.68.157c.73-1.616 1.097-3.375.047-5.15a3.23 3.23 0 00-2.992-1.612 2.957 2.957 0 00-2.463 2.1c-.525 1.44.069 3.22 1.575 4.641a7.47 7.47 0 001.229.946 2.723 2.723 0 01-1.512 1.05c-.714.152-1.528-.1-2.415-.751a14.01 14.01 0 00-4.898-7.518.929.929 0 10-1.176 1.433c2.913 2.43 4.536 5.623 4.536 9.015 0 3.759-2.032 7.312-5.57 9.759a.92.92 0 00-.384.945l1.14 5.712h-5.077a.4.4 0 01-.336-.23l-.64-3.061a.924.924 0 00-1.093-.714c-2.814.51-5.696.51-8.51 0a.924.924 0 00-1.092.714l-.64 3.013a.397.397 0 01-.337.23H9.87l1.134-5.276a.934.934 0 00-.635-1.086 7.26 7.26 0 01-4.515-4.347.925.925 0 00-.856-.578h-2.51a3.465 3.465 0 01-.63-.036v-5.864c0-.756.394-.756.588-.756h1.959a.93.93 0 00.908-.725 11.547 11.547 0 012.662-5.124.941.941 0 00.23-.688c-.178-2.247-1.018-3.633-1.91-5.103l-.231-.383c2.966-.126 5.376.525 7.014 1.88a.93.93 0 00.934.152 18.388 18.388 0 013.638-.96.93.93 0 10-.304-1.833 21.01 21.01 0 00-3.491.892c-1.717-1.233-4.641-2.41-9.45-1.848a.934.934 0 00-.714 1.36c.336.64.672 1.187.997 1.722.777 1.286 1.407 2.32 1.607 3.911A13.284 13.284 0 003.67 30.12H2.446C.982 30.119 0 31.169 0 32.718v5.827c0 1.974 1.869 1.974 2.488 1.974h1.917a9.087 9.087 0 004.61 4.568L8.01 49.748c-.108.5.016 1.02.336 1.418.36.428.891.67 1.45.661l5.144-.03a2.205 2.205 0 002.142-1.697l.447-2.157c2.464.35 4.965.35 7.428 0l.452 2.142a2.221 2.221 0 002.147 1.695l5.14.032a1.842 1.842 0 001.438-.651 1.7 1.7 0 00.347-1.413l-1.05-5.28c3.77-2.783 5.901-6.731 5.901-10.931v-.599a4.163 4.163 0 002.488.257 4.663 4.663 0 002.846-2.1 4.89 4.89 0 003.292-.147.935.935 0 00.489-1.228h-.001z" />
<path d="M27.752 6.384a6.872 6.872 0 11-6.873 6.872v-.005a6.878 6.878 0 016.873-6.873v.006zm0 15.603a8.73 8.73 0 10-8.731-8.736 8.741 8.741 0 008.73 8.736h0z" />
</g>
</g>
</svg>
So your react component would look like this:
import * as React from "react";
const ReduceCosts: React.FC = (props: React.SVGProps<SVGSVGElement>) => {
return (
<svg
width="55px"
height="65px"
viewBox="0 0 53 45"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<title>{"Reduce Costs Icon#1x"}</title>
<g
transform="translate(1 -4)"
fill="none"
fillRule="evenodd"
>
<g stroke="#000" fill="#000">
<path d="M43.822 28.67c-.3-.193-.58-.413-.84-.656-.93-.893-1.36-1.932-1.092-2.657.204-.562.525-.866.887-.903h.079c.473.035.9.3 1.139.709.62 1.06.457 2.152-.173 3.522v-.015zm4.625 1.05a.93.93 0 00-1.218-.494h0a3.001 3.001 0 01-1.68.157c.73-1.616 1.097-3.375.047-5.15a3.23 3.23 0 00-2.992-1.612 2.957 2.957 0 00-2.463 2.1c-.525 1.44.069 3.22 1.575 4.641a7.47 7.47 0 001.229.946 2.723 2.723 0 01-1.512 1.05c-.714.152-1.528-.1-2.415-.751a14.01 14.01 0 00-4.898-7.518.929.929 0 10-1.176 1.433c2.913 2.43 4.536 5.623 4.536 9.015 0 3.759-2.032 7.312-5.57 9.759a.92.92 0 00-.384.945l1.14 5.712h-5.077a.4.4 0 01-.336-.23l-.64-3.061a.924.924 0 00-1.093-.714c-2.814.51-5.696.51-8.51 0a.924.924 0 00-1.092.714l-.64 3.013a.397.397 0 01-.337.23H9.87l1.134-5.276a.934.934 0 00-.635-1.086 7.26 7.26 0 01-4.515-4.347.925.925 0 00-.856-.578h-2.51a3.465 3.465 0 01-.63-.036v-5.864c0-.756.394-.756.588-.756h1.959a.93.93 0 00.908-.725 11.547 11.547 0 012.662-5.124.941.941 0 00.23-.688c-.178-2.247-1.018-3.633-1.91-5.103l-.231-.383c2.966-.126 5.376.525 7.014 1.88a.93.93 0 00.934.152 18.388 18.388 0 013.638-.96.93.93 0 10-.304-1.833 21.01 21.01 0 00-3.491.892c-1.717-1.233-4.641-2.41-9.45-1.848a.934.934 0 00-.714 1.36c.336.64.672 1.187.997 1.722.777 1.286 1.407 2.32 1.607 3.911A13.284 13.284 0 003.67 30.12H2.446C.982 30.119 0 31.169 0 32.718v5.827c0 1.974 1.869 1.974 2.488 1.974h1.917a9.087 9.087 0 004.61 4.568L8.01 49.748c-.108.5.016 1.02.336 1.418.36.428.891.67 1.45.661l5.144-.03a2.205 2.205 0 002.142-1.697l.447-2.157c2.464.35 4.965.35 7.428 0l.452 2.142a2.221 2.221 0 002.147 1.695l5.14.032a1.842 1.842 0 001.438-.651 1.7 1.7 0 00.347-1.413l-1.05-5.28c3.77-2.783 5.901-6.731 5.901-10.931v-.599a4.163 4.163 0 002.488.257 4.663 4.663 0 002.846-2.1 4.89 4.89 0 003.292-.147.935.935 0 00.489-1.228h-.001z" />
<path d="M27.752 6.384a6.872 6.872 0 11-6.873 6.872v-.005a6.878 6.878 0 016.873-6.873v.006zm0 15.603a8.73 8.73 0 10-8.731-8.736 8.741 8.741 0 008.73 8.736h0z" />
</g>
</g>
</svg>
);
};
export default React.memo(ReduceCosts);

css transition finished before the seconds specified

created SVG circle using path, filled the stroke with animation for particular seconds. the animation finished before the specified seconds gets over. how to resolve
<svg class="progress" id="value-svg" viewBox="0 0 115 115" data-value="66">
<path class="bg"
d="M 107,57 A 50,50 0 0 1 56,107 50,50 0 0 1 6,57 50,50 0 0 1 56,6 50,50 0 0 1 107,57 Z"
style="fill:none;stroke-width:12;stroke-opacity:1" />
<path class="meter"
d="M 107,57 A 50,50 0 0 1 56,107 50,50 0 0 1 6,57 50,50 0 0 1 56,6 50,50 0 0 1 107,57 Z"
style="fill:none;stroke-width:12;stroke-opacity:1"
stroke-dasharray="318" stroke-dashoffset="318" />
<text x="50%" y="50%" id="progress-text" text-anchor="middle" dy=".3em">04:00</text>
</svg>
and set stroke-dashoffset from script
value[i].style.transition = value[i].style.WebkitTransition = `stroke-dashoffset ${this.waitime}s ease-in-out`;
value[i].style.strokeDashoffset = '0';

Categories