Feature request: Make FlagImage plugable

[simonnilsson]

Is your feature request related to a problem? Please describe. In my project I don't want flag images to be fetched from a remote server. The current implementation allows getting around this by supplying your own url for each flag in the flags-prop. But I would instead like to utilize the symbol concept of <svg> and have all flags fetched in a single resource.

flags.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
  <symbol id="ua" viewBox="0 0 36 36"><path fill="#005BBB" d="..."/></symbol>
  <symbol id="gb" viewBox="0 0 36 36"><path fill="#00247D" d="..."/></symbol>
  ...
</svg>

Can then be used like this in code:

<svg>
  <use href="flags.svg#ua">
</svg>

Describe the solution you'd like I have written an alternate implementation of the FlagImage that handles this. So the the feature request is essentially to be able to pass a custom component to PhoneInput (and passed along to CountrySelector) to be used instead of the built in FlagImage. This way I would not need to fork the repository and create a completly new package.

const FlagImage: React.FC<FlagImageProps> = ({ iso2, size, className, style, ...restProps }) => {
  if (!iso2) {
    // render empty image to save place for flag
    return <svg className={className} width={size} height={size} {...restProps} />;
  }

  return (
    <svg
      className={className}
      width={size}
      height={size}
      data-country={iso2}
      style={{
        width: size,
        height: size,
        ...style,
      }}
      {...restProps}
    >
      <use width={size} height={size} href={`flags.svg#${iso2}`} />
    </svg>
  );
};

For example:

<PhoneInput flagComponent={FlagImage} />

If support for this would be considered I would be willing to implement it and submit a PR.