use flag images instead of emojis (fixes windows)

components/builds/BuildCard.tsx

@@ -10,11 +10,11 @@ import {
 } from "@chakra-ui/react";
 import { Plural, t, Trans } from "@lingui/macro";
 import { Ability, Prisma } from "@prisma/client";
+import Flag from "components/common/Flag";
 import ModeImage from "components/common/ModeImage";
 import MyIconButton from "components/common/MyIconButton";
 import UserAvatar from "components/common/UserAvatar";
 import WeaponImage from "components/common/WeaponImage";
-import { getEmojiFlag } from "countries-list";
 import { useMyTheme } from "hooks/common";
 import Image from "next/image";
 import Link from "next/link";
@@ -103,7 +103,7 @@ const BuildCard: React.FC<BuildCardProps & BoxProps> = ({
               {build.updatedAt.toLocaleDateString()}
             </Box>
             {build.jpn ? (
-              <>{getEmojiFlag("JP")}</>
+              <Flag countryCode="JP" />
             ) : build.top500 ? (
               <Image
                 src={`/layout/xsearch.png`}

components/common/Flag.tsx

@@ -0,0 +1,11 @@
+import Image from "next/image";
+
+export default function Flag({ countryCode }: { countryCode: string }) {
+  return (
+    <Image
+      width={16}
+      height={16}
+      src={`https://www.countryflags.io/${countryCode}/flat/16.png`}
+    />
+  );
+}

components/t/RosterPlayerBar.tsx

@@ -1,8 +1,8 @@
 import { Box, Center, Flex } from "@chakra-ui/react";
+import Flag from "components/common/Flag";
 import MyLink from "components/common/MyLink";
 import UserAvatar from "components/common/UserAvatar";
 import WeaponImage from "components/common/WeaponImage";
-import { getEmojiFlag } from "countries-list";
 import { useMyTheme } from "hooks/common";
 import { GetTeamData } from "prisma/queries/getTeam";
 import { Unpacked } from "utils/types";
@@ -45,8 +45,10 @@ const RosterPlayerBar: React.FC<Props> = ({ user }) => {
           fontWeight="medium"
           fontSize="sm"
         >
-          {user.username}#{user.discriminator}{" "}
-          {user.profile?.country ? getEmojiFlag(user.profile.country) : ""}
+          <Box mr={1}>
+            {user.username}#{user.discriminator}
+          </Box>{" "}
+          {user.profile?.country && <Flag countryCode={user.profile.country} />}
         </Flex>
       </MyLink>
       <Box display={["block", "none"]} />

components/u/AvatarWithInfo.tsx

@@ -8,13 +8,14 @@ import {
 } from "@chakra-ui/react";
 import { t, Trans } from "@lingui/macro";
 import { LeagueType, RankedMode } from "@prisma/client";
+import Flag from "components/common/Flag";
 import ModeImage from "components/common/ModeImage";
 import MyLink from "components/common/MyLink";
 import SubText from "components/common/SubText";
 import TwitterAvatar from "components/common/TwitterAvatar";
 import UserAvatar from "components/common/UserAvatar";
 import WeaponImage from "components/common/WeaponImage";
-import { countries, getEmojiFlag } from "countries-list";
+import { countries } from "countries-list";
 import { useMyTheme, useUser } from "hooks/common";
 import Image from "next/image";
 import { GetUserByIdentifierData } from "prisma/queries/getUserByIdentifier";
@@ -72,16 +73,16 @@ const AvatarWithInfo: React.FC<AvatarWithInfoProps> = ({
             </Heading>
           </Flex>
           {user.profile?.country && (
-            <Box mx="auto" my={1}>
-              <Box as="span" mr={1}>
-                {getEmojiFlag(user.profile.country)}{" "}
+            <Flex align="center" mx="auto" my={1}>
+              <Box as="span" mr={1} mt={1}>
+                <Flag countryCode={user.profile.country} />{" "}
               </Box>
               {
                 Object.entries(countries).find(
                   ([key]) => key === user.profile!.country
                 )![1].name
               }
-            </Box>
+            </Flex>
           )}
           {user.team && (
             <Flex align="center" justify="center" my={2}>

next.config.js

@@ -12,6 +12,9 @@ module.exports = withImages({
   experimental: {
     optimizeFonts: true,
   },
+  images: {
+    domains: ["www.countryflags.io"],
+  },
   // i18n: {
   //  v-- import from lib/locales
   //   locales: [

pages/freeagents.tsx

@@ -17,6 +17,7 @@ import {
 } from "@chakra-ui/react";
 import { t, Trans } from "@lingui/macro";
 import { Playstyle } from "@prisma/client";
+import Flag from "components/common/Flag";
 import Markdown from "components/common/Markdown";
 import MyLink from "components/common/MyLink";
 import SubText from "components/common/SubText";
@@ -25,7 +26,7 @@ import UserAvatar from "components/common/UserAvatar";
 import WeaponImage from "components/common/WeaponImage";
 import FAModal from "components/freeagents/FAModal";
 import HeaderBanner from "components/layout/HeaderBanner";
-import { countries, getEmojiFlag } from "countries-list";
+import { countries } from "countries-list";
 import { useMyTheme, useUser } from "hooks/common";
 import { useFreeAgents } from "hooks/freeagents";
 import { useRouter } from "next/router";
@@ -278,16 +279,16 @@ const FreeAgentCard = ({
         </Flex>
 
         {post.user.profile?.country && (
-          <Box ml={2} my={2}>
-            <Box as="span" mr={2}>
-              {getEmojiFlag(post.user.profile.country)}{" "}
+          <Flex align="center" ml={2} my={2}>
+            <Box as="span" mr={1} mt={1}>
+              <Flag countryCode={post.user.profile.country} />{" "}
             </Box>
             {
               Object.entries(countries).find(
                 ([key]) => key === post.user.profile?.country
               )![1].name
             }
-          </Box>
+          </Flex>
         )}
 
         {post.user.profile && post.user.profile?.weaponPool.length > 0 && (

pages/t/index.tsx

@@ -11,6 +11,7 @@ import {
 } from "@chakra-ui/react";
 import { t, Trans } from "@lingui/macro";
 import ChakraSelect from "components/common/ChakraSelect";
+import Flag from "components/common/Flag";
 import Markdown from "components/common/Markdown";
 import MyLink from "components/common/MyLink";
 import SubText from "components/common/SubText";
@@ -18,7 +19,7 @@ import SubTextCollapse from "components/common/SubTextCollapse";
 import TwitterAvatar from "components/common/TwitterAvatar";
 import HeaderBanner from "components/layout/HeaderBanner";
 import CreateNewTeamModal from "components/t/CreateNewTeamModal";
-import { countries, getEmojiFlag } from "countries-list";
+import { countries } from "countries-list";
 import { useMyTheme, useUser } from "hooks/common";
 import { GetStaticProps } from "next";
 import Image from "next/image";
@@ -133,11 +134,13 @@ const TeamsPage = ({ teams }: Props) => {
                 </Box>
               </MyLink>
 
-              <Box ml={2}>
-                {team.countries
-                  .map((country) => getEmojiFlag(country))
-                  .join("  ")}
-              </Box>
+              <Flex ml={2}>
+                {team.countries.map((country) => (
+                  <Box mr={1}>
+                    <Flag key={country} countryCode={country} />
+                  </Box>
+                ))}
+              </Flex>
             </Flex>
             <Box color={gray} fontSize="sm" mt={2}>
               {team.roster

pages/u/index.tsx

@@ -5,10 +5,10 @@ import {
   InputGroup,
   InputLeftElement,
 } from "@chakra-ui/react";
+import Flag from "components/common/Flag";
 import MyLink from "components/common/MyLink";
 import UserAvatar from "components/common/UserAvatar";
 import HeaderBanner from "components/layout/HeaderBanner";
-import { getEmojiFlag } from "countries-list";
 import { useDebounce, useMyTheme } from "hooks/common";
 import { GetStaticProps } from "next";
 import Head from "next/head";
@@ -96,14 +96,14 @@ const UserSearchPage = ({ users }: Props) => {
 
 function UserInfo({ user }: { user: Unpacked<GetAllUsersData> }) {
   return (
-    <Flex my={6} align="center">
+    <Flex my={3} align="center">
       <Link href={`/u/${user.discordId}`}>
         <a>
           <UserAvatar isSmall user={user} />
         </a>
       </Link>
       <Box ml={4}>
-        <Box fontWeight="bold">
+        <Flex align="center" fontWeight="bold">
           <MyLink
             href={`/u/${user.discordId}`}
             isColored={false}
@@ -112,11 +112,11 @@ function UserInfo({ user }: { user: Unpacked<GetAllUsersData> }) {
             {user.username}#{user.discriminator}
           </MyLink>
           {user.profile?.country ? (
-            <Box as="span" ml={2}>
-              {getEmojiFlag(user.profile.country)}
+            <Box ml={2} mt={2}>
+              <Flag countryCode={user.profile.country} />
             </Box>
           ) : null}
-        </Box>
+        </Flex>
         {user.profile?.twitterName && (
           <Flex align="center" fontSize="sm" mt={1}>
             <Box as={FaTwitter} color="#00acee" mr={1} />