Switch flags package

thewca · Jul 31, 2023 · 9df1e8d · 9df1e8d
1 parent ed17e18
commit 9df1e8d
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 52 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -20,13 +20,13 @@
     "@mui/icons-material": "^5.1.0",
     "@mui/material": "^5.1.0",
     "date-fns": "^2.25.0",
+    "flag-icons": "^6.9.2",
     "graphql": "^16.0.1",
     "material-ui-confirm": "^3.0.2",
     "notistack": "^2.0.3",
     "phoenix": "^1.6.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-flag-icon-css": "^1.0.25",
     "react-router-dom": "^6.0.2",
     "react-timeago": "^7.1.0",
     "react-virtualized-auto-sizer": "^1.0.6",

diff --git a/client/src/components/FlagIcon/FlagIcon.css b/client/src/components/FlagIcon/FlagIcon.css
@@ -1,7 +1,11 @@
-.flag-icon-tw {
+.fi-size-lg {
+  font-size: 1.35em;
+}
+
+.fi-tw {
   background-image: url("./images/4x3/tw.svg");
 }
 
-.flag-icon-tw.flag-icon-squared {
+.fi-tw.fis {
   background-image: url("./images/1x1/tw.svg");
 }
diff --git a/client/src/components/FlagIcon/FlagIcon.jsx b/client/src/components/FlagIcon/FlagIcon.jsx
@@ -1,8 +1,12 @@
 import React from "react";
-import FlagIconFactory from "react-flag-icon-css";
 
+import "flag-icons/css/flag-icons.min.css";
 import "./FlagIcon.css";
 
-const FlagIcon = FlagIconFactory(React, { useCssModules: false });
+function FlagIcon({ code, size }) {
+  return (
+    <span className={`fi fi-${code} ${size ? `fi-size-${size}` : ""}`}></span>
+  );
+}
 
 export default FlagIcon;