From 9de041f1d3c3d79bfee2c2a865c6eed3469bed13 Mon Sep 17 00:00:00 2001
From: Dan Gilbert <ddg@daentech.co.uk>
Date: Tue, 31 Aug 2021 12:33:18 +0200
Subject: [PATCH 1/2] Fix simple icons color fill
---
package.json | 1 +
src/components/LinkItems/ItemIcon.vue | 18 +++++++++++++-----
yarn.lock | 5 +++++
3 files changed, 19 insertions(+), 5 deletions(-)
diff --git a/package.json b/package.json
index a2449788..be8c0ee3 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/LinkItems/ItemIcon.vue b/src/components/LinkItems/ItemIcon.vue
index f2ee84ab..b55a51be 100644
--- a/src/components/LinkItems/ItemIcon.vue
+++ b/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;
diff --git a/yarn.lock b/yarn.lock
index aab35184..68013cda 100644
--- a/yarn.lock
+++ b/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"
From c9fc7e4bbdf8e1b554d03dd7ef94f4d57b709304 Mon Sep 17 00:00:00 2001
From: Dan Gilbert <ddg@daentech.co.uk>
Date: Tue, 31 Aug 2021 12:57:51 +0200
Subject: [PATCH 2/2] Fix import for simple-icons
---
src/components/LinkItems/ItemIcon.vue | 3 +--
1 file changed, 1 insertion(+), 2 deletions(-)
diff --git a/src/components/LinkItems/ItemIcon.vue b/src/components/LinkItems/ItemIcon.vue
index b55a51be..b4001824 100644
--- a/src/components/LinkItems/ItemIcon.vue
+++ b/src/components/LinkItems/ItemIcon.vue
@@ -20,14 +20,13 @@
</template>
<script>
+import simpleIcons from 'simple-icons';
import BrokenImage from '@/assets/interface-icons/broken-icon.svg';
import ErrorHandler from '@/utils/ErrorHandler';
import { faviconApi as defaultFaviconApi, faviconApiEndpoints, iconCdns } from '@/utils/defaults';
import EmojiUnicodeRegex from '@/utils/EmojiUnicodeRegex';
import emojiLookup from '@/utils/emojis.json';
-const simpleIcons = require('simple-icons');
-
export default {
name: 'Icon',
inject: ['config'],