Show all symbols.

lib/browser-main.tsx

@@ -1,14 +1,47 @@
 import React from "react";
 import ReactDOM from "react-dom";
 
+import _SvgVocabulary from "./svg-vocabulary.json";
+import type { SvgSymbolData } from "./vocabulary";
+
 const APP_ID = "app";
 
 const appEl = document.getElementById(APP_ID);
 
+const SvgVocabulary: SvgSymbolData[] = _SvgVocabulary;
+
 if (!appEl) {
   throw new Error(`Unable to find #${APP_ID}!`);
 }
 
-const App: React.FC<{}> = () => <p>SUP</p>;
+type SvgSymbolProps = {
+  data: SvgSymbolData;
+};
+
+const SvgSymbol: React.FC<SvgSymbolProps> = (props) => {
+  const d = props.data;
+
+  return (
+    <svg
+      stroke="#000000"
+      fill="#ffffff"
+      width={`${d.width}px`}
+      height={`${d.height}px`}
+      dangerouslySetInnerHTML={{ __html: d.svg }}
+    ></svg>
+  );
+};
+
+const App: React.FC<{}> = () => (
+  <>
+    <h1>Mythic Symbolic</h1>
+    {SvgVocabulary.map((symbolData) => (
+      <>
+        <h2>{symbolData.name}</h2>
+        <SvgSymbol data={symbolData} />
+      </>
+    ))}
+  </>
+);
 
 ReactDOM.render(<App />, appEl);

tsconfig.json

@@ -63,6 +63,7 @@
     // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
     // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
 
+    "resolveJsonModule": true,
     /* Advanced Options */
     "skipLibCheck": true,                     /* Skip type checking of declaration files. */
     "forceConsistentCasingInFileNames": true  /* Disallow inconsistently-cased references to the same file. */