We Keep Coding

Any downsides to copying svg of React Icons instead of importing the element?

Using React Icons, I imported about 15 icon elements. Then I realized in DevTools that I can simply copy the SVG that the React Icon element produces. I'm mainly concerned about performance and I'm using Webpack to build my React App. With that in mind, I'm wondering what costs the least computing and/or data between the two. I figured using the SVG element is less importing work which may lower the size of the payload a little bit?
If it helps to visualize this, I'm wondering if using a React icon like this...
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="28" width="28" xmlns="http://www.w3.org/2000/svg"><path d="M418.2 177.2c-5.4-1.8-10.8-3.5-16.2-5.1.9-3.7 1.7-7.4 2.5-11.1 12.3-59.6 4.2-107.5-23.1-123.3-26.3-15.1-69.2.6-112.6 38.4-4.3 3.7-8.5 7.6-12.5 11.5-2.7-2.6-5.5-5.2-8.3-7.7-45.5-40.4-91.1-57.4-118.4-41.5-26.2 15.2-34 60.3-23 116.7 1.1 5.6 2.3 11.1 3.7 16.7-6.4 1.8-12.7 3.8-18.6 5.9C38.3 196.2 0 225.4 0 255.6c0 31.2 40.8 62.5 96.3 81.5 4.5 1.5 9 3 13.6 4.3-1.5 6-2.8 11.9-4 18-10.5 55.5-2.3 99.5 23.9 114.6 27 15.6 72.4-.4 116.6-39.1 3.5-3.1 7-6.3 10.5-9.7 4.4 4.3 9 8.4 13.6 12.4 42.8 36.8 85.1 51.7 111.2 36.6 27-15.6 35.8-62.9 24.4-120.5-.9-4.4-1.9-8.9-3-13.5 3.2-.9 6.3-1.9 9.4-2.9 57.7-19.1 99.5-50 99.5-81.7 0-30.3-39.4-59.7-93.8-78.4zM282.9 92.3c37.2-32.4 71.9-45.1 87.7-36 16.9 9.7 23.4 48.9 12.8 100.4-.7 3.4-1.4 6.7-2.3 10-22.2-5-44.7-8.6-67.3-10.6-13-18.6-27.2-36.4-42.6-53.1 3.9-3.7 7.7-7.2 11.7-10.7zM167.2 307.5c5.1 8.7 10.3 17.4 15.8 25.9-15.6-1.7-31.1-4.2-46.4-7.5 4.4-14.4 9.9-29.3 16.3-44.5 4.6 8.8 9.3 17.5 14.3 26.1zm-30.3-120.3c14.4-3.2 29.7-5.8 45.6-7.8-5.3 8.3-10.5 16.8-15.4 25.4-4.9 8.5-9.7 17.2-14.2 26-6.3-14.9-11.6-29.5-16-43.6zm27.4 68.9c6.6-13.8 13.8-27.3 21.4-40.6s15.8-26.2 24.4-38.9c15-1.1 30.3-1.7 45.9-1.7s31 .6 45.9 1.7c8.5 12.6 16.6 25.5 24.3 38.7s14.9 26.7 21.7 40.4c-6.7 13.8-13.9 27.4-21.6 40.8-7.6 13.3-15.7 26.2-24.2 39-14.9 1.1-30.4 1.6-46.1 1.6s-30.9-.5-45.6-1.4c-8.7-12.7-16.9-25.7-24.6-39s-14.8-26.8-21.5-40.6zm180.6 51.2c5.1-8.8 9.9-17.7 14.6-26.7 6.4 14.5 12 29.2 16.9 44.3-15.5 3.5-31.2 6.2-47 8 5.4-8.4 10.5-17 15.5-25.6zm14.4-76.5c-4.7-8.8-9.5-17.6-14.5-26.2-4.9-8.5-10-16.9-15.3-25.2 16.1 2 31.5 4.7 45.9 8-4.6 14.8-10 29.2-16.1 43.4zM256.2 118.3c10.5 11.4 20.4 23.4 29.6 35.8-19.8-.9-39.7-.9-59.5 0 9.8-12.9 19.9-24.9 29.9-35.8zM140.2 57c16.8-9.8 54.1 4.2 93.4 39 2.5 2.2 5 4.6 7.6 7-15.5 16.7-29.8 34.5-42.9 53.1-22.6 2-45 5.5-67.2 10.4-1.3-5.1-2.4-10.3-3.5-15.5-9.4-48.4-3.2-84.9 12.6-94zm-24.5 263.6c-4.2-1.2-8.3-2.5-12.4-3.9-21.3-6.7-45.5-17.3-63-31.2-10.1-7-16.9-17.8-18.8-29.9 0-18.3 31.6-41.7 77.2-57.6 5.7-2 11.5-3.8 17.3-5.5 6.8 21.7 15 43 24.5 63.6-9.6 20.9-17.9 42.5-24.8 64.5zm116.6 98c-16.5 15.1-35.6 27.1-56.4 35.3-11.1 5.3-23.9 5.8-35.3 1.3-15.9-9.2-22.5-44.5-13.5-92 1.1-5.6 2.3-11.2 3.7-16.7 22.4 4.8 45 8.1 67.9 9.8 13.2 18.7 27.7 36.6 43.2 53.4-3.2 3.1-6.4 6.1-9.6 8.9zm24.5-24.3c-10.2-11-20.4-23.2-30.3-36.3 9.6.4 19.5.6 29.5.6 10.3 0 20.4-.2 30.4-.7-9.2 12.7-19.1 24.8-29.6 36.4zm130.7 30c-.9 12.2-6.9 23.6-16.5 31.3-15.9 9.2-49.8-2.8-86.4-34.2-4.2-3.6-8.4-7.5-12.7-11.5 15.3-16.9 29.4-34.8 42.2-53.6 22.9-1.9 45.7-5.4 68.2-10.5 1 4.1 1.9 8.2 2.7 12.2 4.9 21.6 5.7 44.1 2.5 66.3zm18.2-107.5c-2.8.9-5.6 1.8-8.5 2.6-7-21.8-15.6-43.1-25.5-63.8 9.6-20.4 17.7-41.4 24.5-62.9 5.2 1.5 10.2 3.1 15 4.7 46.6 16 79.3 39.8 79.3 58 0 19.6-34.9 44.9-84.8 61.4zm-149.7-15c25.3 0 45.8-20.5 45.8-45.8s-20.5-45.8-45.8-45.8c-25.3 0-45.8 20.5-45.8 45.8s20.5 45.8 45.8 45.8z"></path></svg>
will load faster than importing the same icon like this:
import {FaReact} from 'react-icons/fa';
const Example = () => {
return <FaReact/>
}

