Solved Tips on how to create Custom Icons?

nomadic

@ThePfromtheO said in Tips on how to create Custom Icons?:

CSS modifications can't be used with the "Themes" feature, right? You can't upload them via the "Theme Upload", isn't it?

Yeah, CSS modifications aren't a part of themes. <style> elements get stripped out, but you can still use the style="" attribute and Vivaldi's CSS variables in other attributes as well (like fill="", opacity="", etc.) on various parts of the SVG.

I only mentioned CSS modifications in regard to the that advanced icon design guide thread I posted. CSS variables, on the other hand, are necessary to make a fully working icon set. Things like the Page Tiling, Images and Animations Toggle, Break Mode, and Clock will all lose functionality if you customize them without considering CSS variables.

Those icons aren't too critical in every toolbar setup, so as a beginner in SVG icon creation, you don't have to worry about them. The vast majority of the icon sets in the theme store do not make use of the CSS variables.

As for the program to use in SVG icon creation, I use Inkscape. I also have the paid program Affinity Designer, but I haven't gotten as comfortable in using that program yet.

But to make the icons adapt in color to changing toolbar colors, the SVG editor you really need is just a text editor.

If you open an SVG in a text editor, you will see something like this:

<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" version="1.1">
  <path style="fill:none;stroke:#000000;stroke-linejoin:round"
    d="M 20.45751,10.451309 14,6.9999562 7.5424906,10.451309 m 12.9150184,-1.63e-4 v 7.487228 l -6.457388,3.061692 v -7.097558 z m -12.915018,0 v 7.487228 l 6.457387,3.061692 v -7.097558 z" />
</svg>

In its current state, it won't adapt to the toolbar color changes. To make it work, you need to remove set colors and change them to the text currentColor. The main things to look for are fill and stroke. They can be their own attributes or defined in the style attribute, like in the SVG above.

If you look at this line in the SVG above:
<path style="fill:none;stroke:#000000;stroke-linejoin:round" ...
You see that the SVG path is colored black, #000000, using the stroke, while the fill is set to none, which is transparent. So you only need to adjust the stroke in this case because giving the fill a color will alter the design of the SVG. You just need to change the #000000 to currentColor and the SVG is all set, like so:

<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" version="1.1">
  <path style="fill:none;stroke:currentColor;stroke-linejoin:round"
    d="M 20.45751,10.451309 14,6.9999562 7.5424906,10.451309 m 12.9150184,-1.63e-4 v 7.487228 l -6.457388,3.061692 v -7.097558 z m -12.915018,0 v 7.487228 l 6.457387,3.061692 v -7.097558 z" />
</svg>

ThePfromtheO

@nomadic Thank you, this gave me some hope, I'm gonna try it! You're better than AI, certainly! I think I will only go with the CSS to customize some of the things in my Vivaldi, but this after much time, when I'll learn a bit more about it. I will try to create a set of icons or import one from somewhere and change it for my case.

Note: Do you think that if I would set the colour to "currentColor" for all the icons, there would be a mess? I think it wouldn't be good, as they would not have the colour set by me in Vivaldi anymore, no?