SVG icons on website are turning transparent-CodePudding

I'm using GeneratePress and GenerateBlocks to make a website on WordPress.

I have four blocks of text that I would like to have an SVG icon above. I have bought these icons from iStock, three as part of a pack, and the Australia icon separate. GenerateBlocks has a handy SVG icon picker, where you just paste the SVG html into the box and it will appear in the correct place.

The issue I am having is when I add a fourth SVG icon. When I do this, the rest of them become transparent, which is not what I want. (Without fourth icon) (With fourth icon)

Below is the code for the fourth SVG icon, which I am putting in the left-most slot:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24.88 25.7">
<defs>
<style>
.cls-1,.cls-2,.cls-3,.cls-4{
  fill:none;stroke:#3b383f;stroke-linejoin:round;
}
.cls-1,.cls-3{
  stroke-linecap:square;
}
.cls-1,.cls-2{
  opacity:0.1;
}
</style>
</defs>
<g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><polyline  points="19.78 22.65 19.78 25.2 1.2 25.2 1.2 1.2 15.83 1.2 19.78 5.25 19.78 9.51"/><polyline  points="15.83 1.2 15.83 5.15 19.78 5.15"/><path  d="M11.6,17.49a5.62,5.62,0,1,1,7.88,1.07A5.63,5.63,0,0,1,11.6,17.49Z"/><line  x1="20.15" y1="20.09" x2="19.18" y2="18.81"/><path  d="M19.19,21.17l2.26-1.72,1,1.38,1.6,2.09a1.43,1.43,0,0,1-.27,2h0a1.43,1.43,0,0,1-2-.27l-.91-1.2Z"/><line  x1="13.24" y1="16.24" x2="14.58" y2="16.24"/><line  x1="13.2" y1="11.93" x2="14.47" y2="11.93"/><line  x1="12.5" y1="14.09" x2="15.21" y2="14.09"/><line  x1="3.87" y1="6.87" x2="3.87" y2="21.3"/><line  x1="3.87" y1="7.61" x2="6.37" y2="7.61"/><line  x1="3.87" y1="11.93" x2="8.77" y2="11.93"/><line  x1="3.87" y1="9.77" x2="7.6" y2="9.77"/><line  x1="3.87" y1="16.24" x2="8.56" y2="16.24"/><line  x1="3.87" y1="14.09" x2="8.07" y2="14.09"/><line  x1="3.87" y1="18.4" x2="9.71" y2="18.4"/><line  x1="3.87" y1="20.56" x2="7.31" y2="20.56"/><polyline  points="19.08 21.95 19.08 24.5 0.5 24.5 0.5 0.5 15.13 0.5 19.08 4.55 19.08 8.81"/><polyline  points="15.13 0.5 15.13 4.45 19.08 4.45"/><path  d="M10.9,16.79a5.62,5.62,0,1,1,7.88,1.07A5.63,5.63,0,0,1,10.9,16.79Z"/><line  x1="19.45" y1="19.39" x2="18.48" y2="18.11"/><path  d="M18.49,20.47l2.26-1.72,1,1.38,1.6,2.09a1.43,1.43,0,0,1-.27,2h0a1.43,1.43,0,0,1-2-.27l-.91-1.2Z"/><line  x1="12.54" y1="15.54" x2="13.88" y2="15.54"/><line  x1="12.5" y1="11.23" x2="13.77" y2="11.23"/><line  x1="11.8" y1="13.39" x2="14.51" y2="13.39"/><line  x1="3.17" y1="6.17" x2="3.17" y2="20.6"/><line  x1="3.17" y1="6.91" x2="5.67" y2="6.91"/><line  x1="3.17" y1="11.23" x2="8.07" y2="11.23"/><line  x1="3.17" y1="9.07" x2="6.9" y2="9.07"/><line  x1="3.17" y1="15.54" x2="7.86" y2="15.54"/><line  x1="3.17" y1="13.39" x2="7.37" y2="13.39"/><line  x1="3.17" y1="17.7" x2="9.01" y2="17.7"/><line  x1="3.17" y1="19.86" x2="6.61" y2="19.86"/></g></g></svg>

Any feedback would be really appreciated, this has been plaguing me for a while.

Cheers

CodePudding user response：

Because definitions are global;

opacity:0.1 will be applied to all elements `with classes cls-1 and cls-2 in your page.

Maybe the easiest fix is to "restore" everything with an extra <style> tag with higher Specificity.
Otherwise you have to change the SVG to work with unique classes
Or put your SVG in a shadowRoot so all SVG CSS becomes "local" and does not leak out to global DOM. See the <load-file> Web Component for an example