How to alter SVG-element on a web-page with contebnt from a new file?

I use SVGInject to load svg-images inline:
<img src="image1.svg" id="changeme" onload="SVGInject(this)" />
This works like a charm, and the image can be moved, rotated etc.
But is it possible to later "change" the image maybe?
document.getElementById('changeme').src = 'image2.svg';
SVGInject(document.getElementById('changeme'));
This does NOT work.
Should the object be reloaded? Or the original destroyed and a new created...
cheers

Replacing the svg won't work as svg-inject.js removes the original img element.
Thus, document.getElementById('changeme') can't select or replace anything.
You might wrap the original SVGInject(el) function in a helper function that's cloning the img element before inlining svg.
This way you can replace the img src, remove the previously inlined svg and finally re-inject the changed svg url.
/// find and replace all svgs with class name "svg-replace"
var svgInjects = document.querySelectorAll('.svg-replace');
if(svgInjects.length){
for(var i=0; i<svgInjects.length; i++){
var svgEl = svgInjects[i];
// modified inject function
SVGInjectCloned(svgEl);
}
}
function SVGInjectCloned(svgEl){
var svgCloned = svgEl.cloneNode(true);
svgEl.parentNode.appendChild(svgCloned);
/// hide original
svgEl.setAttribute('style', 'display:none');
// inline svg
SVGInject(svgCloned);
//console.log('svg inlined');
}
function replaceSvg(previousSvgEl, newSvgUrl){
var svgEl = document.querySelector(previousSvgEl);
// find and delete previously inlined svg
var inlinedSvg = svgEl.nextElementSibling;
if(inlinedSvg){
inlinedSvg.remove();
/// make original visible again
svgEl.removeAttribute('style');
// update svg src
svgEl.src = newSvgUrl;
// reclone svg element for inlining
var svgCloned = svgEl.cloneNode(true);
svgEl.parentNode.appendChild(svgCloned);
/// hide original
svgEl.setAttribute('style', 'display:none');
SVGInject(svgCloned);
}
}
// example button
var newSvgUrl =
"data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='user-friends' class='svg-inline--fa fa-user-friends fa-w-20' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath fill='currentColor' d='M192 256c61.9 0 112-50.1 112-112S253.9 32 192 32 80 82.1 80 144s50.1 112 112 112zm76.8 32h-8.3c-20.8 10-43.9 16-68.5 16s-47.6-6-68.5-16h-8.3C51.6 288 0 339.6 0 403.2V432c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zM480 256c53 0 96-43 96-96s-43-96-96-96-96 43-96 96 43 96 96 96zm48 32h-3.8c-13.9 4.8-28.6 8-44.2 8s-30.3-3.2-44.2-8H432c-20.4 0-39.2 5.9-55.7 15.4 24.4 26.3 39.7 61.2 39.7 99.8v38.4c0 2.2-.5 4.3-.6 6.4H592c26.5 0 48-21.5 48-48 0-61.9-50.1-112-112-112z'%3E%3C/path%3E%3C/svg%3E";
var btnSvgReplace = document.querySelector('.btnSvgReplace');
if(btnSvgReplace){
btnSvgReplace.addEventListener('click', function(){
replaceSvg('#firstSvg',
newSvgUrl
);
});
}
img,
svg
{
width:100px;
height:100px;
}
<script src="https://cdn.jsdelivr.net/npm/#iconfu/svg-inject#1.2.3/dist/svg-inject.min.js"></script>
<div class="svg-wrp">
<img src="data:image/svg+xml,%0A%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='users' class='svg-inline--fa fa-users fa-w-20' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath fill='currentColor' d='M96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm448 0c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm32 32h-64c-17.6 0-33.5 7.1-45.1 18.6 40.3 22.1 68.9 62 75.1 109.4h66c17.7 0 32-14.3 32-32v-32c0-35.3-28.7-64-64-64zm-256 0c61.9 0 112-50.1 112-112S381.9 32 320 32 208 82.1 208 144s50.1 112 112 112zm76.8 32h-8.3c-20.8 10-43.9 16-68.5 16s-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zm-223.7-13.4C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z'%3E%3C/path%3E%3C/svg%3E" class="svg-replace" id="firstSvg" />
</div>
<p><button class="btnSvgReplace">Replace svg</button></p>

