Icon SlashForward Replacing Chevron in Breadcrumbs (#104120)

## Problem
Both in the Replay Details and Span Waterfall, we have this ability to
paginate to sibling events. However, the implementations are
inconsistent.

### Replay Details
<img width="2880" height="2042" alt="CleanShot 2025-11-28 at 14 04
39@2x"
src="https://github.com/user-attachments/assets/ff6a81ce-dda5-4db6-b775-a3183a957eaf"
/>

### Span Waterfall
<img width="2880" height="2042" alt="CleanShot 2025-11-28 at 14 06
48@2x"
src="https://github.com/user-attachments/assets/5fda7778-712d-4dfe-aa9b-e2c6a4f5fe2b"
/>

## Goal
This PR isn't about implementing the pagination UI consistently; rather,
it's about modifying the breadcrumbs UI so that we can reach that end
goal. Specifically, this PR swaps out the chevron icon for a forward
slash (new icon).

### Before
<img width="2352" height="277" alt="CleanShot 2025-11-28 at 13 58 09@2x"
src="https://github.com/user-attachments/assets/8e4c6638-7785-4060-b0a4-1ba978589989"
/>

### After
<img width="2351" height="278" alt="CleanShot 2025-11-28 at 13 58 37@2x"
src="https://github.com/user-attachments/assets/9ada7a5f-13a9-48dd-824e-e6fdb2fc01a1"
/>

## Solution
We're making this change because we want to reach an end goal where we
have this

### Ideal end state
<img width="1978" height="284" alt="CleanShot 2025-11-28 at 14 26 50@2x"
src="https://github.com/user-attachments/assets/b3026ca0-3b8d-4898-bf76-933cf74e80b6"
/>

### End state without this change
<img width="1976" height="286" alt="CleanShot 2025-11-28 at 14 27 33@2x"
src="https://github.com/user-attachments/assets/02d49a61-cae7-4db2-85ce-eb77cfedafbf"
/>

## Solution Explanation
In the realm of computing, the slash is frequently used to indicate a
file path.

Author: Jesse-Box

static/app/components/breadcrumbs.tsx

@@ -6,7 +6,7 @@ import {Text} from '@sentry/scraps/text';
 import type {LinkProps} from 'sentry/components/core/link';
 import {Link} from 'sentry/components/core/link';
 import GlobalSelectionLink from 'sentry/components/globalSelectionLink';
-import {IconChevron} from 'sentry/icons';
+import {IconSlashForward} from 'sentry/icons';
 import {trackAnalytics} from 'sentry/utils/analytics';
 
 export interface Crumb {
@@ -57,7 +57,7 @@ export function Breadcrumbs({crumbs, ...props}: BreadcrumbsProps) {
             />
             {index < crumbs.length - 1 ? (
               <Flex align="center" justify="center" flexShrink={0}>
-                <IconChevron size="xs" direction="right" color="subText" />
+                <IconSlashForward size="xs" color="subText" />
               </Flex>
             ) : null}
           </Fragment>

static/app/icons/iconSlashForward.tsx

@@ -0,0 +1,10 @@
+import type {SVGIconProps} from './svgIcon';
+import {SvgIcon} from './svgIcon';
+
+export function IconSlashForward(props: SVGIconProps) {
+  return (
+    <SvgIcon {...props}>
+      <path d="M9.544 1.496a.751.751 0 0 1 1.412.508l-4.5 12.5a.75.75 0 0 1-1.412-.508z" />
+    </SvgIcon>
+  );
+}

static/app/icons/icons.stories.tsx

@@ -644,6 +644,13 @@ const SECTIONS: TSection[] = [
           direction: 'down',
         },
       },
+      {
+        id: 'slashFoward',
+        groups: ['navigation'],
+        keywords: ['breadcrumbs', 'directory'],
+        name: 'SlashForward',
+        defaultProps: {},
+      },
     ],
   },
   {

static/app/icons/index.tsx

@@ -113,6 +113,7 @@ export {IconSentryPrideLogo} from './iconSentryPrideLogo';
 export {IconSettings} from './iconSettings';
 export {IconShow} from './iconShow';
 export {IconSiren} from './iconSiren';
+export {IconSlashForward} from './iconSlashForward';
 export {IconSliders} from './iconSliders';
 export {IconSort} from './iconSort';
 export {IconSound} from './iconSound';