Escape the newly added SVGs.

Also use `viewBox` instead of `viewbox`.

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 146dd7316e1e130ee2b5ec3c6da47db12c8c1dd8..5f0ef76dc8b4feb94958cfdb6292827da53126ef 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -529,7 +529,7 @@ $form-check-input-checked-border-color:   $form-check-input-checked-bg-color !de
 $form-check-input-checked-bg-repeat:      no-repeat !default;
 $form-check-input-checked-bg-position:    center center !default;
 $form-check-input-checked-bg-size:        1em !default;
-$form-check-input-checked-bg-image:       str-replace(url('data:image/svg+xml;utf8,<svg viewbox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path stroke="#{$form-check-input-checked-color}" stroke-width="3" d="M4 8.5L6.5 11l6-6" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/></svg>'), "#", "%23") !default;
+$form-check-input-checked-bg-image:       str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath stroke='#{$form-check-input-checked-color}' stroke-width='3' d='M4 8.5L6.5 11l6-6' fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e"), "#", "%23") !default;
 $form-check-radio-checked-bg-image: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='#{$form-check-input-checked-color}'/%3e%3c/svg%3e"), "#", "%23") !default;
 
 $form-check-input-indeterminate-color:          $component-active-color !default;
@@ -538,7 +538,7 @@ $form-check-input-indeterminate-border-color:   $form-check-input-indeterminate-
 $form-check-input-indeterminate-bg-repeat:      no-repeat !default;
 $form-check-input-indeterminate-bg-position:    center center !default;
 $form-check-input-indeterminate-bg-size:        1em !default;
-$form-check-input-indeterminate-bg-image:       str-replace(url('data:image/svg+xml;utf8,<svg viewbox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M5 8h6" stroke="#{$form-check-input-indeterminate-color}" stroke-width="3" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/></svg>'), "#", "%23") !default;
+$form-check-input-indeterminate-bg-image:       str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M5 8h6' stroke='#{$form-check-input-indeterminate-color}' stroke-width='3' fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e"), "#", "%23") !default;
 
 $form-switch-color:               rgba(0, 0, 0, .25) !default;
 $form-switch-width:               2em !default;
@@ -584,7 +584,7 @@ $form-select-bg:                  $input-bg !default;
 $form-select-disabled-bg:         $gray-200 !default;
 $form-select-bg-size:             16px 12px !default; // In pixels because image dimensions
 $form-select-indicator-color:     $gray-800 !default;
-$form-select-indicator:           str-replace(url('data:image/svg+xml;utf8,<svg viewbox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path stroke="#{$form-select-indicator-color}" stroke-width="2px" d="M2 5l6 6 6-6" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/></svg>'), "#", "%23") !default;
+$form-select-indicator:           str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath stroke='#{$form-select-indicator-color}' stroke-width='2px' d='M2 5l6 6 6-6' fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e"), "#", "%23") !default;
 
 $form-select-background:          $form-select-indicator no-repeat right $form-select-padding-x center / $form-select-bg-size !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon)