Use html-to-react instead of dangerouslySetInnerHTML

sippy-platform · Apr 5, 2023 · adce2e8 · adce2e8
1 parent aa2ee4f
commit adce2e8
Show file tree

Hide file tree

Showing 4 changed files with 146 additions and 39 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -46,6 +46,9 @@
     "@mui/system": ">=5.x",
     "react": ">=16.x"
   },
+  "dependencies": {
+    "@hedgedoc/html-to-react": "1.4.6"
+  },
   "devDependencies": {
     "@twbs/fantasticon": "2.6.0",
     "@types/react": "18.0.33",

diff --git a/site/package-lock.json b/site/package-lock.json
diff --git a/src/ValkyrieIcon.tsx b/src/ValkyrieIcon.tsx
@@ -1,6 +1,7 @@
 import { IValkyrieIcon } from "./";
 import { Box, SxProps } from "@mui/system";
 import { keyframes } from "@emotion/react";
+import convertHtmlToReact from "@hedgedoc/html-to-react";
 
 interface ValkyrieProps {
   icon: IValkyrieIcon;
@@ -61,8 +62,8 @@ export default function ValkyrieIcon({
         },
         ...(Array.isArray(sx) ? sx : [sx])
       ]}
-      // eslint-disable-next-line react/no-danger
-      dangerouslySetInnerHTML={{ __html: icon.data }}
-    />
+      >
+        {convertHtmlToReact(icon.data)}
+      </Box>
   );
 }