Remove ReactDOMServer dependency and simplify avatar image fallback (#…

…672)
CartoDB · May 16, 2023 · a3c2952 · a3c2952
1 parent 31dfa94
commit a3c2952
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 15 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 ## Not released
 
+- Remove ReactDOMServer dependency and simplify avatar image fallback [#672](https://github.com/CartoDB/carto-react/pull/672)
 - Remove @mui/styles after dumping makeStyles [#670](https://github.com/CartoDB/carto-react/pull/670)
 - Add tooltip prop to ComparativeCategoryWidgetUI [#667](https://github.com/CartoDB/carto-react/pull/667)
 - react-ui: Add component typings [#663](https://github.com/CartoDB/carto-react/pull/663)

diff --git a/packages/react-ui/src/theme/sections/components/dataDisplay.js b/packages/react-ui/src/theme/sections/components/dataDisplay.js
@@ -1,15 +1,14 @@
-import React from 'react';
 import { ICON_SIZE_MEDIUM, ICON_SIZE_LARGE, ICON_SIZE_SMALL } from '../../themeConstants';
 import { getSpacing } from '../../themeUtils';
 import { commonPalette } from '../palette';
 import { themeTypography } from '../typography';
-import { PersonOutline } from '@mui/icons-material';
-import { getIconPath } from '../../themeUtils';
 
 const tooltipArrowSize = 1;
 const tooltipSeparation = 0.5;
 const tooltipMargin = tooltipArrowSize + tooltipSeparation;
-const avatarFallbackImage = getIconPath(<PersonOutline />);
+// PersonOutline path: https://github.com/mui/material-ui/blob/master/packages/mui-icons-material/material-icons/person_outline_24px.svg?short_path=edcd654
+const avatarFallbackImage =
+  'M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-2.1 2.1S9.9 9.16 9.9 8s.94-2.1 2.1-2.1m0 9c2.97 0 6.1 1.46 6.1 2.1v1.1H5.9V17c0-.64 3.13-2.1 6.1-2.1M12 4C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 9c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4z';
 const avatarCircularRadius = '50%';
 const avatarRoundedRadius = 0.5;
 

diff --git a/packages/react-ui/src/theme/themeUtils.js b/packages/react-ui/src/theme/themeUtils.js
@@ -1,4 +1,3 @@
-import ReactDOMServer from 'react-dom/server';
 import { createSpacing } from '@mui/system';
 import { SPACING } from './themeConstants';
 
@@ -12,13 +11,3 @@ export function getPixelToRem(px) {
 
   return rem;
 }
-
-// Get the icon path from a given icon
-export function getIconPath(icon) {
-  const iconString = ReactDOMServer.renderToString(icon);
-  const parser = new DOMParser();
-  const svg = parser.parseFromString(iconString, 'image/svg+xml');
-  const iconPath = svg.querySelector('path').getAttribute('d');
-
-  return iconPath;
-}