added new web vital icons (#31578)

docs-ui/stories/assets/icons/data.tsx

@@ -614,4 +614,19 @@ export const icons: IconData[] = [
     groups: ['action'],
     keywords: ['scale', 'stretch'],
   },
+  {
+    id: 'happy',
+    groups: ['content'],
+    keywords: ['good'],
+  },
+  {
+    id: 'meh',
+    groups: ['content'],
+    keywords: ['meh'],
+  },
+  {
+    id: 'sad',
+    groups: ['content'],
+    keywords: ['poor'],
+  },
 ];

static/app/icons/iconHappy.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+import SvgIcon, {SVGIconProps} from './svgIcon';
+
+const IconHappy = React.forwardRef<SVGSVGElement, SVGIconProps>((props, ref) => {
+  return (
+    <SvgIcon {...props} ref={ref}>
+      <path d="M8,16a8,8,0,1,1,8-8A8,8,0,0,1,8,16ZM8,1.53A6.47,6.47,0,1,0,14.47,8,6.47,6.47,0,0,0,8,1.53Z" />
+      <circle cx="4.84" cy="6.79" r="0.99" />
+      <circle cx="11.32" cy="6.79" r="0.99" />
+      <path d="M8,12.27a5,5,0,0,1-4.15-2.21.75.75,0,1,1,1.24-.84,3.5,3.5,0,0,0,5.87-.08.74.74,0,0,1,1-.23.76.76,0,0,1,.23,1A5,5,0,0,1,8,12.27Z" />
+    </SvgIcon>
+  );
+});
+
+IconHappy.displayName = 'IconHappy';
+
+export {IconHappy};

static/app/icons/iconMeh.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+import SvgIcon, {SVGIconProps} from './svgIcon';
+
+const IconMeh = React.forwardRef<SVGSVGElement, SVGIconProps>((props, ref) => {
+  return (
+    <SvgIcon {...props} ref={ref}>
+      <path d="M8,16a8,8,0,1,1,8-8A8,8,0,0,1,8,16ZM8,1.53A6.47,6.47,0,1,0,14.47,8,6.47,6.47,0,0,0,8,1.53Z" />
+      <circle cx="4.84" cy="6.79" r="0.99" />
+      <circle cx="11.32" cy="6.79" r="0.99" />
+      <path d="M12.32,10.78H3.85a.75.75,0,1,1,0-1.5h8.47a.75.75,0,0,1,0,1.5Z" />
+    </SvgIcon>
+  );
+});
+
+IconMeh.displayName = 'IconMeh';
+
+export {IconMeh};

static/app/icons/iconSad.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+import SvgIcon, {SVGIconProps} from './svgIcon';
+
+const IconSad = React.forwardRef<SVGSVGElement, SVGIconProps>((props, ref) => {
+  return (
+    <SvgIcon {...props} ref={ref}>
+      <path d="M8,16a8,8,0,1,1,8-8A8,8,0,0,1,8,16ZM8,1.53A6.47,6.47,0,1,0,14.47,8,6.47,6.47,0,0,0,8,1.53Z" />
+      <circle cx="4.84" cy="6.79" r="0.99" />
+      <circle cx="11.32" cy="6.79" r="0.99" />
+      <path d="M4.44,12.27a.72.72,0,0,1-.4-.12.76.76,0,0,1-.23-1A5,5,0,0,1,12.18,11a.75.75,0,1,1-1.24.84,3.5,3.5,0,0,0-5.87.08A.75.75,0,0,1,4.44,12.27Z" />
+    </SvgIcon>
+  );
+});
+
+IconSad.displayName = 'IconSad';
+
+export {IconSad};

static/app/icons/index.tsx

@@ -39,6 +39,7 @@ export {IconGoogle} from './iconGoogle';
 export {IconGrabbable} from './iconGrabbable';
 export {IconGraph} from './iconGraph';
 export {IconGroup} from './iconGroup';
+export {IconHappy} from './iconHappy';
 export {IconInfo} from './iconInfo';
 export {IconInput} from './iconInput';
 export {IconIssues} from './iconIssues';
@@ -53,6 +54,7 @@ export {IconLock} from './iconLock';
 export {IconMail} from './iconMail';
 export {IconMarkdown} from './iconMarkdown';
 export {IconMegaphone} from './iconMegaphone';
+export {IconMeh} from './iconMeh';
 export {IconMenu} from './iconMenu';
 export {IconMobile} from './iconMobile';
 export {IconMoon} from './iconMoon';
@@ -74,6 +76,7 @@ export {IconRefresh} from './iconRefresh';
 export {IconReleases} from './iconReleases';
 export {IconResize} from './iconResize';
 export {IconReturn} from './iconReturn';
+export {IconSad} from './iconSad';
 export {IconSearch} from './iconSearch';
 export {IconSentry} from './iconSentry';
 export {IconSettings} from './iconSettings';

static/app/views/performance/vitalDetail/utils.tsx

@@ -3,7 +3,7 @@ import {Location, Query} from 'history';
 
 import MarkLine from 'sentry/components/charts/components/markLine';
 import {getSeriesSelection} from 'sentry/components/charts/utils';
-import {IconCheckmark, IconFire, IconWarning} from 'sentry/icons';
+import {IconHappy, IconMeh, IconSad} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {Series} from 'sentry/types/echarts';
 import {axisLabelFormatter, tooltipFormatter} from 'sentry/utils/discover/charts';
@@ -45,11 +45,9 @@ export const vitalStateColors: Record<VitalState, Color> = {
 };
 
 export const vitalStateIcons: Record<VitalState, React.ReactNode> = {
-  [VitalState.POOR]: <IconFire color={vitalStateColors[VitalState.POOR]} />,
-  [VitalState.MEH]: <IconWarning color={vitalStateColors[VitalState.MEH]} />,
-  [VitalState.GOOD]: (
-    <IconCheckmark color={vitalStateColors[VitalState.GOOD]} isCircled />
-  ),
+  [VitalState.POOR]: <IconSad color={vitalStateColors[VitalState.POOR]} />,
+  [VitalState.MEH]: <IconMeh color={vitalStateColors[VitalState.MEH]} />,
+  [VitalState.GOOD]: <IconHappy color={vitalStateColors[VitalState.GOOD]} />,
 };
 
 export function vitalDetailRouteWithQuery({