WordPress.org

Resolved hebhansen
(@hebhansen)

7 months, 2 weeks ago

Hey Nick

This plugin and block is just brilliant. Thx. In your faq you state:

Why is my icon not changing color?

The Icon Block includes controls for the icon’s color and background. However, if your SVG icon has hard-coded color/fill values, the plugin will respect those instead of any applied custom colors.

I am kind of new to playing with svg on WP, since it is so restrictive. However, a year back, I designed some icons, that are missing everywhere such as payment methods etc. I did fix the upload, so I have the icons in media library. I have also managed to add the icon to my site. But color is not changing in your block.

I get the faq comment, so excuse me for asking. I reallise it is outside the scope of the block, but how do I not hard code color? I will be making mine in PS, so if you know the answer, it sure is a great help to get this workflow smooth… finally!

Thx

Viewing 12 replies - 1 through 12 (of 12 total)

Thread Starter hebhansen
(@hebhansen)

7 months, 1 week ago
I really need help to fix this. Why does the fill color not change my icon?
```
.payment-method-icons {
    fill: #636363 !important;
}
```
Changing inside the block editor also does nothing. Why?
Plugin Author Nick Diego
(@ndiego)

7 months, 1 week ago

Hi @hebhansen,

Can you share a link to the live site? I can then inspect the icons and see where the hard coded color values are, if there are any.

Thanks!

Plugin Author Nick Diego
(@ndiego)

7 months ago

Can you share a link to the live site? I can then inspect the icons and see where the hard coded color values are, if there are any.

Hello again @hebhansen, just following up on my comment above.

Best,
Nick

Thread Starter hebhansen
(@hebhansen)

6 months, 4 weeks ago

Now I can. It came live yesterday. If you check footer, you will see the Seba card being of another color (my svg). The others are included in Kadense Icon block and those I can style…. I have almost 10 more like Seba card, so I really need to be able to color them. Thx

Thread Starter hebhansen
(@hebhansen)

6 months, 4 weeks ago

Hey Nick

Any news on this. I am moving online, and need my payment methods in footer. I have 10 ish more, I would like to add, but pointless if I can’t color them to match. Thx
Plugin Author Nick Diego
(@ndiego)

6 months, 4 weeks ago
Ah, I see. The icon is actually an image wrapped in <svg> markup.
```
<svg xmlns="http://www.w3.org/2000/svg" xmlns-xlink="http://www.w3.org/1999/xlink" width="2405" height="1871" viewBox="0 0 2405 1871">
    <image id="Background_-_Backup_copy" data-name="Background - Backup copy" width="2404" height="1870" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAACWQAAAdOCAYAAABoP7MPAAAgAElEQVR4nOzdedCuZ13Y8e85Wcl2EkkgkEATAomBR[...trimmed the rest for simplicity]</image>
</svg>
```
Therefore, there unfortunately is no way to style this image with CSS. If you can convert the original png to an svg, then you would be able to change the color of the icon either in the plugin or with custom CSS.

As an example, this is what one of the Kadence icons look like, which are straight svgs.
```
<svg viewBox="0 0 448 512" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
    <path d="M448 256.2c0-87.2-99.6-153.3-219.8-153.3-18.8 0-37.3 1.6-55.3 4.8-11.1-10.5-24.2-20-38-27.4C61.2 44.2 0 79.4 0 79.4s56.9 47.1 47.6 88.3c-52.3 52.3-52.5 124.1 0 176.6C56.9 385.6 0 432.6 0 432.6s61.2 35.2 134.9-.8c13.8-7.5 26.9-16.9 38-27.4 18 3.2 36.5 4.8 55.3 4.8 120.3-.1 219.8-65.8 219.8-153zm-219.7 124c-23.7 0-46.3-2.8-67.3-7.8-21.3 25.8-68.1 61.7-113.6 50.1 14.8-16 36.7-43.1 32-87.6-27.3-21.4-43.6-48.7-43.6-78.5 0-68.4 86.2-123.9 192.5-123.9S420.8 188 420.8 256.4c0 68.3-86.2 123.8-192.5 123.8zm25.6-123.9c0 14.2-11.5 25.8-25.6 25.8-14.1 0-25.6-11.5-25.6-25.8 0-14.2 11.5-25.8 25.6-25.8 14.1 0 25.6 11.6 25.6 25.8zm88.9 0c0 14.2-11.4 25.8-25.6 25.8-14.1 0-25.6-11.5-25.6-25.8 0-14.2 11.4-25.8 25.6-25.8 14.1 0 25.6 11.6 25.6 25.8zm-177.9 0c0 14.2-11.4 25.8-25.6 25.8-14.1 0-25.6-11.5-25.6-25.8 0-14.2 11.4-25.8 25.6-25.8 14.2 0 25.6 11.6 25.6 25.8z"></path>
</svg>
```
Best,
Nick
Thread Starter hebhansen
(@hebhansen)

6 months, 3 weeks ago
Your right. File is uncool. I just tested with a downloaded Font Awesome Icon and that works. So I am doing smth wrong in photoshop. What is it I need to do, when saving an SVG? Why is an svg not an svg??? Please can someone advise reg. photoshop?

Now I switched all to Black for a quick and dirty solution. That just doen’t cut it in the long run…
- This reply was modified 6 months, 3 weeks ago by hebhansen.
Plugin Author Nick Diego
(@ndiego)

6 months, 3 weeks ago

I have not used Photoshop in years, so unfortunately I have no idea. But you could use an online service to convert a png to an svg. There are many options that come up when Googling.

audunmb
(@audunmb)

6 months, 3 weeks ago

Use Adobe Illustrator to create SVGs instead. You can probably import the PSD-file into Illustrator, make sure it’s a vector image and export to SVG.

Another option is to use a converter (PNG to SVG), either one of the free online or a command line tool (if you’re on Linux).

Though, Adobe-created SVGs usually needs some cleanup/optimization. Either do it yourself in a text editor, or use an online tool.

Thread Starter hebhansen
(@hebhansen)

6 months, 3 weeks ago

I am saving as SVG! So why is it not an svg? I do not need another program.

Plugin Author Nick Diego
(@ndiego)

6 months, 3 weeks ago

I am saving as SVG! So why is it not an svg?

I guess it technically is an svg, but it’s not one that can be modified by CSS.

I assume that you are taking a png file, opening it in Photoshop, and then exporting as an svg. Is this correct?

If so, I think Photoshop just encodes the png and wraps it in svg markup. You need a tool that will actually convert the png to vectors. I just quickly tried Adobe Express, and it worked pretty well. You do need to have an Adobe account (free), but you might already have one if you have Photoshop.

I hope that helps.

Nick

audunmb
(@audunmb)

6 months, 3 weeks ago

@hebhansen I think maybe the issue is that you are saving a rasterized image as an SVG. Then the image will just be embedded in the SVG. You need to convert it to a vector image before saving as SVG. That is possible to do with Photoshop as well, now that I googled it, I just use Illustrator by default myself.