[Suggestion] SVG Color editing support for diagrams.net/draw.io

[dncman]

I stumbled across the great Iconify tool while searching for new icons for my diagrams.net/draw.io diagram.

It's great that the Iconify website allows you to customize the colors before downloading. I was wondering if it would be possible to add another code snippet to keep the color editing support in draw.io as well.

When inserting a SVG in draw.io you can't edit any attributes but draw.io does support it to change the colors when CSS classes are utilized: Edit colours in embedded SVG images - draw.io blog.

Example:

Icon: tdesign:file-icon

Native:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
	<g fill="none" stroke="#00f736" stroke-linecap="square" stroke-width="1">
		<path d="M20 10V7l-5-5H4v20h16M14 2v6h6" />
		<path d="M7 13v6m4 0h-.5a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1h.5m8 6v-6h2a1 1 0 0 1 1 1v5m-8.5-5v4a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1h-1a1 1 0 0 0-1 1Z" />
	</g>
</svg>

Edited for draw.io support:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <style type="text/css">
    .path1{stroke:#00f736;fill:none;stroke-width:1}
  </style>
  <g class="path1" stroke-linecap="square">
    <path d="M20 10V7l-5-5H4v20h16M14 2v6h6" />
    <path d="M7 13v6m4 0h-.5a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1h.5m8 6v-6h2a1 1 0 0 1 1 1v5m-8.5-5v4a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1h-1a1 1 0 0 0-1 1Z" />
  </g>
</svg>

It doesn't carry over all CSS settings (stroke-width is missing for example) but fill and stroke usually:

Implementation

So everything that's needed would be:

• replacing the inline style attributes fill="none" stroke="#00f736"
• moving them to a CSS class
• referencing that CSS class in the SVG elements

Use-Case

One point is that it's handy to be able to edit the colors afterwards and the other point is that draw.io can automatically apply change the colors for dark and light mode which is extremely handy when working with multiple people on the same diagram:

---

P.S. I hope that's the right repository. If not please point me to the right one.