feature - basePath attribute to allow changing the source of the flags

README.md

@@ -85,6 +85,7 @@ import 'react-flagpack/dist/style.css'
 | hasBorder |  Boolean | false | true | - |
 | hasBorderRadius | Boolean | false | true | - |
 | gradient |  String | false | '' | 'top-down', 'real-linear' or 'real-circular' |
+| basePath |  String | false | '' | In case you want to serve your images from a CDN or if you're serving your React application from a custom path. For example with [basePath](https://nextjs.org/docs/app/api-reference/config/next-config-js/basePath)  |
 
 ## Migrating to 2.0.0
 To migrate to react-flagpack 2.0.0 you will need to make some minor changes to your code base. First you will need to add react-flagpack to your post-install hook see [installation](#installation), then run yarn install (ensuring you are on at minimal react-flagpack 2.0.2).

dist/Flag.d.ts

@@ -8,6 +8,7 @@ export interface FlagProps {
     hasDropShadow?: boolean;
     hasBorderRadius?: boolean;
     className?: string;
+    basePath?: string;
 }
 declare const Flag: React.FC<FlagProps>;
 export default Flag;

dist/react-flag.js

@@ -1,19 +1,20 @@
 import { jsx as e } from "react/jsx-runtime";
-const d = ({
+const g = ({
   code: a = "NL",
   size: r = "l",
-  gradient: l = "",
-  hasBorder: o = !0,
-  hasDropShadow: t = !1,
-  hasBorderRadius: $ = !0,
-  className: s
+  gradient: $ = "",
+  hasBorder: l = !0,
+  hasDropShadow: o = !1,
+  hasBorderRadius: t = !0,
+  className: s,
+  basePath: d = ""
 }) => /* @__PURE__ */ e(
   "div",
   {
-    className: `flag ${l} size-${r} ${o ? "border" : ""} ${t ? "drop-shadow" : ""} ${$ ? "border-radius" : ""} ${s ? s.replace(/\s\s+/g, " ").trim() : ""}`,
-    children: /* @__PURE__ */ e("img", { src: `/flags/${r}/${a}.svg` })
+    className: `flag ${$} size-${r} ${l ? "border" : ""} ${o ? "drop-shadow" : ""} ${t ? "border-radius" : ""} ${s ? s.replace(/\s\s+/g, " ").trim() : ""}`,
+    children: /* @__PURE__ */ e("img", { src: `${d}/flags/${r}/${a}.svg` })
   }
-), i = d;
+), c = g;
 export {
-  i as default
+  c as default
 };

src/Flag.tsx

@@ -11,6 +11,7 @@ export interface FlagProps {
   hasDropShadow?: boolean;
   hasBorderRadius?: boolean;
   className?: string;
+  basePath?: string;
 }
 
 const Flag: React.FC<FlagProps> = ({
@@ -20,14 +21,15 @@ const Flag: React.FC<FlagProps> = ({
   hasBorder = true,
   hasDropShadow = false,
   hasBorderRadius = true,
-  className
+  className,
+  basePath = ''
 }: FlagProps) => {
   return (
     <div
       className={`flag ${gradient} size-${size} ${hasBorder ? 'border' : ''} ${hasDropShadow ? 'drop-shadow' : ''} ${hasBorderRadius ? 'border-radius' : ''} ${className ? className.replace(/\s\s+/g, ' ').trim() : ''}`}
     >
       {/* Depend on the build configs to make the assets available at this location */}
-      <img src={`/flags/${size}/${code}.svg`} />
+      <img src={`${basePath}/flags/${size}/${code}.svg`} />
     </div>
   )
 }