Attempt at texmo icons

custom.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svg' {
+  const content: string;
+  export default content;
+}

example/custom.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svg' {
+  const content: string;
+  export default content;
+}

example/pages/HomePage.tsx

@@ -2,6 +2,7 @@ import { InfoTile, Title } from '@the-curve-consulting/texmo-react-components';
 import { Row, Col } from 'react-bootstrap';
 
 const HomePage = () => {
+
   return (
     <>
       <Row className="my-4">
@@ -78,4 +79,4 @@ const HomePage = () => {
   )
 }
 
-export default HomePage;
+export default HomePage;

example/tsconfig.json

@@ -20,6 +20,6 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["src"],
+  "include": ["src", "custom.d.ts"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }

src/components/texmoIcon/TexmoIcon.tsx

@@ -1,32 +1,31 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { TexmoIcons } from 'types';
 
 export interface TexmoIconProps {
   icon: TexmoIcons;
 }
 
 const TexmoIcon = ({ icon }: TexmoIconProps) => {
-  const [Icon, setIcon] = useState<React.FC | null>(null);
+  const [svgComponent, setSvgComponent] = useState(null);
 
   useEffect(() => {
-    const loadIcon = async () => {
+    const importSVG = async () => {
       try {
-        const importedIcon = await import(`../../icons/${icon}.svg`);
-        console.log(importedIcon.default);
-        setIcon(importedIcon.default);
+        const svg = await import(`../../icons/users2.svg`);
+        setSvgComponent(svg.default);
       } catch (error) {
         console.error('Error loading SVG:', error);
       }
     };
 
-    loadIcon();
-  }, [icon]);
+    importSVG();
 
-  if (!Icon) {
-    return <div>SVG not found</div>;
-  }
+    return () => {
+      setSvgComponent(null);
+    };
+  }, [icon]);
 
-  return <Icon />;
+  return <div>{svgComponent && <img src={svgComponent} alt={icon} />}</div>;
 };
 
 export default TexmoIcon;

src/index.ts

@@ -19,7 +19,7 @@ import Nav from './components/nav/Nav';
 import Subtitle from './components/subtitle/Subtitle';
 import Layout from './components/layout/Layout';
 import Tabs from './components/tabs/Tabs';
-// import TexmoIcon from './components/texmoIcon/TexmoIcon';
+import TexmoIcon from './components/texmoIcon/TexmoIcon';
 import '../scss/texmo-react-components.scss';
 
 export {
@@ -44,4 +44,5 @@ export {
   Subtitle,
   Layout,
   Tabs,
+  TexmoIcon,
 };

tsconfig.json

@@ -34,7 +34,8 @@
     ],
   },
   "include": [
-    "src/**/*"
+    "src/**/*",
+    "custom.d.ts"
   ],
   "exclude": [
     "node_modules",