Update Icons example

Roman Tsukanov · Roman Tsukanov · commit 04b45a167a47 · 2022-08-04T13:46:24.000+04:00
diff --git a/icons/index.css b/icons/index.css
@@ -0,0 +1,19 @@
+svg {
+    height: 32px;
+    width: 32px;
+    margin-right: 10px;
+    vertical-align: middle;
+}
+
+.icon-name {
+    font-size: 14px;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
+    margin-top: 5px;
+    color: #86929d;
+}
+
+.container {
+    display: inline-block;
+    width: 280px;
+    padding: 0 15px 15px 0;
+}
diff --git a/icons/index.html b/icons/index.html
@@ -7,16 +7,11 @@
       <script src="https://unpkg.com/react-dom@17.0.1/umd/react-dom.production.min.js"></script>
       <script src="https://unpkg.com/@babel/standalone@7.2.5/babel.min.js"></script>
       <script src="https://unpkg.com/survey-core@1.9.42/survey.core.min.js"></script>
-      <script src="https://unpkg.com/survey-core@1.9.42/survey.i18n.min.js"></script>
       <script src="https://unpkg.com/survey-react-ui@1.9.42/survey-react-ui.min.js"></script>
-      <link href="https://unpkg.com/survey-core@1.9.42/defaultV2.min.css" type="text/css" rel="stylesheet"/>
       <script src="https://unpkg.com/survey-creator-core@1.9.42/survey-creator-core.min.js"></script>
-      <link href="https://unpkg.com/survey-creator-core@1.9.42/survey-creator-core.min.css" type="text/css" rel="stylesheet"/>
-      <script src="https://unpkg.com/survey-creator-react@1.9.42/survey-creator-react.min.js"></script>
+      <link href="index.css" type="text/css" rel="stylesheet"/>
       <script type="text/babel" src="index.js"></script>
-  <body style="margin: 0">
-    <div id="surveyContainer">
-      <div id="creatorElement" style="height: 100vh;"></div>
-    </div>
+  <body>
+    <div id="icons" style="height: 100vh;"></div>
   </body>
 </html>
diff --git a/icons/index.js b/icons/index.js
@@ -2,10 +2,20 @@ Survey.SvgRegistry.renderIcons();
 
 ReactDOM.render(
   <div>
-    {Object.keys(Survey.SvgRegistry.icons).map(function(name) {
-        return <div><SurveyReact.SvgIcon iconName={"icon-" + name}
-    size={"auto"} className={"sd-detail-panel__icon"}
-    />{"icon-" + name}</div>;
-    })}
-  </div>
-, document.getElementById("creatorElement"));
+    {
+      Object.keys(Survey.SvgRegistry.icons).map(name => {
+        return (
+          <div class="container">
+            <SurveyReact.SvgIcon
+              iconName={"icon-" + name}
+              size={"auto"}
+              className={"sd-detail-panel__icon"}
+            />
+            <span className={"icon-name"}>{"icon-" + name}</span>
+          </div>
+        )
+      })
+    }
+  </div>,
+  document.getElementById("icons")
+);
