WAIT: Can't resize SVG in icon element

I am replacing the default icon packs with SVGs for performance reasons. I am using a bricks icon element and a svg from icomoon that I processed through SVGOMG per previous posts about SVGs.

I can load the SVG just fine and it displays in the builder and on the frontend. However, I can not change the svg’s size. The svg height and width options appear to be targeting the element ID, not the svg itself. All the height and width do is move the icon vertically and horizontally around the div

The nominal icon size controls have no impact on the svg size, jokingly set to 100px to prove the point

image

Would be easier to get help if we had URL of SVG.

Hey Eric,

thanks for your report.

When using a custom SVG (instead of choosing an icon from one of the included icon sets) you use the Height and Width settings in the SVG popup instead of the Size setting. You set it to 25px in your screenshot. Doesn’t that setting apply?

Best,

André

Andre -
unfortunately no. It doesn’t change the size of the svg, it just seems to move the svg around a bounding box. It will even make the surrounding div get larger if you make this virtual “padding” large enough.

Happy to send you the svg’s. What email address should I use? (since I can’t attach here)

The only thing I can think of that is the issue is that the svg’s that I got from the sources bricks use for icon sets all seem to add a size into the svg definition. It’s in every one that I tried yesterday. I’m not an svg expert to know if that is the cause of the issue

Here is a cart svg code as an example:

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M6 14.5a1.5 1.5 0 1 1-3.001-.001A1.5 1.5 0 0 1 6 14.5zm10 0a1.5 1.5 0 1 1-3.001-.001A1.5 1.5 0 0 1 16 14.5zM16 8V2H4a1 1 0 0 0-1-1H0v1h2l.751 6.438A2 2 0 0 0 4 12h12v-1H4a1 1 0 0 1-1-1v-.01L16 8z"/></svg>

Here is a search icon

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="m15.504 13.616-3.79-3.223c-.392-.353-.811-.514-1.149-.499a6 6 0 1 0-.672.672c-.016.338.146.757.499 1.149l3.223 3.79c.552.613 1.453.665 2.003.115s.498-1.452-.115-2.003zM6 10a4 4 0 1 1 0-8 4 4 0 0 1 0 8z"/></svg>

Hey Eric,

yes. Your SVGs are the actual issue. They’re missing the viewBox attribute. If you add this it should work as expected:

Cart:
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M6 14.5a1.5 1.5 0 1 1-3.001-.001A1.5 1.5 0 0 1 6 14.5zm10 0a1.5 1.5 0 1 1-3.001-.001A1.5 1.5 0 0 1 16 14.5zM16 8V2H4a1 1 0 0 0-1-1H0v1h2l.751 6.438A2 2 0 0 0 4 12h12v-1H4a1 1 0 0 1-1-1v-.01L16 8z"/></svg>

Search:
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="m15.504 13.616-3.79-3.223c-.392-.353-.811-.514-1.149-.499a6 6 0 1 0-.672.672c-.016.338.146.757.499 1.149l3.223 3.79c.552.613 1.453.665 2.003.115s.498-1.452-.115-2.003zM6 10a4 4 0 1 1 0-8 4 4 0 0 1 0 8z"/></svg>

You could actually also delete the width and height attributes at all.

Let me know if that helped.

Best,

André

Yep! That worked. Thank you. Really appreciate it

Fun fact: After going through the 30 icons I downloaded, only 10% of them had the viewbox defined.