Add str-replace function for handling $primary inside SVGs passed to $logo and $admin-bar-logo

Author: Log1x

assets/styles/admin/admin-bar.scss

@@ -3,6 +3,7 @@
    ========================================================================== */
 
 // Configuration
+@import '../config/functions';
 @import '../config/variables';
 @import '../config/mixins';
 

assets/styles/admin/admin.scss

@@ -3,6 +3,7 @@
    ========================================================================== */
 
 // Configuration
+@import '../config/functions';
 @import '../config/variables';
 @import '../config/mixins';
 

assets/styles/admin/partials/acf.scss

@@ -437,7 +437,7 @@
 
         &::before {
           display: block;
-          background: url($logo) center center no-repeat;
+          background: str-replace(url($logo), '#', '%23') center center no-repeat;
           background-size: contain;
           width: 56px;
           height: auto;

assets/styles/admin/partials/admin-bar.scss

@@ -133,7 +133,7 @@
   }
 
   &::before {
-    background: url($admin-bar-logo) center center no-repeat !important;
+    background: str-replace(url($admin-bar-logo), '#', '%23') center center no-repeat !important;
     background-size: contain;
     width: $admin-bar-logo-width;
     height: $admin-bar-logo-height;

assets/styles/admin/partials/admin-menu.scss

@@ -31,7 +31,7 @@
 
 #adminmenu li.menu-top .toplevel_page_acf-options-theme-options .wp-menu-image {
   &::before {
-    background: url($logo) center center no-repeat;
+    background: str-replace(url($logo), '#', '%23') center center no-repeat;
     background-size: contain;
     width: 16px;
     height: 16px;

assets/styles/config/functions.scss

@@ -0,0 +1,20 @@
+///* ==========================================================================
+//   Functions
+//   ========================================================================== */
+
+/// Replace `$search` with `$replace` in `$string`
+/// Used on our SVG icon backgrounds for custom forms.
+/// @param  {String} $string
+/// @param  {String} $search
+/// @param  {String} $replace
+/// @return {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;
+}

assets/styles/config/mixins.scss

@@ -2,14 +2,6 @@
 //   #MIXINS
 //   ========================================================================== */
 
-// Responsive, human readable media query
-// mixins based on Bulma and Sass MQ.
-//
-// .usage {
-//   @include from($desktop) {
-//     font-size: 2rem;
-//   }
-// }
 @mixin from($device) {
   @media screen and (min-width: $device) {
     @content;

assets/styles/login/login.scss

@@ -3,6 +3,7 @@
    ========================================================================== */
 
 // Configuration
+@import '../config/functions';
 @import '../config/variables';
 @import '../config/mixins';
 

assets/styles/login/partials/core.scss

@@ -64,7 +64,7 @@ body.login {
       font-size: 0 !important;
 
       &::after {
-        background: url($logo) center center no-repeat;
+        background: str-replace(url($logo), '#', '%23') center center no-repeat;
         background-size: contain;
         width: 48px;
         height: 48px;