Add support for Material Design Icons (#848)

* Add support for Material Design Icons

* Re-export selected material icons to reduce bundle size

import_map.json

@@ -37,6 +37,9 @@
     "porter-stemmer": "https://esm.sh/porter-stemmer@0.9.1",
     "preact-feather": "https://esm.sh/preact-feather@4.2.1?external=preact",
     "preact-feather/types": "https://esm.sh/preact-feather@4.2.1/dist/types?external=preact",
+    "react-icons/md":  "https://deno.land/x/react_icons_md@1.0.9/mod.ts",
+    "react-icons/md/":  "https://deno.land/x/react_icons_md@1.0.9/ico/",
+    "react-icons/types": "https://deno.land/x/react_icons@1.0.9/mod.ts",
     "s3_lite_client/": "https://deno.land/x/s3_lite_client@0.4.0/",
     "turndown": "https://cdn.skypack.dev/turndown@7.1.1",
     "turndown-plugin-gfm": "https://cdn.skypack.dev/@joplin/turndown-plugin-gfm@1.0.45",

web/components/top_bar.tsx

@@ -2,10 +2,11 @@ import { CompletionContext, CompletionResult } from "@codemirror/autocomplete";
 import type { ComponentChildren, FunctionalComponent } from "preact";
 import { Notification } from "$lib/web.ts";
 import { FeatherProps } from "preact-feather/types";
+import { IconBaseProps } from "react-icons/types";
 import { MiniEditor } from "./mini_editor.tsx";
 
 export type ActionButton = {
-  icon: FunctionalComponent<FeatherProps>;
+  icon: FunctionalComponent<FeatherProps | IconBaseProps>;
   description: string;
   class?: string;
   callback: () => void;

web/editor_ui.tsx

@@ -6,6 +6,7 @@ import { TopBar } from "./components/top_bar.tsx";
 import reducer from "./reducer.ts";
 import { Action, AppViewState, initialViewState } from "../type/web.ts";
 import * as featherIcons from "preact-feather";
+import * as mdi from "./filtered_material_icons.ts"
 import { h, render as preactRender } from "preact";
 import { useEffect, useReducer } from "preact/hooks";
 import { closeSearchPanel } from "@codemirror/search";
@@ -251,13 +252,14 @@ export class MainUI {
               )
               .map((button) => {
                 const parsedCommand = parseCommand(button.command);
+                const mdiIcon = (mdi as any)[kebabToCamel(button.icon)];
                 let featherIcon =
                   (featherIcons as any)[kebabToCamel(button.icon)];
                 if (!featherIcon) {
                   featherIcon = featherIcons.HelpCircle;
                 }
                 return {
-                  icon: featherIcon,
+                  icon: mdiIcon ? mdiIcon : featherIcon,
                   description: button.description || "",
                   callback: () => {
                     client.runCommandByName(

web/filtered_material_icons.ts

@@ -0,0 +1,26 @@
+/**
+ * We apply a selective export of allowed icons.
+ * It allows us to only import icons which fit an editor context, this avoids inflating the
+ * bundle size with mostly unused icons, but still allows users to freely choose from the allowed
+ * selection.
+ */
+export {
+  MdChecklist,
+  MdCode,
+  MdFileUpload,
+  MdFormatBold,
+  MdFormatIndentDecrease,
+  MdFormatIndentIncrease,
+  MdFormatItalic,
+  MdFormatListBulleted,
+  MdFormatListNumbered,
+  MdFormatQuote,
+  MdFormatSize,
+  MdFormatStrikethrough,
+  MdHome,
+  MdHorizontalRule,
+  MdImage,
+  MdLink,
+  MdOutlineLibraryBooks,
+  MdTerminal,
+} from "react-icons/md";