app: build lexeicons.ttf font for custom/brand icons

Author: phlip9

app/fonts/README.md

@@ -25,3 +25,25 @@ and place it in `app/fonts/Hubot-Sans.ttf`.
 ```bash
 $ cp ~/Downloads/"HubotSans[slnt,wdth,wght].ttf" ~/dev/lexe/public/app/fonts/Hubot-Sans.ttf
 ```
+
+
+## Rebuild `lexeicons.ttf` from raw SVGs
+
+The <./lexeicons-svgs> directory contains raw, unprocessed SVG icons that we
+use. These are currently sourced from: <https://simpleicons.org>.
+
+We can't easily or efficiently render .svg icons in flutter, so we need to
+process and collect these .svg icons into a .ttf font file, <./lexeicons.ttf>.
+
+### Process
+
+1. Open <https://fontello.com>.
+2. Drag all the raw .svg icon files in the <./lexeicons-svgs> directory into the
+   "Custom Icons" section on Fontello.
+3. Select all "Custom Icons".
+4. Name the font `lexeicons` and hit "Download webfont".
+5. Unzip and extract `lexeicons.ttf` from the downloaded zip file to
+   `public/app/fonts/lexeicons.ttf`.
+6. Open <../lib/style.dart> and update the corresponding `LxIcons` codepoints
+   to match the codepoints assigned by Fontello (under the "Customize Codes"
+   tab).

app/fonts/lexeicons-svgs/00_discord.svg

@@ -76,7 +76,7 @@ EXTERNAL SOURCES:
 
 SPEC CHECKSUMS:
   app_links: f3e17e4ee5e357b39d8b95290a9b2c299fca71c6
-  app_rs_dart: dfe0493fb21658411a6fc4d887c967e35e311cb7
+  app_rs_dart: a1e1f11cc54d38820b575dc2d1634810e88a4acb
   camera_avfoundation: dd002b0330f4981e1bbcb46ae9b62829237459a4
   device_info_plus: bf2e3232933866d73fe290f2942f2156cdd10342
   Flutter: e0871f40cf51350855a761d2e70bf5af5b9b5de7

app/fonts/lexeicons-svgs/01_github.svg

@@ -701,7 +701,7 @@ class WalletDrawer extends StatelessWidget {
                 ),
                 IconButton(
                   onPressed: () => url.open("https://x.com/lexeapp"),
-                  icon: const Icon(LxIcons.twitter, size: Fonts.size600),
+                  icon: const Icon(LxIcons.x, size: Fonts.size600),
                   color: LxColors.foreground,
                 ),
                 IconButton(
@@ -710,7 +710,8 @@ class WalletDrawer extends StatelessWidget {
                   color: LxColors.foreground,
                 ),
                 IconButton(
-                  onPressed: () => url.open("https://github.com/lexe-app"),
+                  onPressed: () =>
+                      url.open("https://github.com/lexe-app/lexe-public"),
                   icon: const Icon(LxIcons.github, size: Fonts.size600),
                   color: LxColors.foreground,
                 ),

app/fonts/lexeicons-svgs/02_x.svg

@@ -941,14 +941,21 @@ final class LxIcons {
   /// Website icon (globe/web)
   static const IconData website = Symbols.language_rounded;
 
-  /// X/Twitter icon (bird/twitter)
-  static const IconData twitter = Symbols.group_rounded;
+  // Custom brand icons (Material Icons/Symbols don't have any brand logos)
+  // See: <app/fonts/README.md> for how these were sourced and generated.
 
-  /// Discord icon (chat bubble)
-  static const IconData discord = Symbols.forum_rounded;
+  /// Discord icon (discord logo)
+  static const IconData discord = LxCustomIconData(0xe800);
 
-  /// GitHub icon (code/repository)
-  static const IconData github = Symbols.code_rounded;
+  /// GitHub icon (github logo)
+  static const IconData github = LxCustomIconData(0xe801);
+
+  /// X/Twitter icon (X logo)
+  static const IconData x = LxCustomIconData(0xe802);
+}
+
+class LxCustomIconData extends IconData {
+  const LxCustomIconData(super.codePoint) : super(fontFamily: 'Lexe Icons');
 }
 
 /// Screen width breakpoints

app/fonts/lexeicons.ttf

@@ -192,6 +192,9 @@ flutter:
         - asset: fonts/InterVariable.ttf
         - asset: fonts/InterVariable-Italic.ttf
           style: italic
+    - family: "Lexe Icons"
+      fonts:
+        - asset: fonts/lexeicons.ttf
 
   # GLSL GPU fragment shaders
   #