okseby/orchard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix for svg-icon size, added :classes property

Browse source
This commit is contained in:
booploops 2022-06-28 15:08:00 -07:00
parent b5cd6e3228
commit 60f34e91d6
3 changed files with 21 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/renderer/less/helpers.less
View file

@ -509,10 +509,16 @@
._svg-icon {
--icon: url("./assets/chevron-left.svg");
width: 1em;
height: 1em;
--size: 1em;
width: var(--size);
height: var(--size);
-webkit-mask-image: var(--icon);
-webkit-mask-position: center;
background: white;
-webkit-mask-size: contain;
background: rgb(255 255 255 / 76%);
-webkit-mask-repeat: no-repeat;
&.md {
--size: 1.2em;
}
}

6
src/renderer/main/components/svg-icon.js
View file

@ -1,12 +1,16 @@
export const svgIcon = Vue.component("svg-icon", {
template: `
<div class="_svg-icon" :svg-name="name" :style="{'--icon': 'url(' + url + ')'}"></div>
<div class="_svg-icon" :class="classes" :svg-name="name" :style="{'--icon': 'url(' + url + ')'}"></div>
`,
props: {
name: {
type: String,
required: false
},
classes: {
type: String,
required: false
},
url: {
type: String,
required: true,

14
src/renderer/views/components/settings-window.ejs
View file

@ -6,7 +6,7 @@
<b-tabs class="no-style" pills vertical content-class="mt-3" v-model="$store.state.pageState['settings'].currentTabIndex">
<b-tab>
<template #title>
<div><svg-icon url="./assets/settings.svg" name="settings-general" /></div>
<div><svg-icon url="./assets/settings.svg" classes="md" name="settings-general" /></div>
<div>
{{ $root.getLz('settings.header.general') }}
</div>
@ -234,7 +234,7 @@
</b-tab>
<b-tab>
<template #title>
<div><svg-icon url="./assets/feather/headphones.svg" name="settings-audio" /></div>
<div><svg-icon url="./assets/feather/headphones.svg" classes="md" name="settings-audio" /></div>
<div>
{{ $root.getLz('settings.header.audio') }}
</div>
@ -372,7 +372,7 @@
</b-tab>
<b-tab v-if="app.cfg.advanced.AudioContext">
<template #title>
<div><svg-icon url="./assets/feather/zap.svg" name="settings-audiolabs" /></div>
<div><svg-icon url="./assets/feather/zap.svg" classes="md" name="settings-audiolabs" /></div>
<div>
{{ $root.getLz('settings.option.audio.audioLab') }}
</div>
@ -383,7 +383,7 @@
</b-tab>
<b-tab>
<template #title>
<div><svg-icon url="./assets/feather/pen-tool.svg" name="settings-visual" /></div>
<div><svg-icon url="./assets/feather/pen-tool.svg" classes="md" name="settings-visual" /></div>
<div>
{{ $root.getLz('settings.header.visual') }}
</div>
@ -624,7 +624,7 @@
</b-tab>
<b-tab>
<template #title>
<div><svg-icon url="./assets/feather/mic.svg" name="settings-lyrics" /></div>
<div><svg-icon url="./assets/feather/mic.svg" classes="md" name="settings-lyrics" /></div>
<div>
{{ $root.getLz('settings.header.lyrics') }}
</div>
@ -963,7 +963,7 @@
</b-tab>
<b-tab>
<template #title>
<div><svg-icon url="./assets/feather/radio.svg" name="settings-connectivity" /></div>
<div><svg-icon url="./assets/feather/radio.svg" classes="md" name="settings-connectivity" /></div>
<div>
{{ $root.getLz('settings.header.connectivity') }}
</div>
@ -1143,7 +1143,7 @@
</b-tab>
<b-tab>
<template #title>
<div><svg-icon url="./assets/feather/hard-drive.svg" name="settings-advanced" /></div>
<div><svg-icon url="./assets/feather/hard-drive.svg" classes="md" name="settings-advanced" /></div>
<div>
{{$root.getLz('settings.header.advanced')}}
</div>