Make asset paths configurable

Signed-off-by: Rūdolfs Ošiņš <[email protected]>

Emoji.svelte

@@ -9,13 +9,11 @@
   type EmojiSize = "small" | "regular" | "large" | "huge";
 
   import twemoji from "twemoji";
+  import { config } from "./lib/config";
 
   export let emoji: string;
   export let size: EmojiSize = "regular";
   export let style: string | undefined = undefined;
-
-  // Set this to an empty string if you need a relative asset path.
-  export let assetPathPrefix: string = "/";
 </script>
 
 <style>
@@ -49,7 +47,7 @@
 <div {style} class="container">
   {@html twemoji.parse(emoji, {
     className: `emoji ${size}`,
-    base: assetPathPrefix,
+    base: $config.assetPathPrefix,
     folder: "twemoji",
     ext: ".svg",
   })}

lib/config.ts

@@ -0,0 +1,15 @@
+// Copyright © 2022 The Radicle Design System Contributors
+//
+// This file is part of radicle-design-system, distributed under the GPLv3
+// with Radicle Linking Exception. For full terms see the included
+// LICENSE file.
+
+import * as svelteStore from "svelte/store";
+
+interface Config {
+  assetPathPrefix: string;
+}
+
+export const config = svelteStore.writable<Config>({
+  assetPathPrefix: "", // Set this to "/" for an absolute asset path.
+});