use older version of circle flags for safari

HatScripts/circle-flags#41

src/components/AddDeck.tsx

@@ -1,10 +1,10 @@
 import { XMarkIcon } from '@heroicons/react/24/solid'
 import { useContext } from 'react'
-import { CircleFlag } from 'react-circle-flags'
 import { MenuContext } from '../contexts/MenuContext'
 import { useAddDeck } from '../hooks/useAddDeck'
 import { useDeckList } from '../hooks/useDeckList'
 import { type CsvDeck } from '../models/CsvDeck'
+import { CustomCircleFlag } from './icons/CustomCircleFlag'
 
 export const AddDeck = (): JSX.Element => {
   const { setMenuComponent } = useContext(MenuContext)
@@ -55,7 +55,7 @@ const DeckItem = ({ csvDeck }: DeckItemProps): JSX.Element => {
     <li className="py-1" onClick={isLoading ? undefined : handleClick}>
       <button className="text-xl">
         <span className="h-5 w-5">
-          <CircleFlag countryCode={csvDeck.language} />
+          <CustomCircleFlag countryCode={csvDeck.language} />
         </span>
         {csvDeck.title}
       </button>

src/components/Menu.tsx

@@ -6,13 +6,13 @@ import {
 } from '@heroicons/react/24/solid'
 import { useLiveQuery } from 'dexie-react-hooks'
 import { useContext } from 'react'
-import { CircleFlag } from 'react-circle-flags'
 import { MenuContext } from '../contexts/MenuContext'
 import { useSelectDeck } from '../hooks/useSelectDeck'
 import { type Deck } from '../models/Deck'
 import { getAppSetting } from '../repositories/appSetting'
 import { getAllDecks } from '../repositories/deck'
 import { Logo } from './Logo'
+import { CustomCircleFlag } from './icons/CustomCircleFlag'
 
 export const Menu = (): JSX.Element => {
   const decks = useLiveQuery(getAllDecks)
@@ -95,7 +95,7 @@ const DeckItem = ({ deck, isSelected }: DeckItemProps): JSX.Element => {
         onClick={handleClick}
       >
         <span className="h-5 w-5">
-          <CircleFlag countryCode={deck.language} />
+          <CustomCircleFlag countryCode={deck.language} />
         </span>
         {deck.title}
       </button>
@@ -118,7 +118,7 @@ const DeleteDeckItem = ({ deck }: DeleteDeckItemProps): JSX.Element => {
     <li className="flex items-center justify-between p-3">
       <div className="flex items-center text-xl">
         <span className="ml-1 mr-2 h-5 w-5">
-          <CircleFlag countryCode={deck.language} />
+          <CustomCircleFlag countryCode={deck.language} />
         </span>
         {deck.title}
       </div>

src/components/icons/CustomCircleFlag.tsx

@@ -0,0 +1,23 @@
+import { CircleFlag } from 'react-circle-flags'
+
+interface CustomCircleFlagProps {
+  countryCode: string
+}
+
+/**
+ * Use older version for safari compatibility
+ * https://github.com/HatScripts/circle-flags/issues/41
+ *
+ * @param props
+ * @returns
+ */
+export const CustomCircleFlag = ({
+  countryCode,
+}: CustomCircleFlagProps): JSX.Element => {
+  return (
+    <CircleFlag
+      countryCode={countryCode}
+      cdnUrl="https://raw.githubusercontent.com/HatScripts/circle-flags/148ed57f5aebda2e4440818be02b951b60f222b0/flags/"
+    />
+  )
+}