Merge pull request #2222 from AtCoder-NoviSteps/#2221

🎨 Fix external link icon style (#2221)

Author: KATO-Hiro

src/lib/components/ExternalLinkIcon.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import ExternalLinkIcon from '$lib/components/ExternalLinkIcon.svelte';
+  import { ExternalLink } from 'lucide-svelte';
 
   interface Props {
     url: string;
@@ -18,7 +18,7 @@
     textSize = '',
     textColorInDarkMode = 'dark:text-primary-500',
     textOverflow = '',
-    iconSize = 4,
+    iconSize = 20,
     ariaLabel = '',
     useInlineFlex = true,
   }: Props = $props();
@@ -36,7 +36,7 @@
   </span>
 
   <span class="ml-1.5">
-    <ExternalLinkIcon size={`w-${iconSize} h-${iconSize}`} />
+    <ExternalLink class="text-primary-600 dark:text-gray-300" size={iconSize} aria-hidden="true" />
   </span>
 </a>
 

src/lib/components/ExternalLinkWrapper.svelte

@@ -2,9 +2,9 @@
   import { enhance } from '$app/forms';
 
   import { Breadcrumb, BreadcrumbItem, Img } from 'svelte-5-ui-lib';
+  import { ExternalLink } from 'lucide-svelte';
 
   import SubmissionStatusButton from '$lib/components/SubmissionStatusButton.svelte';
-  import ExternalLinkIcon from '$lib/components/ExternalLinkIcon.svelte';
 
   import { getBackgroundColorFrom } from '$lib/services/submission_status';
 
@@ -51,7 +51,7 @@
         <div class="mr-2">
           {taskResult.title}
         </div>
-        <ExternalLinkIcon />
+        <ExternalLink />
       </h5>
     </div>
   </a>