From 6261a928031084a63ec6457239b819700758124b Mon Sep 17 00:00:00 2001
From: literat <tomas@litera.me>
Date: Sun, 5 Nov 2023 08:17:01 +0100
Subject: [PATCH] Fix(web-react): Icon component supports SSR

  * `dangerouslySetInnerHtml` do not work while rendering on server
  * this `Warning: Prop `dangerouslySetInnerHTML` did not match.` error
    was raised
  * we can avoid this by wrapping the component with something like
    `<NoSsr>`
  * @see: https://stackoverflow.com/questions/64079321/react-tooltip-and-next-js-ssr-issue
  * or by using some library like ReactHtmlParser to render HTML string
    magically as a component
  * @see: https://www.npmjs.com/package/react-html-parser
---
 packages/web-react/package.json                 | 1 +
 packages/web-react/src/components/Icon/Icon.tsx | 7 ++++---
 yarn.lock                                       | 9 ++++++++-
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/packages/web-react/package.json b/packages/web-react/package.json
index 9d2d3ecef4..eba1a126f6 100644
--- a/packages/web-react/package.json
+++ b/packages/web-react/package.json
@@ -19,6 +19,7 @@
   "dependencies": {
     "@react-hook/resize-observer": "^1.2.6",
     "classnames": "^2.3.1",
+    "react-html-parser": "^2.0.2",
     "react-transition-group": "^4.4.5"
   },
   "devDependencies": {
diff --git a/packages/web-react/src/components/Icon/Icon.tsx b/packages/web-react/src/components/Icon/Icon.tsx
index bb793da3ae..7946b2451e 100644
--- a/packages/web-react/src/components/Icon/Icon.tsx
+++ b/packages/web-react/src/components/Icon/Icon.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import ReactHtmlParser from 'react-html-parser';
 import { useIcon, useStyleProps } from '../../hooks';
 import { IconProps } from '../../types';
 
@@ -24,13 +25,13 @@ export const Icon = (props: IconProps): JSX.Element => {
       fill="none"
       width={boxSize}
       height={boxSize}
-      // eslint-disable-next-line react/no-danger
-      dangerouslySetInnerHTML={{ __html: icon }}
       aria-hidden={ariaHidden}
       {...otherProps}
       {...styleProps}
       className={styleProps.className}
-    />
+    >
+      {ReactHtmlParser(icon)}
+    </svg>
   );
 };
 
diff --git a/yarn.lock b/yarn.lock
index 52b7e7dad0..4cb9dcf4f0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -14377,7 +14377,7 @@ html-tags@^3.3.1:
   resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-3.3.1.tgz#a04026a18c882e4bba8a01a3d39cfe465d40b5ce"
   integrity sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==
 
-htmlparser2@^3.9.1:
+htmlparser2@^3.9.0, htmlparser2@^3.9.1:
   version "3.10.1"
   resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.10.1.tgz#bd679dc3f59897b6a34bb10749c855bb53a9392f"
   integrity sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==
@@ -20553,6 +20553,13 @@ react-error-boundary@^3.1.0:
   dependencies:
     "@babel/runtime" "^7.12.5"
 
+react-html-parser@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/react-html-parser/-/react-html-parser-2.0.2.tgz#6dbe1ddd2cebc1b34ca15215158021db5fc5685e"
+  integrity sha512-XeerLwCVjTs3njZcgCOeDUqLgNIt/t+6Jgi5/qPsO/krUWl76kWKXMeVs2LhY2gwM6X378DkhLjur0zUQdpz0g==
+  dependencies:
+    htmlparser2 "^3.9.0"
+
 react-inspector@^6.0.0:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/react-inspector/-/react-inspector-6.0.2.tgz#aa3028803550cb6dbd7344816d5c80bf39d07e9d"