JSFiddle - React, Tailwind, and code Playground

SVG и кастомные свойства

by Ankhena

HTML

<svg class="svg-sprite" xmlns="http://www.w3.org/2000/svg">
  <symbol id="camera" viewBox="0 0 512 512">
    <rect fill="var(--color-1)" x="0" y="0" width="512" height="256" rx="30" ry="30"/>
    <rect fill="var(--color-2)" x="0" y="256" width="512" height="256" rx="30" ry="30"/>
    <path fill="var(--color-3)" d="M152 304c0 57.438 46.562 104 104 104s104-46.562 104-104-46.562-104-104-104-104 46.562-104 104zm328-176h-112c-8-32-16-64-48-64h-128c-32 0-40 32-48 64h-112c-17.6 0-32 14.4-32 32v288c0 17.6 14.4 32 32 32h448c17.6 0 32-14.4 32-32v-288c0-17.6-14.4-32-32-32zm-224 318c-78.425 0-142-63.574-142-142 0-78.425 63.575-142 142-142 78.426 0 142 63.575 142 142 0 78.426-63.573 142-142 142zm224-222h-64v-32h64v32z"/>
  </symbol>
</svg>

<div class="grid">
  <svg class="sprite-1">
    <use xlink:href="#camera"></use>
  </svg>

  <svg class="sprite-2">
    <use xlink:href="#camera"></use>
  </svg>
</div>

CSS

.svg-sprite {
  display: none;
}

.grid {
  display: grid;
  grid-auto-flow: column;
  justify-content: start;
  align-items: start;
  gap: 16px;
}

.sprite-1 {
  --color-1: red;
  --color-2: green;
  --color-3: blue;
  width: 150px;
  height: 150px;
}

.sprite-2 {
  --color-1: brown;
  --color-2: purple;
  --color-3: orange;
  width: 150px;
  height: 150px;
}