fix: flag icon.

src/components/ExchangeRate/ExchangeRateInput.js

@@ -2,7 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 import { ControlGroup } from '@blueprintjs/core';
 
-import { FlagTag } from '../Tags';
+import { FlagIcon } from '../Tags';
 import { FMoneyInputGroup, FFormGroup } from '../Forms';
 
 export function ExchangeRateInputGroup({
@@ -12,11 +12,14 @@ export function ExchangeRateInputGroup({
   formGroupProps,
   name,
 }) {
+  const fromCountryCode = 'US';
+  const toCountryCode = 'LY';
+
   return (
     <FFormGroup inline={true} {...formGroupProps} name={name}>
       <ControlGroup>
         <ExchangeRatePrepend>
-          <FlagTag flage={'US'} /> 1 {fromCurrency} =
+          <ExchangeFlagIcon countryCode={fromCountryCode} /> 1 {fromCurrency} =
         </ExchangeRatePrepend>
         <ExchangeRateField
           allowDecimals={false}
@@ -25,7 +28,7 @@ export function ExchangeRateInputGroup({
           name={name}
         />
         <ExchangeRateAppend>
-          <FlagTag flage={'LY'} /> {toCurrency}
+          <ExchangeFlagIcon countryCode={toCountryCode} /> {toCurrency}
         </ExchangeRateAppend>
       </ControlGroup>
     </FFormGroup>
@@ -50,3 +53,9 @@ const ExchangeRatePrepend = styled(ExchangeRateSideIcon)`
 const ExchangeRateAppend = styled(ExchangeRateSideIcon)`
   padding-left: 8px;
 `;
+
+const ExchangeFlagIcon = styled(FlagIcon)`
+  margin-right: 5px;
+  margin-left: 5px;
+  display: inline-block;
+`;

src/components/Tags/FlagIcon.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const FlagIcon = ({ countryCode, className }) => {
+  const source = `/icons/flags/${countryCode}.svg`;
+
+  return <img alt="flag" src={source} className={className} />;
+};

src/components/Tags/FlagTag.js

@@ -1,20 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-export const FlagTag = ({ flage }) => {
-  return (
-    <React.Fragment>
-      <Img
-        alt="flag"
-        src={`https://cdn.jsdelivr.net/gh/madebybowtie/FlagKit@2.2/Assets/SVG/${flage}.svg`}
-      />
-    </React.Fragment>
-  );
-};
-
-const Img = styled.img`
-  display: inline-block;
-  object-fit: cover;
-  object-position: center;
-  margin: 0 5px;
-`;

src/components/Tags/index.js

@@ -1,4 +1,4 @@
 
 
 export * from './CurrencyTag';
-export * from './FlagTag'
+export * from './FlagIcon'