Merge pull request #1196 from AtCoder-NoviSteps/#1195

🎨 Update external link icon (#1195)

Author: KATO-Hiro

src/lib/components/ExternalLinkIcon.svelte

@@ -1,6 +1,10 @@
+<script lang="ts">
+  export let size = 'w-6 h-6';
+</script>
+
 <!-- See: https://flowbite.com/icons/ -->
 <svg
-  class="w-6 h-6 text-gray-800 dark:text-white"
+  class="{size} text-primary-600 dark:text-gray-300"
   aria-hidden="true"
   xmlns="http://www.w3.org/2000/svg"
   fill="none"

src/lib/components/ExternalLinkWrapper.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import ExternalLinkIcon from '$lib/components/ExternalLinkIcon.svelte';
+
   export let url: string;
   export let description: string;
   export let textSize: string = '';
@@ -7,21 +9,21 @@
 
 <a
   href={url}
-  class="font-medium {textSize} text-primary-600 hover:underline {textColorInDarkMode}"
+  class="inline-flex items-center font-medium {textSize} text-primary-600 hover:underline {textColorInDarkMode}"
   target="_blank"
   rel="noreferrer"
 >
   {description}
+
+  <div class="ml-1.5">
+    <ExternalLinkIcon size="w-4 h-4" />
+  </div>
 </a>
 
 <!-- See: -->
 <!-- https://github.com/fastapi/fastapi/blob/master/docs/en/docs/css/custom.css -->
 <style>
   a::after {
-    /* \00A0 is a non-breaking space
-        to make the mark be on the same line as the link
-    */
-    content: '\00A0[↪]';
     font-family: Roboto, Arial, sans-serif;
     position: relative;
     top: -0.1em;