fix: Display error svg if invalid icon supplied

plugsy · Jul 28, 2021 · 29099d2 · 29099d2
1 parent a6a4c0f
commit 29099d2
Showing 1 changed file with 13 additions and 3 deletions.
diff --git a/packages/core/client/components/DynamicIcon/index.tsx b/packages/core/client/components/DynamicIcon/index.tsx
@@ -1,6 +1,6 @@
 import SVG, { Props as SVGProps } from "react-inlinesvg";
 
-import React from "react";
+import React, { useEffect, useState } from "react";
 
 export interface DynamicIconProps extends Omit<SVGProps, "src"> {
   icon: string;
@@ -12,13 +12,23 @@ export const DynamicIcon: React.FC<DynamicIconProps> = ({
   height,
   ...props
 }) => {
-  return (
+  const [error, setError] = useState(false);
+  useEffect(() => setError(false), [icon]);
+  return !error ? (
     <SVG
       width={width}
       height={height}
       src={`/icons/${icon}`}
       loader={<div style={{ width, height }} />}
-      onError={console.log}
+      onError={() => setError(true)}
+      {...props}
+    />
+  ) : (
+    <SVG
+      width={width}
+      height={height}
+      src={`/icons/@styled-icons/fluentui-system-regular/DocumentError`}
+      loader={<div style={{ width, height }} />}
       {...props}
     />
   );