Fix simple icons color fill

package.json

@@ -29,6 +29,7 @@
     "remedial": "^1.0.8",
     "rsup-progress": "^2.0.4",
     "serve-static": "^1.14.1",
+    "simple-icons": "^5.12.0",
     "v-jsoneditor": "^1.4.2",
     "v-tooltip": "^2.1.3",
     "vue": "^2.6.10",

src/components/LinkItems/ItemIcon.vue

@@ -7,8 +7,9 @@
     <!-- Material Design Icon -->
     <span v-else-if="iconType === 'mdi'"  :class=" `mdi ${icon} ${size}`"></span>
     <!-- Simple-Icons -->
-    <object v-else-if="iconType === 'si'" :class="`simple-icons ${size}`"
-      type="image/svg+xml" :data="getSimpleIcon(icon)"></object>
+    <svg v-else-if="iconType === 'si'" :class="`simple-icons ${size}`" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+      <path :d="getSimpleIcon(icon)" />
+    </svg>
     <!-- Standard image asset icon -->
     <img v-else-if="icon" :src="iconPath" @error="imageNotFound"
       :class="`tile-icon ${size} ${broken ? 'broken' : ''}`"
@@ -25,6 +26,8 @@ import { faviconApi as defaultFaviconApi, faviconApiEndpoints, iconCdns } from '
 import EmojiUnicodeRegex from '@/utils/EmojiUnicodeRegex';
 import emojiLookup from '@/utils/emojis.json';
 
+const simpleIcons = require('simple-icons');
+
 export default {
   name: 'Icon',
   inject: ['config'],
@@ -113,10 +116,11 @@ export default {
     getGenerativeIcon(url) {
       return `${iconCdns.generative}/${this.getHostName(url)}.svg`;
     },
-    /* Formats the URL for getting Simple-Icons SVG asset */
+    /* Returns the SVG path content  */
     getSimpleIcon(img) {
       const imageName = img.replace('si-', '');
-      return `${iconCdns.si}/${imageName}.svg`;
+      const icon = simpleIcons.Get(imageName);
+      return icon.path;
     },
     /* Checks if the icon is from a local image, remote URL, SVG or font-awesome */
     getIconPath(img, url) {
@@ -198,11 +202,15 @@ export default {
     }
   }
   /* Simple Icons */
-  object.simple-icons {
+  .item-icon .simple-icons {
     width: 2rem;
     &.small { width: 1.5rem; }
     &.large { width: 2.5rem; }
   }
+
+  .item-icon .simple-icons path {
+    fill: currentColor;
+  }
   /* Emoji Icons */
   i.emoji-icon {
     font-style: normal;

yarn.lock

@@ -8667,6 +8667,11 @@ signal-exit@^3.0.0, signal-exit@^3.0.2:
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
   integrity sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==
 
+simple-icons@^5.12.0:
+  version "5.12.0"
+  resolved "https://registry.yarnpkg.com/simple-icons/-/simple-icons-5.12.0.tgz#8f514005f1aef02464a014706cc8e5b07d4d72c8"
+  integrity sha512-iF5ZJuv/jPU2tdkc5aNXsirQg2kOggvcOUw2kMafCrelrr3Sj0ywRJkr+0uVniD1Kj6ayT1yb1IquBRHrYw10g==
+
 simple-swizzle@^0.2.2:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"