help-beta: Add support for displaying zulip icons.

We're using unplugin-icons to do so.

help-beta/astro.config.mjs

@@ -1,3 +1,5 @@
+import * as fs from "node:fs";
+
 import starlight from "@astrojs/starlight";
 import {defineConfig} from "astro/config";
 import Icons from "unplugin-icons/vite";
@@ -14,6 +16,23 @@ export default defineConfig({
                 // them look larger than the text around them.
                 scale: 1,
                 defaultStyle: "display: inline; vertical-align: text-bottom;",
+                customCollections: {
+                    // unplugin-icons has a FileSystemIconLoader which is more
+                    // versatile. But it only supports one directory path for
+                    // a single set of icons. We should start using that loader
+                    // if they add support for multiple paths in the future.
+                    async "zulip-icon"(iconName) {
+                        const sharedIconsPath = `../web/shared/icons/${iconName}.svg`;
+                        const webOnlyIconsPath = `../web/images/icons/${iconName}.svg`;
+
+                        if (fs.existsSync(sharedIconsPath)) {
+                            return await fs.promises.readFile(sharedIconsPath, "utf8");
+                        } else if (fs.existsSync(webOnlyIconsPath)) {
+                            return await fs.promises.readFile(webOnlyIconsPath, "utf8");
+                        }
+                        throw new Error("Zulip icon not found.");
+                    },
+                },
             }),
         ],
     },

tools/convert-help-center-docs-to-mdx

@@ -98,6 +98,19 @@ def append_str_to_line(text: str, destination_str: str, n: int) -> str:
     return "\n".join(lines)
 
 
+def replace_icon_with_unplugin_component(
+    match: re.Match[str],
+    icon_package_name: str,
+    icon_component_prefix: str,
+    import_statement_set: set[str],
+) -> str:
+    icon_name = match.group(1)
+    component_name = icon_component_prefix + to_pascal(icon_name).replace("-", "")
+    import_statement = f'import {component_name} from "~icons/{icon_package_name}/{icon_name}"'
+    import_statement_set.add(import_statement)
+    return f"<{component_name} />"
+
+
 def replace_icons(markdown_string: str, import_statement_set: set[str]) -> str:
     """
     Write some examples here and some assumptions we made about
@@ -108,16 +121,23 @@ def replace_icons(markdown_string: str, import_statement_set: set[str]) -> str:
     )
 
     def replace_font_awesome_icon_with_unplugin_component(match: re.Match[str]) -> str:
-        icon_name = match.group(1)
+        return replace_icon_with_unplugin_component(match, "fa", "Fa", import_statement_set)
-        component_name = "Fa" + to_pascal(icon_name).replace("-", "")
-        import_statement = f'import {component_name} from "~icons/fa/{icon_name}"'
-        import_statement_set.add(import_statement)
-        return f"<{component_name} />"
 
     result = re.sub(
         font_awesome_pattern, replace_font_awesome_icon_with_unplugin_component, markdown_string
     )
 
+    zulip_icon_pattern = re.compile(
+        r'<i[^>]*class="(?:[^"]*\s)?zulip-icon(?:\s+zulip-icon-([a-z0-9\-]+))(?:\s[^"]*)?"[^>]*>(?:\s[^<]*)?</i>',
+    )
+
+    def replace_zulip_icon_with_unplugin_component(match: re.Match[str]) -> str:
+        return replace_icon_with_unplugin_component(
+            match, "zulip-icon", "ZulipIcons", import_statement_set
+        )
+
+    result = re.sub(zulip_icon_pattern, replace_zulip_icon_with_unplugin_component, markdown_string)
+
     return result