Creates icon mapping React component

visual-kpi-docs/docs/supporting-pages/icons-map.mdx

@@ -0,0 +1,11 @@
+---
+id: mapped-icons
+title: Mapped Icons
+slug: /mapped-icons
+description: 'On this page we should list all existing video training.'
+tags: []
+---
+
+import IconsMap from '@site/src/components/SvgFont/IconsMap';
+
+<IconsMap />

visual-kpi-docs/sidebars.js

@@ -317,6 +317,11 @@ const sidebars = {
       defaultStyle: true,
       className: 'sidebar_title',
     },
+    {
+      type: 'doc',
+      id: 'supporting-pages/mapped-icons',
+      label: 'Mapped Icons',
+    },
     {
       type: 'doc',
       id: 'supporting-pages/faq',
@@ -337,8 +342,7 @@ const sidebars = {
       type: 'doc',
       id: 'supporting-pages/glossary',
       label: 'Glossary',
-    },
-
+    },    
   ],
 };
 

visual-kpi-docs/src/components/SvgFont/IconsMap.jsx

@@ -0,0 +1,24 @@
+import selection from '@site/static/font/selection.json';
+import SvgFont from '@site/src/components/SvgFont/SvgFont';
+
+export default function IconsMap() {
+  const gridContainerStyle = {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
+    gap: '10px',
+  };
+  console.log(selection.icons[8])
+
+  return (
+    <div style={gridContainerStyle}>
+      {
+        selection.icons.map((icon, index) => (
+          <div>
+            <SvgFont data={icon} />
+            <span> {index} - {icon.properties.name}</span>
+          </div>
+        ))
+      }
+    </div>
+  )
+}

visual-kpi-docs/src/components/SvgFont/SvgFont.jsx

@@ -12,7 +12,7 @@ export default function SvgFont({ data, position, size }) {
     <span className="svg_container">
       <svg className="hidesvg" version="1.1" xmlns="http://www.w3.org/1999/xlink">
         <defs>
-          <symbol id={data.properties.name} width={size} viewBox={`0 0 ${position}`}>
+          <symbol id={data.properties.name} width={size} viewBox={`0 0 ${position || "1024 1024"}`}>
             <title>test</title>
             <path className="path1" d={path}></path>
           </symbol>