[icons-test] load dynamic of icons

apps/exampleapp/esbuild.config.js

@@ -7,6 +7,7 @@ const { transform } = require("@svgr/core")
 const url = require("postcss-url")
 // this function generates app props based on package.json and propSecrets.json
 const appProps = require("../../helpers/appProps")
+const path = require("path")
 
 if (!/.+\/.+\.js/.test(pkg.module))
   throw new Error(
@@ -42,6 +43,23 @@ const build = async () => {
   await fs.rm(outdir, { recursive: true, force: true })
   await fs.mkdir(outdir, { recursive: true })
 
+  // copy folder with fs.cpsync the material design icons to build folder
+  // we need to resolve the node package in node_modules
+
+  const iconsPath = path.resolve(
+    path.dirname(
+      require.resolve("@material-design-icons/svg/filled/account_circle.svg")
+    ),
+    "../"
+  )
+
+  await fs.cp(`${iconsPath}/filled`, `${outdir}/svg/filled`, {
+    recursive: true,
+  })
+  await fs.cp(`${iconsPath}/outlined`, `${outdir}/svg/outlined`, {
+    recursive: true,
+  })
+
   // build app
   let ctx = await esbuild.context({
     bundle: true,

apps/exampleapp/package.json

@@ -41,7 +41,8 @@
     "url-state-provider": "*",
     "util": "^0.12.4",
     "utils": "*",
-    "zustand": "4.3.7"
+    "zustand": "4.3.7",
+    "@material-design-icons/svg": "^0.14.4"
   },
   "scripts": {
     "test": "jest",

apps/exampleapp/src/components/AppContent.js

@@ -22,6 +22,7 @@ import ModalManager from "./ModalManager"
 import PanelManager from "./PanelManager"
 import Peaks from "./peaks/Peaks"
 import WelcomeView from "./WelcomeView"
+import DynamicLoadIcon from "./DynamicLoadIcon"
 
 const AppContent = (props) => {
   const { setTabIndex, setCurrentModal } = useGlobalsActions()
@@ -57,6 +58,7 @@ const AppContent = (props) => {
               <TabList>
                 <Tab>Peaks</Tab>
                 <Tab>Tab Two</Tab>
+                <Tab>Tab Three</Tab>
               </TabList>
 
               <TabPanel>
@@ -93,6 +95,9 @@ const AppContent = (props) => {
                   </Select>
                 </Container>
               </TabPanel>
+              <TabPanel>
+                <DynamicLoadIcon />
+              </TabPanel>
             </MainTabs>
             <ModalManager />
           </Container>

apps/exampleapp/src/components/DynamicLoadIcon.jsx

@@ -0,0 +1,108 @@
+import React, { useEffect, useRef, useState } from "react"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  Container,
+  Button,
+  MainTabs,
+  Tab,
+  TabList,
+  TabPanel,
+  Select,
+  SelectOption,
+  FormRow,
+  TextInput,
+} from "juno-ui-components"
+
+// from camelcase to underscore
+// https://stackoverflow.com/questions/4149276/javascript-camelcase-to-regular-form
+const camelToSnake = (str) =>
+  str.replace(/[A-Z]/g, (letter) => `_${letter.toLowerCase()}`)
+
+const MaterialIcon = ({ name, width, height }) => {
+  const ref = useRef()
+
+  useEffect(() => {
+    if (!ref.current) return
+
+    fetch(new URL(`./svg/filled/${name}.svg`, import.meta.url))
+      .then((r) => {
+        return r.text()
+      })
+      .then((text) => {
+        ref.current.innerHTML = text
+        ref.current.children[0].setAttribute("width", width)
+        ref.current.children[0].setAttribute("height", height)
+        ref.current.replaceWith(ref.current.children[0])
+      })
+  }, [ref.current, name, height, width])
+
+  return <div ref={ref}></div>
+}
+
+const DynamicLoadIcon = () => {
+  const [iconComponent, setIconComponent] = useState(null)
+  const [iconAttributes, setIconAttributes] = useState({
+    name: "account_circle",
+    width: 24,
+    height: 24,
+    alt: "",
+    title: "",
+  })
+  const [svg, setSvg] = useState(null)
+
+  return (
+    <>
+      <Container px={false} py={true}>
+        <FormRow>
+          <TextInput
+            label="Name"
+            value={iconAttributes.name}
+            placeholder="Icon name"
+            onChange={(event) => {
+              setIconAttributes({ ...iconAttributes, name: event.target.value })
+            }}
+          />
+        </FormRow>
+        <FormRow>
+          <TextInput
+            label="Height"
+            placeholder="Icon height"
+            onChange={(event) => {
+              setIconAttributes({
+                ...iconAttributes,
+                height: event.target.value,
+              })
+            }}
+          />
+        </FormRow>
+        <FormRow>
+          <TextInput
+            label="Width"
+            placeholder="Icon width"
+            onChange={(event) => {
+              setIconAttributes({
+                ...iconAttributes,
+                width: event.target.value,
+              })
+            }}
+          />
+        </FormRow>
+        <FormRow>
+          <TextInput label="Alt" placeholder="Icon alt" />
+        </FormRow>
+        <FormRow>
+          <TextInput label="Title" placeholder="Icon title" />
+        </FormRow>
+      </Container>
+      {/* {iconComponent && iconComponent} */}
+      <MaterialIcon
+        name={iconAttributes.name}
+        width={iconAttributes.width}
+        height={iconAttributes.height}
+      />
+    </>
+  )
+}
+
+export default DynamicLoadIcon