Directory Opus Manual

User Tools

Site Tools

You are here: Introduction » Reference » Icon Sets » SVG Icon Sets

Sidebar

Using Directory Opus
Configuration
Programming
Reference Section
reference:icon_sets:svg_icon_sets

SVG Icon Sets

As well as an icon set referring to external images, an icon set can be based on SVG code. Unlike traditional icon sets that use one or more bitmaps with a grid of icons, SVG icon sets store the SVG code directly in their XML definition file, making them completely self-contained. SVG icons will scale automatically, and if rendered using "currentColor" in the SVG will use the toolbar's default text color automatically.

Making an SVG icon set
  • To make an SVG icon set, the <set> element's size attribute should be set to "svg".
  • Optionally, set remove_padding="yes" to have any padding automatically removed from the SVG image.
  • You can include common styles that will be shared by all icons in the set. The <style> elements should be at the same level as the <icon> elements. Individual <svg> images can also contain styles which are private to that image.
  • SVG icon sets can have default small and large sizes defined. These control how large the icons are scaled by default when the button or toolbar is set to small or large size. Add small="x" and large="x" attributes to the <set> element.
  • SVG icons that use "currentColor" are now shown in the appropriate color from the toolbar/button in the button editor and icon browser.
Example
<?xml version="1.0"encoding="utf-8"?>
<iconset name="feather">
    <display_name>Feather Icons</display_name>
	<copyright>Copyright (c) 2013-2023 Cole Bemis</copyright>
	<set size="svg">
		<style>
			.feather {
				fill: none;
				stroke: currentColor;
				stroke-width: 2;
				stroke-linecap: round;
				stroke-linejoin: round;
			}
		</style>
		<icon name="activity">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" class="feather feather-activity">
<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg>
		</icon>
		<icon name="airplay">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" class="feather feather-airplay">
<path d="M5 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-1"></path>
<polygon points="12 15 17 21 7 21 12 15"></polygon></svg>
		</icon>
...
Supporting dark and light modes

You can use stylesheets with SVG images to support colour remapping in dark/light modes. Add <style id="dark">...</style> and <style id="light">...</style> elements to the SVG definition. Opus will automatically recolor the image for the currently selected mode.