set up new icon and logos in UI

src/index.ts

@@ -86,7 +86,7 @@ export default class IronVaultPlugin extends Plugin {
     await this.loadSettings();
     addIcon(
       "iron-vault",
-      `<g fill="currentColor" transform="matrix(6.6666667,0,0,6.2533639,-3.3333334,-0.02691142)"><path d="m 11.28,5.72 a 0.75,0.75 0 0 1 0,1.06 l -4,4 a 0.75,0.75 0 0 1 -1.06,0 l -2,-2 A 0.75,0.75 0 0 1 5.28,7.72 l 1.47,1.47 3.47,-3.47 a 0.75,0.75 0 0 1 1.06,0 z" id="path1" /><path fill-rule="evenodd" d="m 6.834,0.33 a 2.25,2.25 0 0 1 2.332,0 l 5.25,3.182 A 2.25,2.25 0 0 1 15.5,5.436 v 5.128 a 2.25,2.25 0 0 1 -1.084,1.924 l -5.25,3.182 a 2.25,2.25 0 0 1 -2.332,0 L 1.584,12.488 A 2.25,2.25 0 0 1 0.5,10.564 V 5.436 A 2.25,2.25 0 0 1 1.584,3.512 Z m 1.555,1.283 a 0.75,0.75 0 0 0 -0.778,0 L 2.361,4.794 A 0.75,0.75 0 0 0 2,5.436 v 5.128 a 0.75,0.75 0 0 0 0.361,0.642 l 5.25,3.181 a 0.75,0.75 0 0 0 0.778,0 l 5.25,-3.181 A 0.75,0.75 0 0 0 14,10.564 V 5.436 A 0.75,0.75 0 0 0 13.639,4.794 Z" clip-rule="evenodd" /></g>`,
+      `<g fill="none" stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M 79.632,55.687986 H 92.303999" /><path d="m 7.824,89.479986 h 8.448 a 4.224,4.224 0 0 0 4.224,-4.224 V 38.791987 a 29.568,29.568 0 0 1 59.136,0 v 46.463999 a 4.224,4.224 0 0 0 4.224,4.224 h 8.447999" /><path d="M 20.496,55.687986 H 7.824" /><path d="M 37.392,47.239986 50.064,34.567987 62.736,47.239986 v 16.896 l -12.672,12.672 -12.672,-12.672 z" /></g>`,
     );
     this.datastore = this.addChild(new Datastore(this));
     this.initializeIndexManager();

src/settings/ui.ts

@@ -2,6 +2,24 @@ import IronVaultPlugin from "index";
 import { PluginSettingTab, Setting, type App } from "obsidian";
 import { IronVaultPluginSettings } from "settings";
 import { FolderTextSuggest } from "utils/ui/settings/folder";
+import ironswornLogoBin from "../../media/ironvault_logo_ironsworn.png";
+import delveLogoBin from "../../media/ironvault_logo_delve.png";
+import starforgedLogoBin from "../../media/ironvault_logo_starforged.png";
+import sunderedIslesLogoBin from "../../media/ironvault_logo_sunderedisles.png";
+
+function bytesToPngDataURI(bytes: Uint8Array) {
+  const binString = Array.from(bytes, (byte) =>
+    String.fromCodePoint(byte),
+  ).join("");
+  return "data:image/png;base64," + btoa(binString);
+}
+
+const IS_LOGO = bytesToPngDataURI(ironswornLogoBin as unknown as Uint8Array);
+const DELVE_LOGO = bytesToPngDataURI(delveLogoBin as unknown as Uint8Array);
+const SF_LOGO = bytesToPngDataURI(starforgedLogoBin as unknown as Uint8Array);
+const SI_LOGO = bytesToPngDataURI(
+  sunderedIslesLogoBin as unknown as Uint8Array,
+);
 
 export class IronVaultSettingTab extends PluginSettingTab {
   plugin: IronVaultPlugin;
@@ -61,7 +79,7 @@ export class IronVaultSettingTab extends PluginSettingTab {
 
     new Setting(containerEl).setName("Rulesets").setHeading();
 
-    new Setting(containerEl)
+    const isSetting = new Setting(containerEl)
       .setName("Enable Ironsworn ruleset")
       .setDesc(
         "If enabled, Ironsworn Core oracles, assets, truths, and moves will be available for play.",
@@ -71,8 +89,12 @@ export class IronVaultSettingTab extends PluginSettingTab {
           .setValue(settings.enableIronsworn)
           .onChange((value) => this.updateSetting("enableIronsworn", value));
       });
+    const isImg = document.createElement("img");
+    isImg.src = IS_LOGO;
+    isImg.toggleClass("ruleset-img", true);
+    isSetting.settingEl.prepend(isImg);
 
-    new Setting(containerEl)
+    const delveSetting = new Setting(containerEl)
       .setName("Enable Delve expansion for Ironsworn")
       .setDesc(
         "(experimental) If enabled, Ironsworn: Delve Core oracles, assets, and moves will be available for play.",
@@ -84,8 +106,12 @@ export class IronVaultSettingTab extends PluginSettingTab {
             this.updateSetting("enableIronswornDelve", value),
           );
       });
+    const delveImg = document.createElement("img");
+    delveImg.src = DELVE_LOGO;
+    delveImg.toggleClass("ruleset-img", true);
+    delveSetting.settingEl.prepend(delveImg);
 
-    new Setting(containerEl)
+    const sfSetting = new Setting(containerEl)
       .setName("Enable Starforged ruleset")
       .setDesc(
         "If enabled, Ironsworn: Starforged oracles, assets, truths, and moves will be available for play.",
@@ -95,8 +121,12 @@ export class IronVaultSettingTab extends PluginSettingTab {
           .setValue(settings.enableStarforged)
           .onChange((value) => this.updateSetting("enableStarforged", value));
       });
+    const sfImg = document.createElement("img");
+    sfImg.src = SF_LOGO;
+    sfImg.toggleClass("ruleset-img", true);
+    sfSetting.settingEl.prepend(sfImg);
 
-    new Setting(containerEl)
+    const siSetting = new Setting(containerEl)
       .setName("Enable Sundered Isles expansion for Starforged")
       .setDesc(
         "(experimental) If enabled, Sundered Isles oracles, assets, and moves will be available for play. Sundered Isles data is considered in preview, pending finalization of the rulebook.",
@@ -108,6 +138,10 @@ export class IronVaultSettingTab extends PluginSettingTab {
             this.updateSetting("enableSunderedIsles", value),
           );
       });
+    const siImg = document.createElement("img");
+    siImg.src = SI_LOGO;
+    siImg.toggleClass("ruleset-img", true);
+    siSetting.settingEl.prepend(siImg);
 
     new Setting(containerEl).setName("Homebrew").setHeading();
 

src/styles.css

@@ -39,8 +39,9 @@
   }
 }
 
-.internal-embed[alt~=iv-embed] {
-  & .markdown-embed-title, & .markdown-embed-link {
+.internal-embed[alt~="iv-embed"] {
+  & .markdown-embed-title,
+  & .markdown-embed-link {
     display: none;
   }
   & .markdown-preview-view {
@@ -53,6 +54,12 @@
   }
 }
 
+.ruleset-img {
+  height: 3.5em;
+  width: 3.5em;
+  padding: 0.2em 0;
+}
+
 #iron-vault-dice-box {
   position: fixed;
   top: 0;