WIP: The problem of hiding the controls after selecting the SVG icon

Bugs
1

Browser: Chrome 131.0.6778.70
OS: Windows

Hi team,

In version 1.11, when we select the SVG icon in various elements, the icon size control is hidden. This was actually a positive feature. Because controlling the size of non-SVG icons cannot control the size of SVG icons. Therefore, hiding them was a logical decision. But removing the size option has caused problems in some elements, which I will mention below.

1- In icon element, if we select SVG icon, both color and size control will be hidden. While only the size control should be hidden. Because color control works for SVG icons.

2- In continuation of the previous case, now if we click on the clear indicator, the size and color controls are still hidden. While these two controls are hidden only when an SVG icon is selected.

3- In the Text Link element, if we select an SVG icon, most of the icon controls will be hidden. While only the size control should be hidden.

4- In the list icon control, if we select an SVG icon, the Icon: Size control still exists and is not hidden. Of course, this is not a bug.

5- As in the previous case, the Icon size control is not hidden in the Rating element.

6- In the Divider element, if we select an SVG icon, the Typography control, which includes the color of the icon, is also hidden.

7- In the Icon Box element, after selecting the SVG icon, the color control is also hidden.

8- As in case 4, in the List / Nav Menu / dropdown elements after selecting the SVG icon, the size control is not hidden.

Maybe there are similar problems in other elements that I did not check.

Thank you!

2

Hi @HOSEIN,

thank you for this report. Let’s go over line by line. :slight_smile:

  1. Correct, I’ve added this to the bug tracker
  2. This is true, but if you click them, you also don’t have any icons selected, so if they are hidden, shouldn’t be a problem, right?
  3. Correct, added to the bug tracker
  4. The “global” one is not hidden, but the one in the “field” itself, should be.
  5. This is good, and “size” works, so it’s good that it’s not hidden :wink:
  6. Yep, I’ve added this to the tracker, and will see how we decide about it.
  7. Added
  8. Icon size should work there, no?

Thanks for the report. I’ve created an internal task, and will update it if needed.
Matej

3

Hi Matej,

Thank you for taking the time to review this report.

2- Yes, I agree.

5- In the Rating element, if we select the SVG icon, does the size control work? It does not seem so.

8- As with #5, in general, the size control cannot control the size of SVG icons.
I remember talking to timmse about size control in SVG icons before 1.11 release, it was there that timmse said we hide the size control for SVG icon because it is not useful. Unfortunately, I could not find that conversation.

Thanks again for reviewing this report

4

Hi,

so, about a rating element. I tried to change size here, and it works.

image
image1880Ă—654 70.7 KB

Now, the thing is, Icon is somewhere set in a way that it works, and somewhere now. When we will working on this task, we will review each case :slight_smile:

Matej

1 Like
5

Interesting! As always, thanks for your time Matej🙏

1 Like
6

Hi again Matej,

I had a question about this topic…

What features should an SVG icon have, so that its size can be controlled using size controls in bricks?
I can only control the size of SVG icons using the size control in the list icon element. But in other elements, controlling the size of SVG icons is only possible with width and height controls in SVG settings. I think it would be great if all size controls could control the size of SVG icons. This is better in terms of accessibility and supports css class.

I remember in Elementor, there was only one size control and using it, the size of all icons (even SVG) could be controlled. Is this something that Bricks should support, or is the problem with the SVG code?

thank you🙏

7

Hi @HOSEIN,

it’s actually not about the SVG, but about the control itself. The control has to change font size, for normal icons, but for SVG icons, it must change height & width properties, and have a little different selector.

That’s the difference why it works somewhere, and somewhere doesn’t. :slight_smile:

Matej

1 Like
8

Hi,

Thank you Matej🙏

1 Like