🐛 Prevent SVG icons from leaking into DOM (#9574)

airbytehq · Jan 19, 2022 · 38a5d84 · 38a5d84
1 parent 0a3713a
commit 38a5d84
Showing 1 changed file with 8 additions and 6 deletions.
diff --git a/airbyte-webapp/src/utils/imageUtils.tsx b/airbyte-webapp/src/utils/imageUtils.tsx
@@ -3,12 +3,9 @@ import styled from "styled-components";
 
 import { DefaultLogoCatalog } from "components";
 
-const IconContainer = styled.div`
+const IconContainer = styled.img`
   height: 100%;
-  & > svg {
-    height: 100%;
-    width: 100%;
-  }
+  width: 100%;
 `;
 
 const IconDefaultContainer = styled.div`
@@ -24,5 +21,10 @@ export const getIcon = (icon?: string): React.ReactNode => {
     );
   }
 
-  return <IconContainer dangerouslySetInnerHTML={{ __html: icon }} />;
+  return (
+    <IconContainer
+      alt=""
+      src={`data:image/svg+xml;utf8,${encodeURIComponent(icon)}`}
+    />
+  );
 };