update chevron svg

.vs/ProjectSettings.json

@@ -0,0 +1,3 @@
+{
+  "CurrentProjectSetting": "5upConfig"
+}

.vs/VSWorkspaceState.json

@@ -0,0 +1,6 @@
+{
+  "ExpandedNodes": [
+    ""
+  ],
+  "PreviewInSolutionExplorer": false
+}

packages/components/ContextualMenu/assets/chevron.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 2048 2048">
+    <path fill='currentColor' d='M 743 1767 l -121 -121 l 708 -707 l -708 -708 l 121 -121 l 828 829 z' />
+</svg>

packages/components/ContextualMenu/metro.config.js

@@ -0,0 +1,17 @@
+module.exports = require('@fluentui-react-native/scripts/metro.config');
+const { getDefaultConfig } = require('metro-config');
+
+module.exports = (async () => {
+  const {
+    resolver: { sourceExts, assetExts },
+  } = await getDefaultConfig();
+  return {
+    transformer: {
+      babelTransformerPath: require.resolve('react-native-svg-transformer'),
+    },
+    resolver: {
+      assetExts: assetExts.filter(ext => ext !== 'svg'),
+      sourceExts: [...sourceExts, 'svg'],
+    },
+  };
+})();

packages/components/ContextualMenu/package.json

@@ -45,7 +45,8 @@
     "@fluentui-react-native/pressable": ">=0.8.37 <1.0.0",
     "@fluentui-react-native/scripts": "^0.1.1",
     "@types/react-native": "^0.64.0",
-    "react-native": "^0.64.3"
+    "react-native": "^0.64.3",
+    "react-native-svg-transformer": "^1.0.0"
   },
   "peerDependencies": {
     "react": ">=17.0.1",

packages/components/ContextualMenu/src/@types/ContextualMenu/index.d.ts

@@ -0,0 +1,5 @@
+declare module '*.svg' {
+  import { SvgProps } from 'react-native-svg';
+  const content: React.FC<SvgProps>;
+  export default content;
+}

packages/components/ContextualMenu/src/SubmenuItem.tsx

@@ -16,10 +16,10 @@ import { settings } from './SubmenuItem.settings';
 import { backgroundColorTokens, borderTokens, textTokens, foregroundColorTokens, getPaletteFromTheme } from '@fluentui-react-native/tokens';
 import { mergeSettings } from '@uifabricshared/foundation-settings';
 import { useAsPressable, useKeyDownProps, useViewCommandFocus } from '@fluentui-react-native/interactive-hooks';
-import { SvgXml } from 'react-native-svg';
 import { CMContext } from './ContextualMenu';
-import { Icon } from '@fluentui-react-native/icon';
+import { Icon, SvgIconProps } from '@fluentui-react-native/icon';
 import { createIconProps } from '@fluentui-react-native/interactive-hooks';
+import chevronSvg from '../assets/chevron.svg';
 
 export const SubmenuItem = compose<SubmenuItemType>({
   displayName: submenuItemName,
@@ -119,6 +119,13 @@ export const SubmenuItem = compose<SubmenuItemType>({
       [onItemHoverIn],
     );
 
+    const svgProps: SvgIconProps = {
+      src: chevronSvg,
+      viewBox: '0 0 2048 2048',
+    };
+
+    const rtlTransform = I18nManager.isRTL ? [{ translateX: 2048 }, { scaleX: -1 }] : [];
+
     /**
      * SubmenuItem launches the submenu onMouseEnter event. Submenu should be launched with Spacebar, Enter, or right arrow (flipped for RTL).
      * Explicitly override onKeyDown to override the native windows behavior of moving focus with arrow keys.
@@ -143,21 +150,13 @@ export const SubmenuItem = compose<SubmenuItemType>({
       },
       content: { children: text },
       icon: createIconProps(icon),
-      chevron: {},
+      chevron: createIconProps({ svgSource: svgProps, width: 12, height: 12, style: { transform: rtlTransform } }),
     });
 
     return { slotProps, state };
   },
   settings,
   render: (Slots: ISlots<SubmenuItemSlotProps>, renderData: SubmenuItemRenderData, ...children: React.ReactNode[]) => {
-    const rtlTransfrom = I18nManager.isRTL ? 'translate(2048, 0) scale(-1, 1)' : '';
-    const xml = `
-    <svg width="12" height="12" viewBox="0 0 2048 2048">
-      <g transform="${rtlTransfrom}">
-        <path class='OfficeIconColors_HighContrast' fill='currentColor' d='M 743 1767 l -121 -121 l 708 -707 l -708 -708 l 121 -121 l 828 829 z' />
-        <path class='OfficeIconColors_m22'          fill='currentColor' d='M 743 1767 l -121 -121 l 708 -707 l -708 -708 l 121 -121 l 828 829 z' />
-      </g>
-    </svg>`;
     // We shouldn't have to specify the source prop on Slots.icon, here, but we need another drop from @uifabricshared
     return (
       <Slots.root>
@@ -167,7 +166,7 @@ export const SubmenuItem = compose<SubmenuItemType>({
           {children}
         </Slots.startstack>
         <Slots.endstack>
-          <Slots.chevron xml={xml} />
+          <Slots.chevron />
         </Slots.endstack>
       </Slots.root>
     );
@@ -178,7 +177,7 @@ export const SubmenuItem = compose<SubmenuItemType>({
     icon: Icon as React.ComponentType,
     content: Text,
     endstack: View,
-    chevron: SvgXml,
+    chevron: Icon as React.ComponentType,
   },
   styles: {
     root: [backgroundColorTokens, borderTokens],

packages/components/ContextualMenu/src/SubmenuItem.types.ts

@@ -4,7 +4,6 @@ import { IRenderData } from '@uifabricshared/foundation-composable';
 import { ITextProps } from '@fluentui-react-native/text';
 import { ContextualMenuItemProps, ContextualMenuItemTokens, ContextualMenuItemState } from './ContextualMenuItem.types';
 import { IconProps } from '@fluentui-react-native/icon';
-import { XmlProps } from 'react-native-svg';
 
 export const submenuItemName = 'SubmenuItem';
 export interface SubmenuItemTokens extends ContextualMenuItemTokens {
@@ -20,7 +19,7 @@ export interface SubmenuItemSlotProps {
   icon: IconProps;
   content: ITextProps;
   endstack: IViewProps;
-  chevron: XmlProps;
+  chevron: IconProps;
 }
 
 export type SubmenuItemRenderData = IRenderData<SubmenuItemSlotProps, SubmenuItemState>;