Updated session profile page. Added TypeIcon component. Added useRegionNames hook.

src/components/metrics/DevicesTable.tsx

@@ -2,6 +2,7 @@ import MetricsTable, { MetricsTableProps } from './MetricsTable';
 import FilterLink from 'components/common/FilterLink';
 import { useMessages } from 'components/hooks';
 import { useFormat } from 'components/hooks';
+import TypeIcon from 'components/common/TypeIcon';
 
 export function DevicesTable(props: MetricsTableProps) {
   const { formatMessage, labels } = useMessages();
@@ -10,14 +11,7 @@ export function DevicesTable(props: MetricsTableProps) {
   function renderLink({ x: device }) {
     return (
       <FilterLink id="device" value={labels[device] && device} label={formatDevice(device)}>
-        <img
-          src={`${process.env.basePath || ''}/images/device/${
-            device?.toLowerCase() || 'unknown'
-          }.png`}
-          alt={device}
-          width={16}
-          height={16}
-        />
+        <TypeIcon type="device" value={device?.toLowerCase()} />
       </FilterLink>
     );
   }