JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block block--mod1"></div>
<div class="block block--mod2"></div>

SCSS

:root {
--icon-name: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M64 164V408a56 56 0 0 0 56 56H392a56 56 0 0 0 56-56V164a4 4 0 0 0-4-4H68A4 4 0 0 0 64 164ZM331 315.63l-63.69 63.68a16 16 0 0 1-22.62 0L181 315.63c-6.09-6.09-6.65-16-.85-22.38a16 16 0 0 1 23.16-.56L240 329.37V224.45c0-8.61 6.62-16 15.23-16.43A16 16 0 0 1 272 224V329.37l36.69-36.68a16 16 0 0 1 23.16.56C337.65 299.62 337.09 309.54 331 315.63Z'/%3E%3Crect x='32' y='48' width='448' height='80' rx='32' ry='32'/%3E%3C/svg%3E");

--icon-name2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M454.65 169.4A31.82 31.82 0 0 0 432 160H368V144a112 112 0 0 0-224 0v16H80a32 32 0 0 0-32 32V408c0 39 33 72 72 72H392a72.22 72.22 0 0 0 50.48-20.55A69.48 69.48 0 0 0 464 409.25V192A31.75 31.75 0 0 0 454.65 169.4ZM176 144a80 80 0 0 1 160 0v16H176Z'/%3E%3C/svg%3E");;
}

.block {
  & + & {
    margin-top: 20px;
  } 
  
  &::before {
    content: "";
    display: block;
    width: 50px;
    height: 50px;
    mask: var(--icon) no-repeat center;
  }
}

.block--mod1 {
  --icon: var(--icon-name);
  
  &::before {
    background: red; 
  }
}

.block--mod2 {
  --icon: var(--icon-name2);
  
  &::before {
    background: blue; 
  }
}