Is it possible to create single path SVG for below image?

I was able to create this(however it has the transparent part at the center - want it solid white)
"M62,31c0,17.1-13.9,31-31,31S0,48.1,0,31S13.9,0,31,0S62,13.9,62,31z M48.5,43.9L46,44l-7.3-11.3 c-0.5-0.8-1.4-1.2-2.3-1.2L26.7,32l-0.2-2.8l9.6-2.7c0.9-0.3,1.4-1.2,1.2-2.1c-0.2-0.9-1.2-1.4-2.1-1.2l-8.9,2.5L25.9,19 c-0.1-1.4-1.3-2.5-2.7-2.4c-1.4,0.1-2.5,1.3-2.4,2.7l0.9,15.6c0.1,1.4,1.3,2.5,2.7,2.4l10.7-0.6L42.5,48c0.5,0.7,1.3,1.2,2.1,1.2 c0,0,0.1,0,0.1,0l4-0.1c1.4-0.1,2.5-1.2,2.5-2.6C51.1,44.9,49.9,43.8,48.5,43.9z M23.4,6c-2.8,0-5.1,2.3-5.1,5.1s2.3,5.1,5.1,5.1 s5.1-2.3,5.1-5.1S26.2,6,23.4,6z M35.2,42.4c-0.2,5.7-4.8,10.2-10.5,10.2c-5.8,0-10.5-4.7-10.5-10.5c0-3.5,1.8-6.7,4.5-8.6v-3.9 c-4.6,2.3-7.9,7-7.9,12.5c0,7.7,6.2,13.9,13.9,13.9c6.1,0,11.3-4,13.2-9.5L35.2,42.4z"
Path 1 result :
Later, I was able to extract another path for the center figure, which is:
"M40.3,40.3c0.1,1.4-1,2.6-2.5,2.6l-4,0.1c0,0-0.1,0-0.1,0c-0.9,0-1.7-0.4-2.1-1.2l-7.3-11.3l-10.7,0.6 c-1.4,0.1-2.6-1-2.7-2.4L10,13.3c-0.1-1.4,1-2.6,2.4-2.7c1.4-0.1,2.6,1,2.7,2.4l0.4,6.8l8.9-2.5c0.9-0.2,1.8,0.3,2.1,1.2 c0.3,0.9-0.3,1.8-1.2,2.1l-9.6,2.7l0.2,2.8l9.6-0.5c0.9,0,1.8,0.4,2.3,1.2L35.1,38l2.5-0.1C39.1,37.8,40.3,38.9,40.3,40.3z M12.5,10.2c2.8,0,5.1-2.3,5.1-5.1S15.4,0,12.5,0C9.7,0,7.4,2.3,7.4,5.1S9.7,10.2,12.5,10.2z M13.9,46.6c-5.8,0-10.5-4.7-10.5-10.5 c0-3.5,1.8-6.7,4.5-8.6v-3.9C3.2,25.9,0,30.6,0,36.1C0,43.8,6.2,50,13.9,50c6.1,0,11.3-4,13.2-9.5l-2.7-4.1 C24.2,42,19.6,46.6,13.9,46.6z"
Path 2 result :
Looking for a single path SVG, which creates an exact image like .
Thank you in advance.

