style.scss

//  Function to create an optimized svg url
@function svg-url($svg){
	$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}");
}

//  Helper function 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;
}

// Left-facing arrow background svg
@function leftArrow($fillColor) {
  @return svg-url('<svg xmlns="http://www.w3.org/2000/svg" width="266" height="400"><path fill="' + $fillColor + '" d="M126 0L0 200l126 200h140L140 200 266 0"/></svg>');
}

// Right-facing arrow background svg
@function rightArrow($fillColor) {
	@return svg-url('<svg xmlns="http://www.w3.org/2000/svg" width="266" height="400"><path fill="' + $fillColor + '" d="M140 400l126-200L140 0H0l126 200L0 400"/></svg>');
}