Support kebab-case names for feather icons

web/editor_ui.tsx

@@ -248,8 +248,13 @@ export class MainUI {
               : [],
             ...viewState.settings.actionButtons.map((button) => {
               const parsedCommand = parseCommand(button.command);
+              let featherIcon =
+                (featherIcons as any)[kebabToCamel(button.icon)];
+              if (!featherIcon) {
+                featherIcon = featherIcons.HelpCircle;
+              }
               return {
-                icon: (featherIcons as any)[button.icon],
+                icon: featherIcon,
                 description: button.description || "",
                 callback: () => {
                   client.runCommandByName(
@@ -305,3 +310,10 @@ export class MainUI {
     preactRender(h(this.ViewComponent.bind(this), {}), container);
   }
 }
+
+function kebabToCamel(str: string) {
+  return str.replace(/-([a-z])/g, (g) => g[1].toUpperCase()).replace(
+    /^./,
+    (g) => g.toUpperCase(),
+  );
+}

website/SETTINGS.md

@@ -12,16 +12,16 @@ hideSyncButton: false
 
 # Configure the shown action buttons (top right bar)
 actionButtons: 
-- icon: Home # Capitalized version of an icon from https://feathericons.com
+- icon: home # Use any icon from https://feathericons.com
   command: "{[Navigate: Home]}"
   description: "Go to the index page"
-- icon: Activity
+- icon: activity
   description: "What's new"
   command: '{[Navigate: To Page]("CHANGELOG")}'
-- icon: Book
+- icon: book
   command: "{[Navigate: Page Picker]}"
   description: Open page
-- icon: Terminal
+- icon: terminal
   command: "{[Open Command Palette]}"
   description: Run command