Haters will say I'm cheating. And they will be absolutely right.
<svg
width="60"
height="60"
style="background-color: LightSalmon; border-radius: 100%"
viewBox="1 1 60 60"
>
<path d="M62 31c0 17.1-13.9 31-31 31S0 48.1 0 31 13.9 0 31 0s31 13.9 31 31zM48.5 43.9L46 44l-7.3-11.3c-.5-.8-1.4-1.2-2.3-1.2l-9.7.5-.2-2.8 9.6-2.7c.9-.3 1.4-1.2 1.2-2.1-.2-.9-1.2-1.4-2.1-1.2l-8.9 2.5-.4-6.7c-.1-1.4-1.3-2.5-2.7-2.4-1.4.1-2.5 1.3-2.4 2.7l.9 15.6c.1 1.4 1.3 2.5 2.7 2.4l10.7-.6L42.5 48c.5.7 1.3 1.2 2.1 1.2h.1l4-.1c1.4-.1 2.5-1.2 2.5-2.6-.1-1.6-1.3-2.7-2.7-2.6zM23.4 6c-2.8 0-5.1 2.3-5.1 5.1s2.3 5.1 5.1 5.1 5.1-2.3 5.1-5.1S26.2 6 23.4 6zm11.8 36.4c-.2 5.7-4.8 10.2-10.5 10.2-5.8 0-10.5-4.7-10.5-10.5 0-3.5 1.8-6.7 4.5-8.6v-3.9c-4.6 2.3-7.9 7-7.9 12.5C10.8 49.8 17 56 24.7 56c6.1 0 11.3-4 13.2-9.5l-2.7-4.1z"/>
</svg>
The real answer is that compound paths in a single <path/> element can only have one style (as the style is defined by the said path).

