Fix simple icons color fill

This commit is contained in:
Dan Gilbert 2021-08-31 12:33:18 +02:00
parent f8b1334c22
commit 9de041f1d3
3 changed files with 19 additions and 5 deletions

View File

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

View File

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

View File

@ -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" resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
integrity sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA== 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: simple-swizzle@^0.2.2:
version "0.2.2" version "0.2.2"
resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a" resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"