icon optimization test

by murgiaMarco

HTML

<script src="https://code.jquery.com/jquery-3.5.0.js"></script>

<div style="display:flex;">


<div style="height:60px; width:120px; background: green">
<span id="test" class="icon siringa"></span>
</div>
<div style="height:60px; width:60px; background: green">
<span class="icon ampolla"></span>
</div>


</div>

<script>
</script>

CSS

:root {
  --path: 'https://www.flaticon.com/svg/vstatic/svg/';
  --white: #ffffff;
}

.icon:before {
  display: block;
  content: ' ';
  background-size: 60px 60px;
  height: 60px;
  width: 60px;
}

.siringa:before {
  background-image: url('https://www.flaticon.com/svg/vstatic/svg/2619/2619877.svg?token=exp=1618705217~hmac=18fd3dba30282c76d7ca799f5d494ddd');
}

.ampolla:before {
  background-image: url('https://www.flaticon.com/svg/vstatic/svg/3922/3922449.svg?token=exp=1618706650~hmac=606bff899135f0f6c238b2b3b5d7ae66');
}

JavaScript

var divtest = document.createElement("div");
    divtest.innerHTML = '<svg class="isp-font isp-font-Sottoscrivi-Carrello"><use xlink:href="#isp-font-Sottoscrivi-Carrello"></use></svg>';


document.getElementById("test").appendChild(divtest);