How do I draw a circle in JS using SVG?

If you look at http://map-icons.com/ and the js included with the file contains these variable declarations:
// Define Marker Shapes
var MAP_PIN = 'M0-48c-9.8 0-17.7 7.8-17.7 17.4 0 15.5 17.7 30.6 17.7 30.6s17.7-15.4 17.7-30.6c0-9.6-7.9-17.4-17.7-17.4z';
var SQUARE_PIN = 'M22-48h-44v43h16l6 5 6-5h16z';
var SHIELD = 'M18.8-31.8c.3-3.4 1.3-6.6 3.2-9.5l-7-6.7c-2.2 1.8-4.8 2.8-7.6 3-2.6.2-5.1-.2-7.5-1.4-2.4 1.1-4.9 1.6-7.5 1.4-2.7-.2-5.1-1.1-7.3-2.7l-7.1 6.7c1.7 2.9 2.7 6 2.9 9.2.1 1.5-.3 3.5-1.3 6.1-.5 1.5-.9 2.7-1.2 3.8-.2 1-.4 1.9-.5 2.5 0 2.8.8 5.3 2.5 7.5 1.3 1.6 3.5 3.4 6.5 5.4 3.3 1.6 5.8 2.6 7.6 3.1.5.2 1 .4 1.5.7l1.5.6c1.2.7 2 1.4 2.4 2.1.5-.8 1.3-1.5 2.4-2.1.7-.3 1.3-.5 1.9-.8.5-.2.9-.4 1.1-.5.4-.1.9-.3 1.5-.6.6-.2 1.3-.5 2.2-.8 1.7-.6 3-1.1 3.8-1.6 2.9-2 5.1-3.8 6.4-5.3 1.7-2.2 2.6-4.8 2.5-7.6-.1-1.3-.7-3.3-1.7-6.1-.9-2.8-1.3-4.9-1.2-6.4z';
var ROUTE = 'M24-28.3c-.2-13.3-7.9-18.5-8.3-18.7l-1.2-.8-1.2.8c-2 1.4-4.1 2-6.1 2-3.4 0-5.8-1.9-5.9-1.9l-1.3-1.1-1.3 1.1c-.1.1-2.5 1.9-5.9 1.9-2.1 0-4.1-.7-6.1-2l-1.2-.8-1.2.8c-.8.6-8 5.9-8.2 18.7-.2 1.1 2.9 22.2 23.9 28.3 22.9-6.7 24.1-26.9 24-28.3z';
var SQUARE = 'M-24-48h48v48h-48z';
var SQUARE_ROUNDED = 'M24-8c0 4.4-3.6 8-8 8h-32c-4.4 0-8-3.6-8-8v-32c0-4.4 3.6-8 8-8h32c4.4 0 8 3.6 8 8v32z';
Now, all I want, is to add another one, a circle.
Can anyone please point me in the direction of a resource or tool with which I can achieve this? Does anyone know what those little bits even mean?

Fabricjs svg parsing error

