feat: Support for country flags emojis (#5782)

Co-authored-by: Frank Elsinga <frank@elsinga.de>

src/App.vue

@@ -4,9 +4,11 @@
 
 <script>
 import { setPageLocale } from "./util-frontend";
+import { polyfillCountryFlagEmojis } from "country-flag-emoji-polyfill";
 export default {
     created() {
         setPageLocale();
     },
 };
+polyfillCountryFlagEmojis();
 </script>

src/assets/app.scss

@@ -3,7 +3,7 @@
 @import "node_modules/bootstrap/scss/bootstrap";
 
 #app {
-    font-family: BlinkMacSystemFont, segoe ui, Roboto, helvetica neue, Arial, noto sans, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol, noto color emoji;
+    font-family: "Twemoji Country Flags", BlinkMacSystemFont, segoe ui, Roboto, helvetica neue, Arial, noto sans, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol, noto color emoji;
 }
 
 h1 {

src/components/settings/About.vue

@@ -21,6 +21,9 @@
                     <label><input v-model="settings.checkBeta" type="checkbox" :disabled="!settings.checkUpdate" @change="saveSettings()" /> {{ $t("Also check beta release") }}</label>
                 </div>
             </div>
+            <div class="mt-5">
+                <p>{{ $t("Font Twemoji by Twitter licensed under") }} <a href="https://creativecommons.org/licenses/by/4.0/">CC-BY 4.0</a></p>
+            </div>
         </div>
     </div>
 </template>

src/lang/en.json

@@ -1067,5 +1067,6 @@
     "YZJ Robot Token": "YZJ Robot token",
     "Plain Text": "Plain Text",
     "Message Template": "Message Template",
-    "Template Format": "Template Format"
+    "Template Format": "Template Format",
+    "Font Twemoji by Twitter licensed under": "Font Twemoji by Twitter licensed under"
 }