JSFiddle - React, Tailwind, and code Playground

by Genri_Rus

HTML

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <symbol id="menu-white" viewBox="0 0 42 42">
    <circle class="circle-big" cx="20" cy="20" r="19" stroke-width="2" />
    <circle class="circle-small" cx="19.5" cy="10.5" r="2.5" />
    <circle class="circle-small" cx="19.5" cy="19.5" r="2.5" />
    <circle class="circle-small" cx="19.5" cy="28.5" r="2.5" />
  </symbol>
</svg>

<svg width="200" height="200">
  <use xlink:href="#menu-white" />
</svg>

CSS

/* Обычное состояние */
#menu-white .circle-big {
  fill: #f0f;
}

#menu-white .circle-small {
  fill: #fff;
}

/* Состояние :hover */
#menu-white:hover .circle-big {
  fill: #fff;
}

#menu-white:hover .circle-small {
  fill: #f0f;
}


/* Просто */
*, :before, :after {
  box-sizing: border-box;
}

body {
  background-color: #000;
}