guys, i've got a very mysterious problem here.
I've got an svg <svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='263.342' height='132.29' viewBox='0 0 263.342 132.29'><path fill='#FFC55D' d='M148.718 39.53S152.442 0 199.442 0v57.604l-26.236-18.628-16.908 18.628-.467 42.678s-.99 18.658-20.113 18.658'/><path fill='#FEDBC8' d='M63.44 132.29c-44 0-46.084-38.09-45.903-44.62-1.45 0-11.837-1.268-11.837-9.974 0-13.785 11.74-11.97 11.74-11.97V55.567l-.644-24.077H63.44v100.8zM63.44 132.29c43 0 45.76-38.09 45.58-44.62 1.45 0 11.5-1.268 11.5-9.974 0-13.785-12.08-11.97-12.08-11.97V55.567l.995-24.077H63.44v100.8z'/><path fill='#1CA97E' d='M46.18 70.078c0 3.405-2.76 6.167-6.167 6.167-3.406 0-6.167-2.762-6.167-6.167 0-3.406 2.76-6.167 6.167-6.167 3.406 0 6.167 2.762 6.167 6.168M80.642 70.078c0 3.405 2.76 6.167 6.167 6.167 3.405 0 6.166-2.762 6.166-6.167 0-3.406-2.76-6.167-6.167-6.167s-6.168 2.762-6.168 6.168'/><path fill='#F37885' d='M49.263 99.49c0 8 6.356 14.196 14.196 14.196s14.196-6.195 14.196-14.195H49.263zM63.335 113.688c7.84 0 14.32-6.196 14.32-14.196H63.44'/><path fill='#78492F' d='M18.44 67.9V31.627s-11 1.995-11 7.98V61.37s4 6.53 11 6.53'/><path fill='#78492F' d='M74.44 9.49H14.62s2.54 13 8.888 13H.11s-2.72 14 18.863 14H74.44v-27zM108.44 31.626V20.562c0-5.985-4.88-10.07-8.21-11.07H71.21c-3.33 1-7.77 5.085-7.77 11.07v15.93h45V67.9s11-1.995 11-7.98V38.157s-5-6.53-11-6.53'/><path fill='#FEDBC8' d='M199.44 132.29c-42 0-44.34-36.73-44.164-43.028-1.398 0-11.287-1.224-11.287-9.62 0-13.293 11.45-11.544 11.45-11.544v-9.794l-.775-17.812h44.776v91.798z'/><path fill='#82A0D7' d='M183 72.296c0 3.284-2.663 5.946-5.947 5.946s-5.947-2.662-5.947-5.946 2.663-5.947 5.947-5.947S183 69.01 183 72.295'/><path fill='#F37885' d='M185.974 100.49c0 8 6.13 13.69 13.69 13.69s13.69-5.69 13.69-13.69h-27.38z'/><path fill='#FFC55D' d='M250.282 39.53S246.442 0 199.442 0v57.49h43.377l.466 42.736s.933 18.687 20.056 18.687M199.44 57.603V.233s-48.974-3.266-48.974 39.88c0 30.275 4.956 27.518 4.956 27.518l.32-10.494s16.66-2.798 16.66-14.925c5.863 7.695-1.96 15.393 27.04 15.393'/><path fill='#FEDBC8' d='M199.44 132.29c42 0 44.232-36.73 44.058-43.028 1.398 0 11.34-1.224 11.34-9.62 0-13.293-11.396-11.544-11.396-11.544v-9.794l.558-.813h-44.56v74.8z'/><path fill='#82A0D7' d='M216.232 72.296c0 3.284 2.663 5.946 5.947 5.946s5.946-2.662 5.946-5.946-2.663-5.947-5.947-5.947-5.948 2.662-5.948 5.946'/><path fill='#F37885' d='M199.44 114.18c7.563 0 13.913-5.688 13.913-13.688H199.44'/></svg>
And some code, which renders this svg on my canvas, using fabricjs:
fabric.loadSVGFromString(str, function(objects, options) {
var obj = fabric.util.groupSVGElements(objects, options);
obj.lockUniScaling = true;
obj.scaleToWidth(200);
canvas.add(obj).renderAll();
});
So i got this:
Instead of this:
P.S. Background color is ok – canvas' color.
Help guys

so this svg works fine.
you probably used an old version of fabricjs when trying to parse it. that comes out is an old "a" command drawing bug.
if you copy paste this svg in the fabricjs.com/kitchensink that is a general demo/tester you will see it working good.
so please download latest version of library and you should be fine