JSFiddle - React, Tailwind, and code Playground

by RedEagle69

SCSS

/* ==from https://codepen.io/jakob-e/pen/doMoML       */

@function svg-url($svg) {
  //    
  //  Chunk up string in order to avoid 
  //  "stack level too deep" error
  //     
  $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); //
    //   Encode (may need a few extra replacements)
    //
    $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; 
}

/* custom mixin to replace a defined class with another one */
@function svg-url-with-replaced-class($svg, $class-to-replace, $new-class) {
  $replaced-svg: str-replace($svg, 'class="#{$class-to-replace}"', 'class="#{$new-class}"');
  $replaced-svg-url: svg-url('#{$replaced-svg}');
  @return $replaced-svg-url;
}

$svg-icon-code: '
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 380 300">
  <style>
    .body {
      fill: #fff;
    }
    .color_4 {
      fill: #fc96a7;
    }
    .color_5, .star_3 {
      fill: #fbaba6;
    }
    .color_3, .star_1 {
      fill: #fdee9d;
    }
    .color_2 {
      fill: #bb93dd;
    }
    .color_1 {
      fill: #9be1e5;
    }
    .color_6 {
      fill: #fce3e6;
    }
    .star_2 {
      fill: #9bd9d8;
    }

    .nofill .color_1,
    .nofill .color_2,
    .nofill .color_3,
    .nofill .color_4,
    .nofill .color_5,
   ...