Update inconsistent SVG icons

[pavithraes]

All pull requests must have an associated issue in the issue tracker. If there
isn't one, please go open an issue describing the defect, deficiency or desired
feature. You can read more about our issue and PR processes in the
wiki.

• issues: fixes New SVG icons have inconsistent line widths #14541
• tests added / passed
• release document entry (if new feature or API change)

[mattpap]

color_scatter example before and after:

Looks much better.

[mattpap]

Baseline images need to be updated.

[mattpap]

marked this pull request as ready for review

The label says otherwise.

[mosc9575]

It looks like the alpha value of the filled areas in some icons is lost when transferring the svg to png.

The append-mode.sgv as an example:

Not sure if anything can be done about it.

[mattpap]

@pavithraes, you asked about test failures in yesterday's meeting. Everything is unrelated. Failures on Windows were resolved in PR #9087 (last commit) and bokehjs failures are addressed in PR #14573.

[mattpap]

What happened here?

This didn't look like this during my earlier review.

[mattpap]

I suppose commit 0d0a6b9 is responsible.

[pavithraes]

Discussed this with Mateusz -- and both the issues seem to be related to masks, and needs further investigation.

[mattpap]

What works with the CSS mask approach is this:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  <path d="..." fill="currentColor" fill-opacity="0.4" />

i.e. use currentColor instead of any specific colors and then use fill-opacity to control the alpha channel.

I applied this change to all (?) new icons. Any future changes must follow this pattern:

• keep all stroke related attributes in <svg>
• set fill related attributes as explained above
• don't use <g>, clip paths, etc. if not actually needed

All of this finally brings new icons on par with existing SVG icons (in terms of the structure of the SVG).

[mosc9575]

@mattpap There are three observations I want to mention.

1. One icon is missing in "bokehjs/test/baselines/linux/Icons__should_support_all_icons_defined_in_less_icons.less.png", I think it is the box-edit.svg. Marked in green.
2. One icon has a different color. The toggle-mode.svg is maybe not updated. Marked in blue.
3. One icon appears two times (y-grip.svg). I belive one of these two should be the x-grip.svg. Marked in red.

Furthermore some icons defined in https://github.com/bokeh/bokeh/blob/branch-3.8/bokehjs/src/less/icons.less are missing, like fullscreen.svg and trash.svg.

[pavithraes]

One icon has a different color. The toggle-mode.svg is maybe not updated. Marked in blue.

Just noting that yes, this was not redesigned. The png version was just converted into svg.

[pavithraes]

@mosc9575 - Thanks for the reviews!

One icon appears two times (y-grip.svg). I belive one of these two should be the x-grip.svg. Marked in red.

Yes, good catch! I can update!

One icon is missing in "bokehjs/test/baselines/linux/Icons__should_support_all_icons_defined_in_less_icons.less.png", I think it is the box-edit.svg. Marked in green.

Indeed, I see on a local test run though, so I can update the baseline once CI completes for x-grip fix. :)

[pavithraes]

Edit: This resolved after merging branch-3.8.

There is a test failure, which I think is unrelated to this PR:

✗ Bug
 └┬─ in issue #14207
  └── has zoom in when visibility changes
timeout

[mattpap]

Docs CI failure is unrelated and fixed in PR #14487 (985259e).

[mattpap]

I still don't like how wheel zoom and related icons look look and there are icons (e.g. toggle-mode.svg) that are implemented in an awkward way. However, this is a huge improvement over the original, so let's get this merged and continue refining in future PRs.

[pavithraes]

@mattpap and @mosc9575 -- Thank you so much for all your help with this PR! 🌻

[github-actions]

This pull request has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.