Icon SVG sizing when linked

[zestjosh]

Bricks Version: 1.5 RC2
Browser: Chrome 90
OS: macOS

Icon size changes if the icon is linked.

1. Add an icon and select an SVG, set the width/min-width accordingly under Style > Layout
2. Set a link in the Content tab

See below:

[Sridhar]

Hey Josh,

For some reason your Icon element does not seem to have all the controls like Size under CONTENT tab.

[zestjosh]

Did you upload a custom svg or use an icon from one of the libraries?

[Sridhar]

Custom SVG.

Just tested with the built-in icon libraries and I can see the Size control under CONTENT tab as well.

[zestjosh]

I’ve found that when I select an icon from a library, the size control shows but when I select a custom SVG is it hidden.

It appears that the custom width/height SVG controls are only targeting the root element so when an icon has a link, the width/height is set on the A tag and the SVG has a min-width/min-height of 1em that is forcing the SVG to be larger than the parent.

Not sure if the best course of action is to overwrite frontend.min.css (below) or if icon.php should be updated to target both the A and the SVG when a link is selected.

[class*=brxe-] svg:not([width]) {
    min-width:1em;
}

[class*=brxe-] svg:not([height]) {
    min-height:1em;
}

[Sridhar]

IC.

Will add an update when there is more info to share.

In the meantime you can add this in the Icon element’s Custom CSS for the icon to take the custom width and height values:

root svg {
  width: auto;
  height: auto;
}

[zestjosh]

I think you mean

root svg {
  min-width: auto;
  min-height: auto;
}

[Sridhar]

No.

root svg {
  width: auto;
  height: auto;
}

fixed the issue in my test site when I re-created it based on what we discussed in this thread.

[zestjosh]

Unfortunately, that code does not make a difference for me but setting the min-width/height to auto solves the issue on my end.