docs: the LTR icon uses svg to better fit the dark theme (#42798)

* docs: the LTR icon uses svg to better fit the dark theme

* docs: new `DirectionIcon`

.dumi/theme/common/DirectionIcon.tsx

@@ -0,0 +1,18 @@
+import Icon from '@ant-design/icons';
+import type { DirectionType } from 'antd/es/config-provider';
+import React from 'react';
+
+const ltrD =
+  'M448 64l512 0 0 128-128 0 0 768-128 0 0-768-128 0 0 768-128 0 0-448c-123.712 0-224-100.288-224-224s100.288-224 224-224zM64 448l256 224-256 224z';
+const rtlD =
+  'M256 64l512 0 0 128-128 0 0 768-128 0 0-768-128 0 0 768-128 0 0-448c-123.712 0-224-100.288-224-224s100.288-224 224-224zM960 896l-256-224 256-224z';
+
+const DirectionIcon: React.FC<{ direction: DirectionType }> = (props) => (
+  <Icon {...props}>
+    <svg viewBox="0 0 1024 1024" fill="currentColor">
+      <path d={props.direction === 'ltr' ? ltrD : rtlD} />
+    </svg>
+  </Icon>
+);
+
+export default DirectionIcon;

.dumi/theme/slots/Header/index.tsx

@@ -7,15 +7,16 @@ import DumiSearchBar from 'dumi/theme-default/slots/SearchBar';
 import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import useLocale from '../../../hooks/useLocale';
 import useSiteToken from '../../../hooks/useSiteToken';
+import DirectionIcon from '../../common/DirectionIcon';
 import * as utils from '../../utils';
 import { getThemeConfig, ping } from '../../utils';
 import type { SiteContextProps } from '../SiteContext';
 import SiteContext from '../SiteContext';
-import type { SharedProps } from './interface';
 import Logo from './Logo';
 import More from './More';
 import Navigation from './Navigation';
 import SwitchBtn from './SwitchBtn';
+import type { SharedProps } from './interface';
 
 const RESPONSIVE_XS = 1120;
 const RESPONSIVE_SM = 1200;
@@ -95,6 +96,9 @@ const useStyle = () => {
         }
       }
     `,
+    dataDirectionIcon: css`
+      width: 16px;
+    `,
     popoverMenu: {
       width: 300,
 
@@ -311,19 +315,9 @@ const Header: React.FC = () => {
       key="direction"
       onClick={onDirectionChange}
       value={direction === 'rtl' ? 2 : 1}
-      label1={
-        <img
-          src="https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*6k0CTJA-HxUAAAAAAAAAAAAADrJ8AQ/original"
-          alt="direction"
-        />
-      }
+      label1={<DirectionIcon css={style.dataDirectionIcon} direction="ltr" />}
       tooltip1="LTR"
-      label2={
-        <img
-          src="https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*SZoaQqm2hwsAAAAAAAAAAAAADrJ8AQ/original"
-          alt="LTR"
-        />
-      }
+      label2={<DirectionIcon css={style.dataDirectionIcon} direction="rtl" />}
       tooltip2="RTL"
       pure
     />,