Changing icons with CSS / part II

[supra107]

I'm trying to change the default V icon to a simple, monochrome one, but I have no idea how to resize the icon properly. Inkscape's scaling options don't affect the path itself, which results in the icon to not appear at all:

.topmenu button.vivaldi-horizontal-icon svg path {
	d: path("m 337.6,185.7 c -28.1,48.7 -56.2,97.4 -84.3,146.2 -5.2,9.1 -12.8,14.5 -23.2,15.3 -11.6,0.8 -20.8,-4.1 -26.7,-14.1 -17.8,-30.5 -35.4,-61.2 -53,-91.8 -10.7,-18.6 -21.5,-37.2 -32.2,-55.9 -10.8,-18.8 1.4,-41.7 23,-42.8 11.4,-0.6 20.2,4.7 26,14.6 7.9,13.5 15.7,27.2 23.6,40.8 5.7,9.8 11.2,19.7 17,29.3 8.4,14.1 20.8,22 37.3,23 23.3,1.4 45,-15.5 47.8,-40.2 0.2,-1.8 0.3,-3.7 0.4,-4.6 -0.1,-8 -1.6,-14.8 -4.8,-21.1 -8.7,-17.4 0.6,-36.9 19.5,-41.1 15.4,-3.4 31.4,7.9 33.4,23.5 1,6.7 -0.4,13 -3.8,18.9 z");
	fill: #fff;
}

And attempting to use the V already included in the icon leaves it too small:

.topmenu button.vivaldi-horizontal-icon svg path {
	d: path("m 16.42,8.64 -4.17,7.23 A 1.39,1.39 0 0 1 11.1,16.63 1.33,1.33 0 0 1 9.78,15.93 C 8.9,14.42 8.03,12.93 7.16,11.39 L 5.56,8.62 A 1.4,1.4 0 0 1 6.7,6.51 1.34,1.34 0 0 1 8,7.23 l 1.17,2 c 0.28,0.48 0.55,1 0.84,1.45 a 2.2,2.2 0 0 0 1.84,1.14 2.24,2.24 0 0 0 2.36,-2 V 9.59 a 2.34,2.34 0 0 0 -0.24,-1 1.4,1.4 0 1 1 2.62,-0.87 1.46,1.46 0 0 1 -0.17,0.92 z");
	fill: #fff;
}

What I'd like to do is to scale fit the V to the width of the icon field. How do I properly convert this?

[A Former User]

@supra107 Vivaldi uses 2 icons, one monochrome & one coloured. What I’d do is get the monochrome one to display (e.g. with the Subtle theme) & copy its d.

[supra107]

@potmeklecbohdan Yes, but the thing is that the monochrome icon on it's own is too small, and I would like for it to be as big as the colored icon, if not bigger (matching the size of the icon's SVG box, 16px in case of using the menu bar). And for that it seems that I need to have a path value that has the coordinates scaled to that specific size.

[A Former User]

@supra107 The monochrome icon is of the same size as the coloured one. I don’t mean only the v of the coloured icon, compare this (I use snapshot so the ‘coloured’ icon is black)

[supra107]

I guess I should've precised that I'm looking for the following look of the icon:

I want the V symbol only, without the squircle box. The path from the built-in colored icon is too small, and the path that I have created by editing the press material SVG version is too big. In both cases by changing the scaling in Inkscape, the vector path remains the same, which results in the icon either being too small for my liking, or too big to even show up in the SVG box of the browser.

[luetage]

@supra107 Something like this?
https://forum.vivaldi.net/topic/28047/vivaldi-icon

[A Former User]

@supra107 Changing the size directly from the Inkscape toolbar (no scale, but resize) seems to work.

This toolbar:

[supra107]

@luetage Yes, but that exact path ends up in this look:
@potmeklecbohdan By using this toolbar scaling the path still remains the same. It only changes the "transform=" value.

EDIT: Okay, so I've managed to hack the SVG with a transform: matrix() value so that it's in the right size and position. Although it would be nicer for the path itself to be adjusted to the field, like the built in Vivaldi icon.

[luetage]

@supra107 That’s why I linked you, to control the dimensions you can adjust the viewbox. But this isn’t possible with CSS alone, you need to access the HTML.

[supra107]

@luetage The default viewbox is fine and big enough for the icon, it was the SVG element size and position itself that was the problem, but now I've learned you can adjust that with a CSS transform.

[Ornorm]

@potmeklecbohdan said in Changing icons with CSS / part II:

You have to put the code into one line

Ooooooh! That was the detail I was looking for yesterday night... Finally!!!!! It works. Thank you

[hlehyaric]

@Ornorm Now, you mod V's UI?

[Ornorm]

@hlehyaric Just trying to be part of the "Realz" club...

@Ornorm said in Inspecting the Vivaldi UI with DevTools:

It's for the Vivaldi "Realz" users (I'm still a young padawan)

[A Former User]

@Ornorm Hehe… does that mean my icons are finally used by someone else? Or are you like me & make the icons by writing their code?

[Ornorm]

@potmeklecbohdan I'm using my own icons (sorry...) but I found why my mod didn't work thanks to you

You have to put the code into one line

I tried soooooo many class codes to make it work but couldn't achieve it. I then start to read many mod posts to finally read yours. My code was correct but wasn't written into one line.

[hlehyaric]

@Ornorm Welcome to The Happy Modding Society.

[luetage]

@Ornorm I’m shocked. What didn’t you understand when Vivaldi said: “Make it your own”? Of course you gotta mod.

[Ornorm]

@luetage said in Changing icons with CSS / part II:

I’m shocked

You can...
But you know, it's like with wine. The best ones are the most difficult to appreciate.
For me, it's the same, I started by using the standard UI settings of Vivaldi to change the color, to add picture backgrounds, etc. (Level Newbie or "piquette" wine).
I then started to mod Vivaldi forum (thanks to you ) and I thought, yummy, difficult to appreciate the first time but it tastes good. (Level Young paddawan or standard Bordeaux wine).
And now, I'm trying to taste new flavours, tasting Bourgogne as well (Level (newbie) Realz).

[hlehyaric]

@Ornorm Next level: Champagne (writing your own mods).

[A Former User]

@hlehyaric & next level is… being tired (for no reason) & using only mods that you currently have & that work w/o you moving a finger (water)

(though I don’t want this)