replace SVG source to dataURI in Sass

.scss

// -----------------------------------------------------------------
// 文字列置換
// @param {string} $string - 元となる文字列
// @param {string} $search - 検索する文字列
// @param {string} $replace - 置換する文字列
// @return {string} 置換された文字列
// @example
// `str-replace( 'abcd', 'bc', 'BC');`
// // 'aBCd'
// -----------------------------------------------------------------
@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;

}


// -----------------------------------------------------------------
// SVGソースのdataUri化
// @param {string} $svgSrc - SVGソース
// @return {string} dataUrl化された文字列
// -----------------------------------------------------------------
@function svgToUri ( $svgSrc ) {
  
  $res: str-replace( $svgSrc, '<', '%3C');
  $res: str-replace( $res, ' ', '%20');
  $res: str-replace( $res, '"', '%22');
  $res: str-replace( $res, '#', '%23');
  $res: str-replace( $res, '>', '%3E');

  @return 'data:image/svg+xml,' + $res;

}