klonování svg ikon

by Petr Haluza

HTML

<svg id="icon-fav" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 740 610" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2"><path d="M37.834 607.427H304.5c18.286 0 33.334-15.047 33.334-33.333S322.786 540.76 304.5 540.76H73.534c16.644-114.219 115.541-199.856 230.966-200l1.458.007c92.236 0 168.134-75.898 168.134-168.134S398.194 4.5 305.958 4.5 137.825 80.398 137.825 172.633a168.21 168.21 0 0 0 54.109 123.561C78.998 342.008 4.665 452.219 4.5 574.094c0 18.286 15.048 33.333 33.334 33.333zm393.272-149.175c-16.625-78.914 23.423-114.43 73.995-114.43 26.915-2.085 62.382 19.255 78.188 40.974 15.805-21.719 48.009-43.991 74.924-41.907 50.378 0 92.951 36.449 76.326 115.363-16.857 79.952-151.716 149.175-151.716 149.175s-134.859-69.223-151.717-149.175zM304.5 74.094c54.859 0 100 45.141 100 100s-45.141 100-100 100-100-45.142-100-100 45.142-100 100-100z" fill-rule="nonzero"/></svg>
<svg id="icon-comp" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 740 610" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" xmlns:v="https://vecta.io/nano"><path d="M365.868 5c-25.538 0-46.553 19.276-46.553 42.701v42.701H86.553C61.015 90.402 40 109.678 40 133.103s21.015 42.701 46.553 42.701h22.904l-62.38 138.095c-4.663 10.346-7.062 21.432-7.062 32.627 0 46.85 42.029 85.402 93.105 85.402s93.105-38.552 93.105-85.402c0-11.366-2.474-22.619-7.276-33.097L156.8 175.804h162.515v341.608h-46.553c-25.538 0-46.553 19.276-46.553 42.701s21.015 42.701 46.553 42.701h186.21c25.538 0 46.553-19.276 46.553-42.701s-21.015-42.701-46.553-42.701H412.42V175.804h162.562l-62.38 138.095c-4.663 10.346-7.062 21.432-7.062 32.627 0 46.85 42.029 85.402 93.105 85.402s93.105-38.552 93.105-85.402c0-11.366-2.474-22.619-7.276-33.097l-62.148-137.625h22.857c25.538 0 46.553-19.276 46.553-42.701s-21.015-42.701-46.553-42.701H412.42V47.701C412.42 24.276 391.406 5 365.868 5z" fill-rule="nonzero"/></svg>
<svg id="icon-cart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 740 610" fill-rule="evenodd"...

CSS

svg {height: 60px}
.red { fill: tomato}
.blue {fill: skyblue}
.green { fill: lime}
svg:hover { fill: orange}