Add using a file as a scheme icon

client/src/modules/contentmanager.js

@@ -225,6 +225,10 @@ export default class {
                 setting.setContentPath(contentPath);
             }
 
+            for (let scheme of userConfig.config.schemes) {
+                scheme.setContentPath(contentPath);
+            }
+
             Utils.deepfreeze(defaultConfig, object => object instanceof Combokeys);
 
             const configs = {

client/src/structs/settings/settingsscheme.js

@@ -32,6 +32,21 @@ export default class SettingsScheme {
         return this.args.icon_url;
     }
 
+    /**
+     * The path of the scheme's icon relative to the content path.
+     */
+    get icon_path() {
+        return this.args.icon_path;
+    }
+
+    /**
+     * The MIME type of the scheme's icon.
+     * This is only needed when using `icon_path` and the MIME type cannot be determined from the file contents. (Usually when using an SVG.)
+     */
+    get icon_type() {
+        return this.args.icon_type;
+    }
+
     /**
      * The scheme's name.
      */
@@ -53,6 +68,14 @@ export default class SettingsScheme {
         return this.args.settings || [];
     }
 
+    /**
+     * The path of the plugin/theme this scheme is part of.
+     * Use scheme.setContentPath to change.
+     */
+    get path() {
+        return this.args.path;
+    }
+
     /**
      * Checks if this scheme's values are currently applied to a set.
      * @param {SettingsSet} set The set to check
@@ -89,4 +112,12 @@ export default class SettingsScheme {
         return set.merge(this);
     }
 
+    /**
+     * Sets the path of the plugin/theme this setting is part of.
+     * @param {String} contentPath The plugin/theme's directory path
+     */
+    setContentPath(contentPath) {
+        this.args.path = contentPath;
+    }
+
 }

client/src/ui/components/bd/SettingsPanel.vue

@@ -12,13 +12,7 @@
     <div class="bd-settings-panel">
         <div class="bd-settings-schemes" v-if="schemes && schemes.length">
             <div class="bd-settings-schemes-container">
-                <template v-for="scheme in schemes">
-                    <div class="bd-settings-scheme" :class="{'bd-active': scheme.isActive(settings)}" @click="() => scheme.applyTo(settings)">
-                        <div class="bd-settings-scheme-icon" :style="{'background-image': `url(&quot;${scheme.icon_url}&quot;)`}"></div>
-                        <div class="bd-settings-scheme-name" v-if="scheme.name">{{ scheme.name }}</div>
-                        <div class="bd-settings-scheme-hint" v-if="scheme.hint">{{ scheme.hint }}</div>
-                    </div>
-                </template>
+                <SettingsScheme v-for="scheme in schemes" :key="scheme.id" :scheme="scheme" :is-active="scheme.isActive(settings)" @apply="scheme.applyTo(settings)" />
             </div>
         </div>
 
@@ -49,12 +43,14 @@
 <script>
     // Imports
     import { Utils } from 'common';
+    import SettingsScheme from './SettingsScheme.vue';
     import Setting from './setting/Setting.vue';
     import Drawer from '../common/Drawer.vue';
 
     export default {
         props: ['settings', 'schemes'],
         components: {
+            SettingsScheme,
             Setting,
             Drawer
         }

client/src/ui/components/bd/SettingsScheme.vue

@@ -0,0 +1,47 @@
+/**
+ * BetterDiscord Settings Scheme Component
+ * Copyright (c) 2015-present Jiiks/JsSucks - https://github.com/Jiiks / https://github.com/JsSucks
+ * All rights reserved.
+ * https://betterdiscord.net
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+*/
+
+<template>
+    <div class="bd-settings-scheme" :class="{'bd-active': isActive}" @click="$emit('apply')">
+        <div class="bd-settings-scheme-icon" :style="{'background-image': iconURL}"></div>
+        <div class="bd-settings-scheme-name" v-if="scheme.name">{{ scheme.name }}</div>
+        <div class="bd-settings-scheme-hint" v-if="scheme.hint">{{ scheme.hint }}</div>
+    </div>
+</template>
+
+<script>
+    import { FileUtils, ClientLogger as Logger } from 'common';
+    import path from 'path';
+
+    export default {
+        props: ['scheme', 'is-active'],
+        data() {
+            return {
+                iconURL: undefined
+            };
+        },
+        methods: {
+            async getIconURLFromPath() {
+                if (!this.scheme.icon_path) return;
+
+                try {
+                    const iconPath = path.join(this.scheme.path, this.scheme.icon_path);
+                    const iconURL = await FileUtils.toDataURI(iconPath, this.scheme.icon_type);
+                    return `url(${iconURL})`;
+                } catch (err) {
+                    Logger.err('SettingsScheme', ['Invalid icon URL', this.scheme, err]);
+                }
+            }
+        },
+        async created() {
+            this.iconURL = this.scheme.icon_url || await this.getIconURLFromPath();
+        }
+    }
+</script>

common/modules/utils.js

@@ -385,7 +385,7 @@ export class FileUtils {
      */
     static async toDataURI(buffer, type) {
         if (typeof buffer === 'string') buffer = await this.readFileBuffer(buffer);
-        if (!type) type = this.getFileType(buffer).mime;
+        if (!type) type = (await this.getFileType(buffer)).mime;
         return `data:${type};base64,${buffer.toString('base64')}`;
     }
 }