feat(rtl): support flipped svg background images on rtl (#11945)

* feat(svg-background-image): support flipped on rtl

* feat(svg-background-image): add rtl for needed icons

* revert(svg-background-image): no need to flip clear

* fix(svg-background-image): translate to place

* fix(svg-background-image): add support for line and polygon

src/components/item/item.ios.scss

@@ -219,7 +219,7 @@ $item-ios-sliding-content-background:     $list-ios-background-color !default;
   .item-ios[detail-push] .item-inner,
   button.item-ios:not([detail-none]) .item-inner,
   a.item-ios:not([detail-none]) .item-inner {
-    @include svg-background-image($item-ios-detail-push-svg);
+    @include svg-background-image($item-ios-detail-push-svg, true);
     @include padding-horizontal(null, 32px);
     @include background-position(end, $item-ios-padding-end - 2, center);
 

src/components/item/item.md.scss

@@ -123,7 +123,7 @@ $item-md-sliding-content-background: $list-md-background-color !default;
   .item-md[detail-push] .item-inner,
   button.item-md:not([detail-none]) .item-inner,
   a.item-md:not([detail-none]) .item-inner {
-    @include svg-background-image($item-md-detail-push-svg);
+    @include svg-background-image($item-md-detail-push-svg, true);
     @include padding-horizontal(null, 32px);
     @include background-position(end, $item-md-padding-end - 2, center);
 

src/components/item/item.wp.scss

@@ -128,7 +128,7 @@ $item-wp-sliding-content-background: $list-wp-background-color !default;
   .item-wp[detail-push] .item-inner,
   button.item-wp:not([detail-none]) .item-inner,
   a.item-wp:not([detail-none]) .item-inner {
-    @include svg-background-image($item-wp-detail-push-svg);
+    @include svg-background-image($item-wp-detail-push-svg, true);
     @include padding-horizontal(null, 32px);
     @include background-position(end, $item-wp-padding-end - 2, center);
 

src/components/searchbar/searchbar.ios.scss

@@ -77,7 +77,7 @@ $searchbar-ios-toolbar-input-background:  rgba(0, 0, 0, .08) !default;
 
 @mixin ios-searchbar-icon($svg-icon, $fg-color) {
   $svg: str-replace($svg-icon, 'fg-color', $fg-color);
-  @include svg-background-image($svg);
+  @include svg-background-image($svg, true);
 }
 
 

src/components/searchbar/searchbar.md.scss

@@ -78,7 +78,7 @@ $searchbar-md-input-clear-icon-size:     22px !default;
 
 .searchbar-md .searchbar-search-icon {
   @include position(11px, null, null, 16px);
-  @include svg-background-image($searchbar-md-input-search-icon-svg);
+  @include svg-background-image($searchbar-md-input-search-icon-svg, true);
 
   width: $searchbar-md-input-search-icon-size + 1;
   height: $searchbar-md-input-search-icon-size + 1;

src/components/searchbar/searchbar.wp.scss

@@ -99,7 +99,7 @@ $searchbar-wp-input-clear-icon-size:     22px !default;
 
 .searchbar-wp .searchbar-search-icon {
   @include position(5px, $searchbar-wp-input-padding-horizontal, null, null);
-  @include svg-background-image($searchbar-wp-input-search-icon-svg);
+  @include svg-background-image($searchbar-wp-input-search-icon-svg, true);
 
   position: absolute;
 

src/themes/ionic.functions.scss

@@ -159,6 +159,25 @@
 }
 
 
+// Str extract between start and end
+// --------------------------------------------------
+
+@function str-extract($string, $start, $end) {
+  $start-index: str-index($string, $start);
+
+  @if $start-index {
+    $post: str-slice($string, $start-index + str-length($start));
+    $end-index: str-index($post, $end);
+
+    @if $end-index {
+      @return str-slice($post, 1, $end-index - 1);
+    }
+  }
+
+  @return null;
+}
+
+
 // URL Encode Function
 // --------------------------------------------------
 

src/themes/ionic.mixins.scss

@@ -29,14 +29,6 @@
   }
 }
 
-// SVG Background Image Mixin
-// --------------------------------------------------
-
-@mixin svg-background-image($svg) {
-  $url: url-encode($svg);
-  background-image: url("data:image/svg+xml;charset=utf-8,#{$url}");
-}
-
 // Check that the given map values are in ascending order
 // ---------------------------------------------------------------------------------
 
@@ -202,6 +194,34 @@
   }
 }
 
+// SVG Background Image Mixin
+// @param {string} $svg
+// ----------------------------------------------------------
+@mixin svg-background-image($svg, $flip-rtl: false) {
+  $url: url-encode($svg);
+  $viewBox: str-split(str-extract($svg, "viewBox='", "'"), " ");
+
+  @if $flip-rtl != true or $viewBox == null {
+    @include multi-dir() {
+      background-image: url("data:image/svg+xml;charset=utf-8,#{$url}");
+    }
+  } @else {
+    $transform: "transform='translate(#{nth($viewBox, 3)}, 0) scale(-1, 1)'";
+    $flipped-url: $svg;
+    $flipped-url: str-replace($flipped-url, "<path", "<path #{$transform}");
+    $flipped-url: str-replace($flipped-url, "<line", "<line #{$transform}");
+    $flipped-url: str-replace($flipped-url, "<polygon", "<polygon #{$transform}");
+    $flipped-url: url-encode($flipped-url);
+
+    @include ltr () {
+      background-image: url("data:image/svg+xml;charset=utf-8,#{$url}");
+    }
+    @include rtl() {
+      background-image: url("data:image/svg+xml;charset=utf-8,#{$flipped-url}");
+    }
+  }
+}
+
 // Add property horizontal
 // @param {string} $start
 // @param {string} $end