chore: define Sass functions, mixins, placeholders and variables

1 files changed, 14 insertions, 0 deletions

diff --git a/src/styles/abstracts/functions/_encode.scss b/src/styles/abstracts/functions/_encode.scss
new file mode 100644
index 0000000..4350185
--- /dev/null
+++ b/src/styles/abstracts/functions/_encode.scss
@@ -0,0 +1,14 @@
+@use "str-replace" as fun;
+
+/// Encode a SVG.
+/// @param {String} $svg A complete svg (`<svg>...</svg>`).
+/// @return The encoded svg, ready to use for background-image.
+@function encode-svg($svg) {
+  $svg-encoding: (("<", "%3C"), (">", "%3E"), ("#", "%23"));
+
+  @each $char, $encoded in $svg-encoding {
+    $svg: fun.str-replace($svg, $char, $encoded);
+  }
+
+  @return "data:image/svg+xml;utf8," + $svg;
+}