mohammad/fix_svg_ie

build/stylelint.js

@@ -8,6 +8,7 @@ module.exports = {
             '!src/sass/external/**/*.scss',
             '!src/sass/_constants.scss',
             '!src/sass/mixin.scss',
+            '!src/sass/functions.scss',
             '!src/sass/reset.scss'
         ]
     }

scripts/compile.pl

@@ -55,7 +55,7 @@
 }
 
 if ($pattern) {
-    @m = grep {index($_->[0], $pattern) > -1} @m;
+    @m = grep {$_->[0] =~ $pattern} @m;
     $force = 1;
     # use the last hash to maintain consistency between current templates with new one
     # since pattern specified, so one or few templates are going to be compiled not all of them

src/sass/all.scss

@@ -3,6 +3,7 @@
 /* common styles */
 @import 'reset';
 @import 'mixin';
+@import 'functions';
 @import 'common';
 @import 'animations';
 

src/sass/common/accordion.scss

@@ -4,7 +4,7 @@
             background-position: left !important;
         }
         h3.ui-state-default {
-            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><defs><style>.cls-1{fill:#{rgba($COLOR_BLUE, 1)};}</style></defs><title>arrow_left</title><path class="cls-1" d="M15.7,16.59,11.125,12,15.7,7.41,14.3,6l-6,6,6,6Z"/></svg>');
+            background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="#{rgba($COLOR_BLUE, 1)}" d="M15.7,16.59,11.125,12,15.7,7.41,14.3,6l-6,6,6,6Z"/></svg>');
         }
     }
     .ui-accordion-content {

src/sass/functions.scss

@@ -0,0 +1,37 @@
+/*
+ * To replace characters in a 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;
+}
+
+/*
+ * To create an optimized svg url
+ */
+@function svg-url($svg) {
+    /*
+     * Chunk up string in order to avoid
+     * "SystemStackError: stack level too deep"
+    */
+    $encoded: '';
+    $slice: 2000;
+    $index: 0;
+    $loops: ceil(str-length($svg)/$slice);
+    @for $i from 1 through $loops {
+        $chunk: str-slice($svg, $index, $index + $slice - 1);
+        $chunk: str-replace($chunk,'"','\'');
+        $chunk: str-replace($chunk,'<','%3C');
+        $chunk: str-replace($chunk,'>','%3E');
+        $chunk: str-replace($chunk,'&','%26');
+        $chunk: str-replace($chunk,'#','%23');
+        $encoded: #{$encoded}#{$chunk};
+        $index: $index + $slice;
+    }
+    @return url("data:image/svg+xml;charset=utf8,#{$encoded}");
+}