Example SVG Icon Set

Directory Opus 13.23.5 now supports SVG icon sets. Here's an example as a demonstration.

(the SVG icons are all from GitHub - feathericons/feather: Simply beautiful open-source icons · GitHub which are available for free under an MIT license).

feather.dis (13.0 KB)

A brief summary of SVG-related XML:

  • Set the size attribute of the <set> element to "svg"
  • Optionally provide default sizes for small and large via those attributes. These will be used as the icon size unless overridden by the toolbar.
  • Optionally set the remove_padding attribute to "yes" to remove any external padding from images.
  • The SVG code should be added inside each <icon> element (e.g. <icon name="copy"><svg>...</svg></icon>).
  • You can optionally provide styles via one or more <style>...</style> elements, which should appear at the same level as the <icon> elements.
  • Styles can have an attribute id="light" or id="dark" to provide different colors for light/dark mode.
  • Styles without an id will be provided to each SVG icon in both modes.
9 Likes

This iconset is using stroke="currentColor" in many (if not all) icons.
From a quick test, this seems to follow the light/dark mode, e.g. being some kind of white in a dark mode and some kind of black in a light mode.
Do you confirm this?
Could you point to the color (in Opus settings) this is using?
If it's actually using one of the colors in the settings, could it be possible that this becomes a dedicated color that can be set with the other colors?

and if rendered using "currentColor" in the SVG will use the toolbar's default text color automatically.

:slight_smile:

2 Likes

Ooops sorry about that :slight_smile:
As often ... RTFM!

3 Likes

This is awsome :slight_smile:
image
Many thanks.

  • How to adjust size of iconset ?

The current beta lets you specify default small/large sizes for SVG icon sets. See the root post for more information. You can also override the icon size on a per-toolbar basis as well now.

1 Like