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)} + ); }; 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"