React: move svg bundle component from creator to library

src/entries/react-ui-model.ts

@@ -106,5 +106,7 @@ export { SurveyLocStringViewer } from "../react/string-viewer";
 export { SurveyLocStringEditor } from "../react/string-editor";
 export { LoadingIndicatorComponent } from "../react/components/loading-indicator";
 
+export { SvgBundleComponent } from "../react/svgbundle";
+
 //Uncomment to include the "date" question type.
 //export {default as SurveyQuestionDate} from "../plugins/react/reactquestiondate";

src/react/reactSurvey.tsx

@@ -5,13 +5,12 @@ import { ISurveyCreator } from "./reactquestion";
 import { SurveyElementBase } from "./reactquestion_element";
 import { SurveyLocStringViewer } from "./string-viewer";
 import { SurveyHeader } from "./components/survey-header/survey-header";
-import { SurveyTimerPanel } from "./reacttimerpanel";
 import { ReactQuestionFactory } from "./reactquestion_factory";
 import { ReactElementFactory } from "./element-factory";
-import { SurveyActionBar } from "./components/action-bar/action-bar";
 import { BrandInfo } from "./components/brand-info";
 import { NotifierComponent } from "./components/notifier";
 import { ComponentsContainer } from "./components/components-container";
+import { SvgBundleComponent } from "./svgbundle";
 
 export class Survey extends SurveyElementBase<any, any>
   implements ISurveyCreator {
@@ -82,9 +81,6 @@ export class Survey extends SurveyElementBase<any, any>
     this.destroySurvey();
   }
   doRender(): JSX.Element {
-    if(this.survey["needRenderIcons"]) {
-      SvgRegistry.renderIcons();
-    }
     let renderResult: JSX.Element | null;
     if (this.survey.state == "completed") {
       renderResult = this.renderCompleted();
@@ -112,6 +108,7 @@ export class Survey extends SurveyElementBase<any, any>
 
     return (
       <div id={this.rootNodeId} ref={this.rootRef} className={cssClasses} style={this.survey.themeVariables}>
+        {this.survey.needRenderIcons ? <SvgBundleComponent></SvgBundleComponent> : null }
         <div className={this.survey.wrapperFormCss}>
           {backgroundImage}
           <form onSubmit={onSubmit}>

src/react/svgbundle.tsx

@@ -0,0 +1,23 @@
+
+import React from "react";
+import { SvgRegistry } from "survey-core";
+
+export class SvgBundleComponent extends React.Component {
+  private containerRef: React.RefObject<SVGSVGElement>;
+
+  constructor(props: any) {
+    super(props);
+    this.containerRef = React.createRef();
+  }
+  componentDidMount() {
+    if (!!this.containerRef.current) {
+      this.containerRef.current.innerHTML = SvgRegistry.iconsRenderedHtml();
+    }
+  }
+  render() {
+    const svgStyle = {
+      display: "none"
+    };
+    return <svg style={svgStyle} id="sv-icon-holder-global-container" ref={this.containerRef}></svg>;
+  }
+}

src/survey.ts

@@ -7175,7 +7175,7 @@ export class SurveyModel extends SurveyElementCore
     this.isMovingQuestion = false;
   }
   get isQuestionDragging(): boolean { return this.isMovingQuestion; }
-  private needRenderIcons = true;
+  public needRenderIcons = true;
 
   private skippedPages: Array<{ from: any, to: any }> = [];