Start baking material icons straight in

client/src/styles/partials/bdsettings/sidebarview.scss

@@ -64,20 +64,14 @@
             cursor: pointer;
 
             &:hover {
-                .material-design-icon {
+                .bd-material-design-icon {
                     fill: #FFF;
                 }
             }
         }
 
-        .material-design-icon {
+        .bd-material-design-icon {
             fill: #414245;
-
-            svg {
-                width: 16px;
-                height: 16px;
-            }
-
             &:hover {
                 fill: #FFF;
             }

client/src/ui/components/BdSettings.vue

@@ -20,10 +20,10 @@
                 <div class="bd-info">
                     <span class="bd-vtext">v2.0.0a by Jiiks/JsSucks</span>
                     <div @click="openGithub" v-tooltip="'Github'" class="bd-material-button">
-                        <MiGithub/>
+                        <MaterialIcon name="github-circle" size="16"/>
                     </div>
                     <div @click="openWebsite" v-tooltip="'BetterDiscord'" class="bd-material-button">
-                        <MiWeb/>
+                        <MaterialIcon name="web" size="16"/>
                      </div>
                 </div>
             </Sidebar>
@@ -53,7 +53,7 @@
     import { Settings } from 'modules';
     import { SidebarView, Sidebar, SidebarItem, ContentColumn } from './sidebar';
     import { CoreSettings, UISettings, EmoteSettings, CssEditorView, PluginsView } from './bd';
-    import { SvgX } from './common';
+    import { SvgX, MaterialIcon } from './common';
     import MiGithub from 'vue-material-design-icons/github-circle.vue';
     import MiWeb from 'vue-material-design-icons/web.vue';
 
@@ -88,9 +88,8 @@
         },
         components: {
             SidebarView, Sidebar, SidebarItem, ContentColumn,
-            CoreSettings, UISettings, EmoteSettings, CssEditorView, PluginsView,
+            CoreSettings, UISettings, EmoteSettings, CssEditorView, PluginsView, MaterialIcon,
-            SvgX,
+            SvgX
-            MiGithub, MiWeb
         },
         methods: {
             itemOnClick(id) {

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

@@ -25,16 +25,16 @@
                 <div class="bd-controls">
                     <ButtonGroup>
                         <Button v-tooltip="'Settings'" v-if="plugin.hasSettings" :onClick="() => showSettings(plugin)">
-                            <MiSettings />
+                            <MaterialIcon name="settings" size="18"/>
                         </Button>
                         <Button v-tooltip="'Reload'" :onClick="() => reloadPlugin(plugin)">
-                            <MiReload />
+                            <MaterialIcon name="refresh" size="18" />
                         </Button>
                         <Button v-tooltip="'Edit'" :onClick="editPlugin">
-                            <MiEdit />
+                            <MaterialIcon name="pencil" size="18" />
                         </Button>
                         <Button v-tooltip="'Uninstall'" type="err">
-                            <MiDelete />
+                            <MaterialIcon name="delete" size="18" />
                         </Button>
                     </ButtonGroup>
                 </div>
@@ -45,11 +45,7 @@
 <script>
     // Imports
     import { shell } from 'electron';
-    import { Button, ButtonGroup, SettingSwitch } from '../common';
+    import { Button, ButtonGroup, SettingSwitch, MaterialIcon } from '../common';
-    import MiSettings from 'vue-material-design-icons/settings.vue';
-    import MiReload from 'vue-material-design-icons/refresh.vue';
-    import MiEdit from 'vue-material-design-icons/pencil.vue';
-    import MiDelete from 'vue-material-design-icons/delete.vue';
 
     export default {
         data() {
@@ -59,8 +55,7 @@
         },
         props: ['plugin', 'togglePlugin', 'reloadPlugin', 'showSettings'],
         components: {
-            Button, ButtonGroup, SettingSwitch,
+            Button, ButtonGroup, SettingSwitch, MaterialIcon
-            MiSettings, MiReload, MiEdit, MiDelete
         },
         methods: {
             editPlugin() {

client/src/ui/components/common/MaterialIcon.vue

@@ -0,0 +1,30 @@
+<template>
+    <Settings v-if="name === 'settings'" :size="size"/>
+    <Refresh v-else-if="name === 'refresh'" :size="size" />
+    <Pencil v-else-if="name === 'pencil'" :size="size"/>
+    <Delete v-else-if="name === 'delete'" :size="size" />
+    <GithubCircle v-else-if="name === 'github-circle'" :size="size" />
+    <Web v-else-if="name === 'web'" :size="size" />
+    <span v-else></span>
+</template>
+<script>
+    // Imports
+    import Settings from './materialicons/Settings.vue';
+    import Refresh from './materialicons/Refresh.vue';
+    import Pencil from './materialicons/Pencil.vue';
+    import Delete from './materialicons/Delete.vue';
+    import GithubCircle from './materialicons/GithubCircle.vue';
+    import Web from './materialicons/Web.vue';
+
+    export default {
+        props: ['name', 'size'],
+        components: {
+            Settings,
+            Refresh,
+            Pencil,
+            Delete,
+            GithubCircle,
+            Web
+        }
+    }
+</script>

client/src/ui/components/common/index.js

@@ -5,3 +5,4 @@ export { default as ButtonGroup } from './ButtonGroup.vue';
 export { default as Button } from './Button.vue';
 export { default as Modal } from './Modal.vue';
 export { default as SvgX } from './SvgX.vue';
+export { default as MaterialIcon } from './MaterialIcon.vue';

client/src/ui/components/common/materialicons/Delete.vue

@@ -0,0 +1,27 @@
+/**
+ * BetterDiscord Material Design Icon
+ * 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.
+ *
+ * Material Design Icons 
+ * Copyright (c) 2014 Google
+ * Apache 2.0 LICENSE 
+ * https://www.apache.org/licenses/LICENSE-2.0.txt
+*/
+
+<template>
+    <span class="bd-material-design-icon">
+        <svg :width="size || 24" :height="size || 24" viewBox="0 0 24 24">
+            <path d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19C6,20.1 6.9,21 8,21H16C17.1,21 18,20.1 18,19V7H6V19Z"></path>
+        </svg>
+    </span>
+</template>
+<script>
+    export default {
+        props: ['size']
+    }
+</script>

client/src/ui/components/common/materialicons/GithubCircle.vue

@@ -0,0 +1,27 @@
+/**
+ * BetterDiscord Material Design Icon
+ * 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.
+ *
+ * Material Design Icons
+ * Copyright (c) 2014 Google
+ * Apache 2.0 LICENSE
+ * https://www.apache.org/licenses/LICENSE-2.0.txt
+*/
+
+<template>
+    <span class="bd-material-design-icon">
+        <svg :width="size || 24" :height="size || 24" viewBox="0 0 24 24">
+            <path d="M12,2C6.48,2 2,6.48 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12C22,6.48 17.52,2 12,2Z"></path>
+        </svg>
+    </span>
+</template>
+<script>
+    export default {
+        props: ['size']
+    }
+</script>

client/src/ui/components/common/materialicons/Pencil.vue

@@ -0,0 +1,27 @@
+/**
+ * BetterDiscord Material Design Icon
+ * 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.
+ *
+ * Material Design Icons
+ * Copyright (c) 2014 Google
+ * Apache 2.0 LICENSE
+ * https://www.apache.org/licenses/LICENSE-2.0.txt
+*/
+
+<template>
+    <span class="bd-material-design-icon">
+        <svg :width="size || 24" :height="size || 24" viewBox="0 0 24 24">
+            <path d="M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z"></path>
+        </svg>
+    </span>
+</template>
+<script>
+    export default {
+        props: ['size']
+    }
+</script>

client/src/ui/components/common/materialicons/Refresh.vue

@@ -0,0 +1,27 @@
+/**
+ * BetterDiscord Material Design Icon
+ * 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.
+ *
+ * Material Design Icons
+ * Copyright (c) 2014 Google
+ * Apache 2.0 LICENSE
+ * https://www.apache.org/licenses/LICENSE-2.0.txt
+*/
+
+<template>
+    <span class="bd-material-design-icon">
+        <svg :width="size || 24" :height="size || 24" viewBox="0 0 24 24">
+            <path d="M17.65,6.35C16.2,4.9 14.21,4 12,4C7.58,4 4,7.58 4,12C4,16.42 7.58,20 12,20C15.73,20 18.84,17.45 19.73,14H17.65C16.83,16.33 14.61,18 12,18C8.69,18 6,15.31 6,12C6,8.69 8.69,6 12,6C13.66,6 15.14,6.69 16.22,7.78L13,11H20V4L17.65,6.35Z"></path>
+        </svg>
+    </span>
+</template>
+<script>
+    export default {
+        props: ['size']
+    }
+</script>

client/src/ui/components/common/materialicons/Settings.vue

@@ -0,0 +1,27 @@
+/**
+ * BetterDiscord Material Design Icon
+ * 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.
+ *
+ * Material Design Icons
+ * Copyright (c) 2014 Google
+ * Apache 2.0 LICENSE
+ * https://www.apache.org/licenses/LICENSE-2.0.txt
+*/
+
+<template>
+    <span class="bd-material-design-icon">
+        <svg :width="size || 24" :height="size || 24" viewBox="0 0 24 24">
+            <path d="M12,15.5C10.07,15.5 8.5,13.93 8.5,12C8.5,10.07 10.07,8.5 12,8.5C13.93,8.5 15.5,10.07 15.5,12C15.5,13.93 13.93,15.5 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z"></path>
+        </svg>
+    </span>
+</template>
+<script>
+    export default {
+        props: ['size']
+    }
+</script>

client/src/ui/components/common/materialicons/Web.vue

@@ -0,0 +1,27 @@
+/**
+ * BetterDiscord Material Design Icon
+ * 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.
+ *
+ * Material Design Icons
+ * Copyright (c) 2014 Google
+ * Apache 2.0 LICENSE
+ * https://www.apache.org/licenses/LICENSE-2.0.txt
+*/
+
+<template>
+    <span class="bd-material-design-icon">
+        <svg :width="size || 24" :height="size || 24" viewBox="0 0 24 24">
+            <path d="M16.36,14C16.44,13.34 16.5,12.68 16.5,12C16.5,11.32 16.44,10.66 16.36,10H19.74C19.9,10.64 20,11.31 20,12C20,12.69 19.9,13.36 19.74,14M14.59,19.56C15.19,18.45 15.65,17.25 15.97,16H18.92C17.96,17.65 16.43,18.93 14.59,19.56M14.34,14H9.66C9.56,13.34 9.5,12.68 9.5,12C9.5,11.32 9.56,10.65 9.66,10H14.34C14.43,10.65 14.5,11.32 14.5,12C14.5,12.68 14.43,13.34 14.34,14M12,19.96C11.17,18.76 10.5,17.43 10.09,16H13.91C13.5,17.43 12.83,18.76 12,19.96M8,8H5.08C6.03,6.34 7.57,5.06 9.4,4.44C8.8,5.55 8.35,6.75 8,8M5.08,16H8C8.35,17.25 8.8,18.45 9.4,19.56C7.57,18.93 6.03,17.65 5.08,16M4.26,14C4.1,13.36 4,12.69 4,12C4,11.31 4.1,10.64 4.26,10H7.64C7.56,10.66 7.5,11.32 7.5,12C7.5,12.68 7.56,13.34 7.64,14M12,4.03C12.83,5.23 13.5,6.57 13.91,8H10.09C10.5,6.57 11.17,5.23 12,4.03M18.92,8H15.97C15.65,6.75 15.19,5.55 14.59,4.44C16.43,5.07 17.96,6.34 18.92,8M12,2C6.47,2 2,6.5 2,12C2,17.52 6.48,22 12,22C17.52,22 22,17.52 22,12C22,6.48 17.52,2 12,2Z"></path>
+        </svg>
+    </span>
+</template>
+<script>
+    export default {
+        props: ['size']
+    }
+</script>