🌐 Fix the flags for internalization

src/components/Settings/LanguageSwitch.tsx

@@ -1,5 +1,6 @@
-import { Group, Image, Select, Stack, Text } from '@mantine/core';
+import { Group, Select, Stack, Text } from '@mantine/core';
 import { showNotification } from '@mantine/notifications';
+import getUnicodeFlagIcon from 'country-flag-icons/unicode';
 
 import { forwardRef, useState } from 'react';
 import { useTranslation } from 'next-i18next';
@@ -20,7 +21,7 @@ export default function LanguageSwitch() {
     ? locales.map((localeItem) => ({
         value: localeItem,
         label: getLanguageByCode(localeItem).originalName,
-        image: `imgs/flags/${localeItem}.png`,
+        icon: getUnicodeFlagIcon(localeItem),
         language: getLanguageByCode(localeItem),
       }))
     : [];
@@ -56,20 +57,7 @@ export default function LanguageSwitch() {
   return (
     <Stack>
       <Select
-        icon={
-          <Image
-            width={30}
-            height={18}
-            src={`/imgs/flags/${selectedLanguage}.png`}
-            alt="country flag"
-            styles={{
-              root: {
-                borderRadius: 1.5,
-                overflow: 'hidden',
-              },
-            }}
-          />
-        }
+        icon={<Text>{getUnicodeFlagIcon(selectedLanguage as string)}</Text>}
         label={t('label')}
         data={data}
         itemComponent={SelectItem}
@@ -99,7 +87,7 @@ const SelectItem = forwardRef<HTMLDivElement, ItemProps>(
   ({ language, image, ...others }: ItemProps, ref) => (
     <div ref={ref} {...others}>
       <Group noWrap>
-        <Image src={image} width={30} height={20} radius="xs" />
+        <Text>{getUnicodeFlagIcon(language.originalName as string)}</Text>
 
         <div>
           <Text size="sm">