From 64b119123cba8dfc0b281e30877024ce7d15631c Mon Sep 17 00:00:00 2001
From: Robin Poort <info@robinpoort.com>
Date: Wed, 14 Mar 2018 13:02:13 +0100
Subject: [PATCH] #10: Escape # character in svg-background

---
 scss/tools/_tools.scss                 |  1 +
 scss/tools/functions/_strReplace.scss  | 16 ++++++++++++++++
 scss/tools/mixins/_svg-background.scss |  2 +-
 tests/mixins/_svg-background.scss      |  2 +-
 4 files changed, 19 insertions(+), 2 deletions(-)
 create mode 100644 scss/tools/functions/_strReplace.scss

diff --git a/scss/tools/_tools.scss b/scss/tools/_tools.scss
index 88189b9..aa5a97f 100755
--- a/scss/tools/_tools.scss
+++ b/scss/tools/_tools.scss
@@ -26,6 +26,7 @@
 @import "functions/breakpointMap";
 @import "functions/calcInterpolation";
 @import "functions/spacing";
+@import "functions/strReplace";
 
 // Mixins
 @import "mixins/breakpoint";
diff --git a/scss/tools/functions/_strReplace.scss b/scss/tools/functions/_strReplace.scss
new file mode 100644
index 0000000..a3c3540
--- /dev/null
+++ b/scss/tools/functions/_strReplace.scss
@@ -0,0 +1,16 @@
+/// Replace `$search` with `$replace` in `$string`
+/// @author Hugo Giraudel
+/// @param {String} $string - Initial string
+/// @param {String} $search - Substring to replace
+/// @param {String} $replace ('') - New value
+/// @return {String} - Updated string
+
+@function str-replace($string, $search, $replace: '') {
+  $index: str-index($string, $search);
+
+  @if $index {
+    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+  }
+
+  @return $string;
+}
diff --git a/scss/tools/mixins/_svg-background.scss b/scss/tools/mixins/_svg-background.scss
index 82c8623..3400277 100644
--- a/scss/tools/mixins/_svg-background.scss
+++ b/scss/tools/mixins/_svg-background.scss
@@ -9,7 +9,7 @@
   @if $viewboxHeight == false {
     $viewboxHeight: $viewboxWidth;
   }
-  background-image: url('data:image/svg+xml;utf-8,<svg style="fill: #{$color};" xmlns="http://www.w3.org/2000/svg" width="#{$width}" height="#{$height}" viewBox="0 0 #{$viewboxWidth} #{$viewboxHeight}">#{$svg}</svg>');
+  background-image: url(str-replace('data:image/svg+xml;utf-8,<svg style="fill: #{$color};" xmlns="http://www.w3.org/2000/svg" width="#{$width}" height="#{$height}" viewBox="0 0 #{$viewboxWidth} #{$viewboxHeight}">#{$svg}</svg>', '#', '%23'));
   background-position: $background-position;
   background-repeat: $background-repeat;
   background-size: #{$width}px #{$height}px;
diff --git a/tests/mixins/_svg-background.scss b/tests/mixins/_svg-background.scss
index 0024bb6..ee465e4 100644
--- a/tests/mixins/_svg-background.scss
+++ b/tests/mixins/_svg-background.scss
@@ -1,3 +1,3 @@
 .foo {
-  @include svg-background('<g transform="matrix(2.18679,0,0,2.18679,5.43964,-0.0421697)"><path d="M5.9 5.3L0.5 0.1C0.4 0 0.2 0 0.1 0.1 0 0.2 0 0.4 0.1 0.5L5.2 5.5 0.1 10.5C0 10.6 0 10.8 0.1 10.9 0.2 11 0.2 11 0.3 11 0.4 11 0.5 11 0.5 10.9L5.9 5.7C6 5.6 6 5.4 5.9 5.3Z"/></g>', black, 16);
+  @include svg-background('<g transform="matrix(2.18679,0,0,2.18679,5.43964,-0.0421697)"><path d="M5.9 5.3L0.5 0.1C0.4 0 0.2 0 0.1 0.1 0 0.2 0 0.4 0.1 0.5L5.2 5.5 0.1 10.5C0 10.6 0 10.8 0.1 10.9 0.2 11 0.2 11 0.3 11 0.4 11 0.5 11 0.5 10.9L5.9 5.7C6 5.6 6 5.4 5.9 5.3Z"/></g>', #f00, 16);
 }
\ No newline at end of file