Custom icons problems

Gregor

Hi, I want to modify some icons in my theme using site like https://fonts.google.com/icons?icon.platform=web but some are not visible on bright bar colors.
good text alternatywny
bad

The second problem is that Vivaldi displays some icons according to the size used and some displays in the same size regardless of the icon size.

Any idea what's the problem?

Pathduck

@Gregor SVGs often have hard-coded values for their "fill".
https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes

The value can be changed or removed, SVG files are just plain text files.
They can be edited directly or in programs like Inkscape.

I recommend sticking with PNGs if SVGs are a too complicated.

AltCode

@Gregor See the following help page: https://help.vivaldi.com/desktop/appearance-customization/creating-custom-icon-set/#SVG_resources

As @Pathduck, if the icons you added were SVGs, then the issue was likely caused because they had their fill property set to a fixed value (probably something like #ffffff). Per the help page, you want that property to instead have currentColor, so that they adapt properly to your theme's colors.

For that reason alone, I would not recommend PNGs over SVGs, since the PNGs cannot adapt to a theme's colors.

If you don't want to fiddle with the files in a text editor, when you export from that page, write/copy-paste currentColor into the color field, that works (the page makes the text always appear upper-case, but it retains the letter-case that you actually gave it).

Pathduck

@AltCode The reason I said I'd recommend PNGs are they are just simpler.

The docs talk about the fill value but there's also the stroke value to consider. Here's the old Back button SVG:

<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 28 28" height="28" width="28">
  <path stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M16 8L10 14L16 20"></path>
</svg>

Changing the fill to currentColor just results in a triangle

I know very little about SVGs - they are great for graphic designers but mysteries to everyone else

Gregor

Yes, thanks, fill="currentColor" is the fix. Removing fill="currentColor" also works.

Any idea why there is no difference in size in Vivaldi UI between for example these two icons?

<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="currentColor"><path d="M480-444.31 68.39-644.15 480-844l412 199.85-412 199.84Zm0 164.15L92.39-468.38l58.84-28.47L480-338.46l329.15-158.39L868-468.38 480-280.16ZM480-116 92.39-304.23l58.84-28.46L480-174.31l329.15-158.38L868-304.23 480-116Zm0-386.61 292.92-141.54L480-785.69 187.46-644.15 480-502.61Zm.38-141.54Z"/></svg>

<svg xmlns="http://www.w3.org/2000/svg" height="48px" viewBox="0 -960 960 960" width="48px" fill="currentColor"><path d="M480-419.62 61-640l419-220 420 220-420 220.38ZM480-260 85-467.38l47.23-25.54L480-311.46l348.77-181.46 47.61 25.54L480-260Zm0 160L85-307.77l47.23-25.54L480-151.46l348.77-181.85 47.61 25.54L480-100Zm0-371.69L805.77-640 480-807.92 155.61-640 480-471.69ZM481-640Z"/></svg>