#6813 Enhance the SvgRegistry.registerIconFromSvg() method to suppo…

…rt the `icon-` prefix (#6947) * #6813 Enhance the `SvgRegistry.registerIconFromSvg()` method to support the `icon-` prefix Fixes #6813 * #6813 Enhance the `SvgRegistry.registerIconFromSvg()` method to support the `icon-` prefix - fixed test Fixes #6813
surveyjs · Sep 15, 2023 · 9ab7c41 · 9ab7c41
1 parent b8fc4f3
commit 9ab7c41
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 3 deletions.
diff --git a/src/svgbundle.ts b/src/svgbundle.ts
@@ -8,10 +8,15 @@ export class SvgIconRegistry {
   icons: SvgIconData = {};
   private iconPrefix = "icon-";
 
+  private processId(iconId: string, iconPrefix: string) {
+    if (iconId.indexOf(iconPrefix) == 0) iconId = iconId.substring(iconPrefix.length);
+    return iconId;
+  }
   public registerIconFromSymbol(iconId: string, iconSymbolSvg: string) {
     this.icons[iconId] = iconSymbolSvg;
   }
   public registerIconFromSvgViaElement(iconId: string, iconSvg: string, iconPrefix: string = this.iconPrefix) {
+    iconId = this.processId(iconId, iconPrefix);
     let divSvg = document.createElement("div");
     divSvg.innerHTML = iconSvg;
     let symbol = document.createElement("symbol");
@@ -26,6 +31,7 @@ export class SvgIconRegistry {
     this.registerIconFromSymbol(iconId, symbol.outerHTML);
   }
   public registerIconFromSvg(iconId: string, iconSvg: string, iconPrefix: string = this.iconPrefix): boolean {
+    iconId = this.processId(iconId, iconPrefix);
     const startStr = "<svg ";
     const endStr = "</svg>";
     iconSvg = iconSvg.trim();

diff --git a/testCafe/survey/svgRegistry.ts b/testCafe/survey/svgRegistry.ts
@@ -9,7 +9,7 @@ const json = {
     {
       "type": "html",
       "name": "question1",
-      "html": "<svg id=\"svg-icon-test\"><use xlink:href=\"#icon-icon-test\"></use></svg>"
+      "html": "<svg id=\"svg-icon-test\"><use xlink:href=\"#icon-icn-test\"></use></svg>"
     }
   ]
 };
@@ -18,7 +18,7 @@ frameworks.forEach(async framework => {
   fixture`${framework} ${title}`.page`${url}${framework}`.beforeEach(
     async t => {
       await ClientFunction(() => {
-        window["Survey"].SvgRegistry.registerIconFromSvg("icon-test", "<svg viewBox=\"1 2 3 4\"></svg>");
+        window["Survey"].SvgRegistry.registerIconFromSvg("icn-test", "<svg viewBox=\"1 2 3 4\"></svg>");
       })();
       await initSurvey(framework, json);
     }
@@ -29,7 +29,7 @@ frameworks.forEach(async framework => {
     });
     await t
       .expect(Selector("#sv-icon-holder-global-container").exists).ok()
-      .expect(svgContainer()).contains("<symbol id=\"icon-icon-test\" viewBox=\"1 2 3 4\"></symbol>")
+      .expect(svgContainer()).contains("<symbol id=\"icon-icn-test\" viewBox=\"1 2 3 4\"></symbol>")
       .expect(svgContainer()).contains("<symbol id=\"icon-left\"");
   });
 });
diff --git a/tests/svgRegistryTests.ts b/tests/svgRegistryTests.ts
@@ -65,4 +65,17 @@ QUnit.test("svg import in the custom environment", function (assert) {
     rootElement: document.body,
     svgMountContainer: document.head
   };
+});
+
+QUnit.test("svg import from svg via element - use prefix", function (assert) {
+  let svg = new SvgIconRegistry();
+  svg.registerIconFromSvgViaElement("icon-a", "<svg viewBox=\"0 0 100 100\"><circle/></symbol>");
+  assert.equal(svg.iconsRenderedHtml(), "<symbol viewBox=\"0 0 100 100\" id=\"icon-a\"><circle></circle></symbol>");
+});
+
+QUnit.test("svg import from svg via string - use prefix", function (assert) {
+  let svg = new SvgIconRegistry();
+  let res = svg.registerIconFromSvg("icon-a", "<svg viewBox=\"0 0 100 100\"><circle/></svg>");
+  assert.ok(res);
+  assert.equal(svg.iconsRenderedHtml(), "<symbol id=\"icon-a\" viewBox=\"0 0 100 100\"><circle/></symbol>");
 });