fix: 🐛 fix not inheritated color for svgs

astro.config.mjs

@@ -21,6 +21,8 @@ import robotsTxt from "astro-robots-txt";
 // https://astro.build/config
 import webmanifest from "astro-webmanifest";
 
+import svgLoader from "vite-svg-loader";
+
 // https://astro.build/config
 export default defineConfig({
   site: "https://www.beekeeping-news.com/",
@@ -69,4 +71,7 @@ export default defineConfig({
       },
     }),
   ],
+  vite: {
+    plugins: [vue(), svgLoader()],
+  },
 });

src/components/AdsItem.vue

@@ -16,11 +16,7 @@
     <div class="text-lg font-bold">
       <a :href="item.attributes.link" target="_blank">
         {{ item.attributes.title }}
-        <img
-          src="/link-arrow.svg"
-          class="w-4 inline-flex mb-1"
-          alt="Left up arrow inside a box, indicating outgoing link"
-        />
+        <IconLinkArrow />
       </a>
     </div>
     {{ item.attributes.url }}
@@ -39,6 +35,7 @@
 <script setup lang="ts">
 import NewsBadge from "./NewsBadge.vue";
 import { t } from "i18next";
+import IconLinkArrow from "./IconLinkArrow.vue";
 
 defineProps({
   item: {

src/components/IconLinkArrow.vue

@@ -0,0 +1,20 @@
+<template>
+  <svg
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    x="0px"
+    y="0px"
+    viewBox="0 0 122.6 122.88"
+    fill="currentColor"
+    xml:space="preserve"
+    class="w-4 inline-flex mb-1"
+    alt="Left up arrow inside a box, indicating outgoing link"
+  >
+    <g>
+      <path
+        d="M110.6,72.58c0-3.19,2.59-5.78,5.78-5.78c3.19,0,5.78,2.59,5.78,5.78v33.19c0,4.71-1.92,8.99-5.02,12.09 c-3.1,3.1-7.38,5.02-12.09,5.02H17.11c-4.71,0-8.99-1.92-12.09-5.02c-3.1-3.1-5.02-7.38-5.02-12.09V17.19 C0,12.48,1.92,8.2,5.02,5.1C8.12,2,12.4,0.08,17.11,0.08h32.98c3.19,0,5.78,2.59,5.78,5.78c0,3.19-2.59,5.78-5.78,5.78H17.11 c-1.52,0-2.9,0.63-3.91,1.63c-1.01,1.01-1.63,2.39-1.63,3.91v88.58c0,1.52,0.63,2.9,1.63,3.91c1.01,1.01,2.39,1.63,3.91,1.63h87.95 c1.52,0,2.9-0.63,3.91-1.63s1.63-2.39,1.63-3.91V72.58L110.6,72.58z M112.42,17.46L54.01,76.6c-2.23,2.27-5.89,2.3-8.16,0.07 c-2.27-2.23-2.3-5.89-0.07-8.16l56.16-56.87H78.56c-3.19,0-5.78-2.59-5.78-5.78c0-3.19,2.59-5.78,5.78-5.78h26.5 c5.12,0,11.72-0.87,15.65,3.1c2.48,2.51,1.93,22.52,1.61,34.11c-0.08,3-0.15,5.29-0.15,6.93c0,3.19-2.59,5.78-5.78,5.78 c-3.19,0-5.78-2.59-5.78-5.78c0-0.31,0.08-3.32,0.19-7.24C110.96,30.94,111.93,22.94,112.42,17.46L112.42,17.46z"
+      />
+    </g>
+  </svg>
+</template>

src/components/NewsItem.vue

@@ -24,11 +24,7 @@
     <div class="text-lg font-bold">
       <a :href="item.attributes.link" target="_blank">
         {{ item.attributes.title }}
-        <img
-          src="/link-arrow.svg"
-          class="w-4 inline-flex mb-1"
-          alt="Left up arrow inside a box, indicating outgoing link"
-        />
+        <IconLinkArrow />
       </a>
     </div>
     {{ item.attributes.url }}
@@ -62,6 +58,7 @@
 
 <script setup lang="ts">
 import NewsBadge from "./NewsBadge.vue";
+import IconLinkArrow from "./IconLinkArrow.vue";
 import { useDateFormat } from "@vueuse/core";
 
 const props = defineProps({

src/components/Options.astro

@@ -47,7 +47,11 @@ import LanguageSwitcher from "./LanguageSwitcher.astro";
         href="https://github.com/HannesOberreiter/bee-news-astro"
         class="inline-flex"
       >
-        <img src="/github-mark.svg" class="w-5 mr-3" alt="GitHub Logo" />
+        <img
+          src="/github-mark.svg"
+          class="w-5 mr-3 dark:bg-white"
+          alt="GitHub Logo"
+        />
         /HannesOberreiter/bee-news-astro
       </a>
     </div>