fix: WEB-497 Revise external link arrow (#6130)

* Reformulate external link icon

* Cleanup mdxcomponent for external link

src/theme/MDXComponents.tsx

@@ -13,6 +13,7 @@ import CollapseBox from "@site/src/components/collapsible";
 import TopSection from "@site/src/components/topSection";
 import { useLocation } from "@docusaurus/router";
 import styles from "./styles.module.scss";
+import clsx from "clsx";
 
 // TODO: do we want to fix this?
 const TopBlock: React.FC<React.PropsWithChildren> = ({
@@ -119,20 +120,8 @@ const StyledLink: React.FC<React.PropsWithChildren<ComponentProps<"a">>> = ({
     return <Link {...props}>{children}</Link>;
   else
     return (
-      <a {...props} target="_blank" rel="openeer noreferrer">
+      <a {...props} target="_blank" rel="openeer noreferrer" className={clsx(props.className, styles.externalLink)}>
         {children}
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="16"
-          height="16"
-          viewBox="0 0 12 12"
-          style={{ paddingLeft: `3px` }}
-        >
-          <path
-            fill="currentColor"
-            d="M6 1h5v5L8.86 3.85 4.7 8 4 7.3l4.15-4.16zM2 3h2v1H2v6h6V8h1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1"
-          />
-        </svg>
       </a>
     );
 };

src/theme/styles.module.scss

@@ -41,3 +41,20 @@
     }
   }
 }
+
+.img {
+  max-width: 700px !important;
+  margin-left: auto !important;
+  margin-right: auto !important;
+  height: auto;
+  display: block;
+}
+
+.externalLink {
+  position: relative;
+  background-position: center right;
+  background-repeat: no-repeat;
+  background-size: 0.857em;
+  padding-right: 1em;
+  background-image: url("/icons/external-link.svg");
+}