From 36b39a9267c19f61b415b384123a711ca38e3a38 Mon Sep 17 00:00:00 2001
From: Thomas Kurpick <thomas.kurpick@trustedshops.de>
Date: Fri, 27 Oct 2023 14:34:13 +0200
Subject: [PATCH] feat: use `imageHtml` for icon rendering

---
 colors/ColorPopupProvider.js | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/colors/ColorPopupProvider.js b/colors/ColorPopupProvider.js
index dde8e34..8ba699a 100644
--- a/colors/ColorPopupProvider.js
+++ b/colors/ColorPopupProvider.js
@@ -1,7 +1,3 @@
-import {
-  domify
-} from 'min-dom';
-
 const COLORS = [ {
   label: 'Default',
   fill: undefined,
@@ -54,21 +50,21 @@ ColorPopupProvider.$inject = [
 ColorPopupProvider.prototype.getEntries = function(elements) {
   var self = this;
 
-  var colorIcon = domify(`
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="100%">
+  var colorIconHtml = `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25" height="100%" width="100%">
       <rect rx="2" x="1" y="1" width="22" height="22" fill="var(--fill-color)" stroke="var(--stroke-color)" style="stroke-width:2"></rect>
     </svg>
-  `);
+  `;
 
   var entries = this._colors.map(function(color) {
 
-    colorIcon.style.setProperty('--fill-color', color.fill || self._defaultFillColor);
-    colorIcon.style.setProperty('--stroke-color', color.stroke || self._defaultStrokeColor);
+    var entryColorIconHtml = colorIconHtml.replace('var(--fill-color)', color.fill || self._defaultFillColor)
+      .replace('var(--stroke-color)', color.stroke || self._defaultStrokeColor);
 
     return {
       title: self._translate(color.label),
       id: color.label.toLowerCase() + '-color',
-      imageUrl: `data:image/svg+xml;utf8,${ encodeURIComponent(colorIcon.outerHTML) }`,
+      imageHtml: entryColorIconHtml,
       action: createAction(self._modeling, elements, color)
     };
   });