svg til egen fil

Author: bdahle

src/components/_common/page-navigation-menu-v2/ArrowRightAngle.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+const ArrowRightAngle: React.FC = () => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="16"
+        fill="none"
+        viewBox="0 0 24 24"
+        focusable="false"
+        aria-hidden="true"
+    >
+        <g
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            stroke="currentColor"
+            transform="translate(-2 7)"
+        >
+            <path d="M4.5 5v6c0 1.1.9 2 2 2H19" />
+            <path d="M14.5 8.5 19 13l-4.5 4.5" />
+        </g>
+    </svg>
+);
+
+export default ArrowRightAngle;

src/components/_common/page-navigation-menu-v2/PageNavigationMenuV2.module.scss

@@ -9,8 +9,3 @@
 .list {
     @include common.unstyled-list();
 }
-
-.icon {
-    width: 1rem;
-    height: 1rem;
-}

src/components/_common/page-navigation-menu-v2/PageNavigationMenuV2.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import ArrowRightAngle from './ArrowRightAngle';
 import { LenkeBase } from '../lenke/LenkeBase';
 import { AnchorLink } from 'components/parts/page-navigation-menu/PageNavigationMenuPart';
 import { Heading } from '@navikt/ds-react';
@@ -38,26 +39,7 @@ export const PageNavigationMenuV2 = ({ anchorLinks = [] }: Props) => {
                             // )}
                             // id={linkId}
                         >
-                            <svg
-                                xmlns="http://www.w3.org/2000/svg"
-                                width="16"
-                                height="16"
-                                fill="none"
-                                viewBox="0 0 24 24"
-                                focusable="false"
-                                aria-hidden="true"
-                            >
-                                <g
-                                    stroke-linecap="round"
-                                    stroke-linejoin="round"
-                                    stroke-width="2"
-                                    stroke="currentColor"
-                                    transform="translate(-2 7)"
-                                >
-                                    <path d="M4.5 5v6c0 1.1.9 2 2 2H19" />
-                                    <path d="M14.5 8.5 19 13l-4.5 4.5" />
-                                </g>
-                            </svg>
+                            <ArrowRightAngle />
                             {anchorLink.linkText}
                         </LenkeBase>
                     </li>