Topic: Problem with SVG icons

mejorapress
February 14, 2024 at 11:33 am

Hello,

I have noticed that there seems to be a bug with SVG icons in GenerateBlocks.

I don’t know why, but I’ve tried a lot of libraries, and with all of them the same thing happens.

The icons don’t look like they should. For example, an icon that only has a border, is totally in one color.

Here is a video that explains it better: https://take.ms/01vcv

I tried buying a subscription to a well known bookstore: https://hugeicons.com/

But it is the same.

Can you tell me what is causing this, and how to fix it?

Thanks!
Ying
February 14, 2024 at 12:03 pm
Hi there,

Yes, GB adds this css to fill the SVG:
```
.gb-icon svg {
    fill: currentColor;
}
```
If you do not want to fill, you can add a css class to the headline or the button block, eg. no-fill-svg, then add this CSS:
```
.no-fill-svg .gb-icon svg {
       fill:none;
}
```
mejorapress
February 14, 2024 at 1:10 pm

Hello Ying,

That seems to work, but it doesn’t allow me to change the color of the icon.

Have a look: https://take.ms/REoHW

It’s weird, because with libraries like Remix Icons or Phosphor, they work without any problem.

But the rest, more than 80% of the icon libraries, have this problem.

Ying

February 14, 2024 at 2:32 pm

Yes, it’s because the color is already defined in your SVG code.

If you want to change the color, you need to change the color code to currentcolor in the SVG HTML.

For example, this is the raw code get from the website you attached:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M12 16.5V14.5" stroke="#000000" stroke-width="1.5" stroke-linecap="round"/>
<path d="M4.26781 18.8447C4.49269 20.515 5.87613 21.8235 7.55966 21.9009C8.97627 21.966 10.4153 22 12 22C13.5847 22 15.0237 21.966 16.4403 21.9009C18.1239 21.8235 19.5073 20.515 19.7322 18.8447C19.879 17.7547 20 16.6376 20 15.5C20 14.3624 19.879 13.2453 19.7322 12.1553C19.5073 10.485 18.1239 9.17649 16.4403 9.09909C15.0237 9.03397 13.5847 9 12 9C10.4153 9 8.97627 9.03397 7.55966 9.09909C5.87613 9.17649 4.49269 10.485 4.26781 12.1553C4.12104 13.2453 4 14.3624 4 15.5C4 16.6376 4.12104 17.7547 4.26781 18.8447Z" stroke="#000000" stroke-width="1.5"/>
<path d="M7.5 9V6.5C7.5 4.01472 9.51472 2 12 2C14.4853 2 16.5 4.01472 16.5 6.5V9" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

stroke="#000000" defines the stroke color of the SVG which is black, you need to change #000000 to currentcolor.

So the new SVG code becomes:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M12 16.5V14.5" stroke="currentcolor" stroke-width="1.5" stroke-linecap="round"/>
<path d="M4.26781 18.8447C4.49269 20.515 5.87613 21.8235 7.55966 21.9009C8.97627 21.966 10.4153 22 12 22C13.5847 22 15.0237 21.966 16.4403 21.9009C18.1239 21.8235 19.5073 20.515 19.7322 18.8447C19.879 17.7547 20 16.6376 20 15.5C20 14.3624 19.879 13.2453 19.7322 12.1553C19.5073 10.485 18.1239 9.17649 16.4403 9.09909C15.0237 9.03397 13.5847 9 12 9C10.4153 9 8.97627 9.03397 7.55966 9.09909C5.87613 9.17649 4.49269 10.485 4.26781 12.1553C4.12104 13.2453 4 14.3624 4 15.5C4 16.6376 4.12104 17.7547 4.26781 18.8447Z" stroke="currentcolor" stroke-width="1.5"/>
<path d="M7.5 9V6.5C7.5 4.01472 9.51472 2 12 2C14.4853 2 16.5 4.01472 16.5 6.5V9" stroke="currentcolor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Problem with SVG icons