Stop using Twemoji and just use SVGs for it (#1364)

gui/package.json

@@ -22,6 +22,7 @@
     "@tauri-apps/plugin-os": "^2.0.0",
     "@tauri-apps/plugin-shell": "^2.0.0",
     "@tauri-apps/plugin-store": "^2.0.0",
+    "@twemoji/svg": "^15.0.0",
     "browser-fs-access": "^0.35.0",
     "classnames": "^2.5.1",
     "flatbuffers": "22.10.26",
@@ -98,4 +99,4 @@
     "typescript-eslint": "^8.8.0",
     "vite": "^5.4.8"
   }
-}
+}

gui/src/components/commons/LangSelector.tsx

@@ -2,7 +2,8 @@ import { useLocalization } from '@fluent/react';
 import { useEffect, useMemo, useContext } from 'react';
 import { useForm } from 'react-hook-form';
 import { useConfig } from '@/hooks/config';
-import { langs, LangContext } from '@/i18n/config';
+import { LangContext } from '@/i18n/config';
+import { langs } from '@/i18n/names';
 import { Dropdown, DropdownDirection } from './Dropdown';
 
 export function LangSelector({
@@ -20,7 +21,21 @@ export function LangSelector({
   });
 
   const languagesItems = useMemo(
-    () => langs.map(({ key, name }) => ({ label: name, value: key })),
+    () =>
+      langs.map(({ key, name, emoji }) => ({
+        component: (
+          <div>
+            <img
+              draggable="false"
+              className="inline-block w-auto h-[1em] -translate-y-[0.05em]"
+              src={emoji}
+            />
+            {' ' + name}
+          </div>
+        ),
+        label: name,
+        value: key,
+      })),
     []
   );
 

gui/src/i18n/config.tsx

@@ -13,106 +13,12 @@ import { exists, readTextFile, BaseDirectory } from '@tauri-apps/plugin-fs';
 import { error } from '@/utils/logging';
 import { invoke } from '@tauri-apps/api/core';
 import { isTrayAvailable } from '@/utils/tauri';
+import { langs } from './names';
 
 export const defaultNS = 'translation';
 export const DEFAULT_LOCALE = 'en';
 const OVERRIDE_FILENAME = 'override.ftl';
 
-export const langs = [
-  {
-    name: '🇦🇪 عربى',
-    key: 'ar',
-  },
-  {
-    name: '🇨🇿 Čeština',
-    key: 'cs',
-  },
-  {
-    name: '🇩🇰 Dansk',
-    key: 'da',
-  },
-  {
-    name: '🇩🇪 Deutsch',
-    key: 'de',
-  },
-  {
-    name: '🇺🇸 English',
-    key: 'en',
-  },
-  {
-    name: '🌎 Español Latinoamericano',
-    key: 'es-419',
-  },
-  {
-    name: '🇪🇸 Español España',
-    key: 'es-ES',
-  },
-  {
-    name: '🇪🇪 Eesti',
-    key: 'et',
-  },
-  {
-    name: '🇫🇮 Suomi',
-    key: 'fi',
-  },
-  {
-    name: '🇫🇷 Français',
-    key: 'fr',
-  },
-  {
-    name: '🇮🇹 Italiano',
-    key: 'it',
-  },
-  {
-    name: '🇯🇵 日本語',
-    key: 'ja',
-  },
-  {
-    name: '🇰🇷 한국어',
-    key: 'ko',
-  },
-  {
-    name: '🇳🇴 Norsk bokmål',
-    key: 'nb-NO',
-  },
-  {
-    name: '🇳🇱 Nederlands',
-    key: 'nl',
-  },
-  {
-    name: '🇵🇱 Polski',
-    key: 'pl',
-  },
-  {
-    name: '🇧🇷 Português Brasileiro',
-    key: 'pt-BR',
-  },
-  {
-    name: '🇷🇺 Русский',
-    key: 'ru',
-  },
-  {
-    name: '🇺🇦 Українська',
-    key: 'uk',
-  },
-  {
-    name: '🇻🇳 Tiếng Việt',
-    key: 'vi',
-  },
-  {
-    name: '🇨🇳 简体中文',
-    key: 'zh-Hans',
-  },
-  {
-    name: '🧋 繁體中文',
-    key: 'zh-Hant',
-  },
-  {
-    name: '🥺 Engwish~ OwO',
-    key: 'en-x-owo',
-  },
-];
-
 // AppConfig path: https://docs.rs/tauri/1.2.4/tauri/api/path/fn.config_dir.html
 // We doing this only once, don't want an override check to be done on runtime,
 // only on launch :P

gui/src/i18n/names.ts

@@ -0,0 +1,141 @@
+import ar from '@twemoji/svg/1f1e6-1f1ea.svg';
+import cs from '@twemoji/svg/1f1e8-1f1ff.svg';
+import da from '@twemoji/svg/1f1e9-1f1f0.svg';
+import de from '@twemoji/svg/1f1e9-1f1ea.svg';
+import en from '@twemoji/svg/1f1fa-1f1f8.svg';
+import americas from '@twemoji/svg/1f30e.svg';
+import es from '@twemoji/svg/1f1ea-1f1f8.svg';
+import et from '@twemoji/svg/1f1ea-1f1ea.svg';
+import fi from '@twemoji/svg/1f1eb-1f1ee.svg';
+import fr from '@twemoji/svg/1f1eb-1f1f7.svg';
+import it from '@twemoji/svg/1f1ee-1f1f9.svg';
+import ja from '@twemoji/svg/1f1ef-1f1f5.svg';
+import ko from '@twemoji/svg/1f1f0-1f1f7.svg';
+import nb from '@twemoji/svg/1f1f3-1f1f4.svg';
+import nl from '@twemoji/svg/1f1f3-1f1f1.svg';
+import pl from '@twemoji/svg/1f1f5-1f1f1.svg';
+import br from '@twemoji/svg/1f1e7-1f1f7.svg';
+import ru from '@twemoji/svg/1f1f7-1f1fa.svg';
+import uk from '@twemoji/svg/1f1fa-1f1e6.svg';
+import vi from '@twemoji/svg/1f1fb-1f1f3.svg';
+import cn from '@twemoji/svg/1f1e8-1f1f3.svg';
+import bubble from '@twemoji/svg/1f9cb.svg';
+import plead from '@twemoji/svg/1f97a.svg';
+
+export const langs = [
+  {
+    emoji: ar,
+    name: 'عربى',
+    key: 'ar',
+  },
+  {
+    emoji: cs,
+    name: 'Čeština',
+    key: 'cs',
+  },
+  {
+    emoji: da,
+    name: 'Dansk',
+    key: 'da',
+  },
+  {
+    emoji: de,
+    name: 'Deutsch',
+    key: 'de',
+  },
+  {
+    emoji: en,
+    name: 'English',
+    key: 'en',
+  },
+  {
+    emoji: americas,
+    name: 'Español Latinoamericano',
+    key: 'es-419',
+  },
+  {
+    emoji: es,
+    name: 'Español España',
+    key: 'es-ES',
+  },
+  {
+    emoji: et,
+    name: 'Eesti',
+    key: 'et',
+  },
+  {
+    emoji: fi,
+    name: 'Suomi',
+    key: 'fi',
+  },
+  {
+    emoji: fr,
+    name: 'Français',
+    key: 'fr',
+  },
+  {
+    emoji: it,
+    name: 'Italiano',
+    key: 'it',
+  },
+  {
+    emoji: ja,
+    name: '日本語',
+    key: 'ja',
+  },
+  {
+    emoji: ko,
+    name: '한국어',
+    key: 'ko',
+  },
+  {
+    emoji: nb,
+    name: 'Norsk bokmål',
+    key: 'nb-NO',
+  },
+  {
+    emoji: nl,
+    name: 'Nederlands',
+    key: 'nl',
+  },
+  {
+    emoji: pl,
+    name: 'Polski',
+    key: 'pl',
+  },
+  {
+    emoji: br,
+    name: 'Português Brasileiro',
+    key: 'pt-BR',
+  },
+  {
+    emoji: ru,
+    name: 'Русский',
+    key: 'ru',
+  },
+  {
+    emoji: uk,
+    name: 'Українська',
+    key: 'uk',
+  },
+  {
+    emoji: vi,
+    name: 'Tiếng Việt',
+    key: 'vi',
+  },
+  {
+    emoji: cn,
+    name: '简体中文',
+    key: 'zh-Hans',
+  },
+  {
+    emoji: bubble,
+    name: '繁體中文',
+    key: 'zh-Hant',
+  },
+  {
+    emoji: plead,
+    name: 'Engwish~ OwO',
+    key: 'en-x-owo',
+  },
+];

gui/src/index.scss

@@ -4,8 +4,7 @@
 
 body {
   font-variant-numeric: tabular-nums;
-  font-family: var(--font-name), 'Noto Sans CJK', sans-serif, 'Twemoji Chromium',
-    emoji;
+  font-family: var(--font-name), 'Noto Sans CJK', sans-serif, emoji;
   width: 100vw;
   height: 100vh;
   user-select: none;
@@ -16,29 +15,6 @@ body {
   scrollbar-width: thin;
 }
 
-@media (-webkit-animation) {
-  body {
-    font-family: var(--font-name), 'Noto Sans CJK', sans-serif, 'Twemoji Webkit',
-      emoji;
-  }
-
-  body.linux {
-    font-family: var(--font-name), 'Noto Sans CJK', sans-serif, emoji;
-  }
-}
-
-@font-face {
-  font-family: 'Twemoji Webkit';
-  src: url('/fonts/twemoji-picosvg.woff2') format('woff2');
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Twemoji Chromium';
-  src: url('/fonts/twemoji-glyf_colr_1.woff2') format('woff2');
-  font-display: swap;
-}
-
 @font-face {
   font-family: 'OpenDyslexic';
   src: url('/fonts/OpenDyslexic-Regular.woff') format('woff');

pnpm-lock.yaml

@@ -71,6 +71,9 @@ importers:
       '@tauri-apps/plugin-store':
         specifier: ^2.0.0
         version: 2.0.0
+      '@twemoji/svg':
+        specifier: ^15.0.0
+        version: 15.0.0
       browser-fs-access:
         specifier: ^0.35.0
         version: 0.35.0
@@ -1255,6 +1258,9 @@ packages:
   '@tweenjs/tween.js@23.1.2':
     resolution: {integrity: sha512-kMCNaZCJugWI86xiEHaY338CU5JpD0B97p1j1IKNn/Zto8PgACjQx0UxbHjmOcLl/dDOBnItwD07KmCs75pxtQ==}
 
+  '@twemoji/svg@15.0.0':
+    resolution: {integrity: sha512-ZSPef2B6nBaYnfgdTbAy4jgW95o7pi2xPGwGCU+WMTxo7J6B1lMPTWwSq/wTuiMq+N0khQ90CcvYp1wFoQpo/w==}
+
   '@types/babel__core@7.20.5':
     resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
 
@@ -5457,6 +5463,8 @@ snapshots:
 
   '@tweenjs/tween.js@23.1.2': {}
 
+  '@twemoji/svg@15.0.0': {}
+
   '@types/babel__core@7.20.5':
     dependencies:
       '@babel/parser': 7.24.7