Как применить класс к svg onclick?

Question

У меня есть svg, для которого онклик цвет svg (должен изменить на белый) и контейнер (icon_container), который содержит его, должен измениться на синий.как мне это сделать.Ниже приведен фрагмент кода,

state = {
  active: false,
};

click = () => {
  this.setState({active: !this.state.active});
};

render = () => {
  const classes = ['icon_container'];
  if (this.state.active) {
    classes.push('active');
  }

  return (
    <div className={classes.join(' ')}>
      <SvgLayer className="icon" onClick={this.click}/>
    </div>
  );
};

icons {
  margin-top: 16px;
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: absolute;
  right: 16px;

  .icon_container {
    background-color: white;

    .icon {
      height: 16px;
      width: 16px;

      * {
        fill: blue;
      }
    }
  }
}

Я пробовал что-то подобное ниже, чтобы изменить цвет SVG на белый, а icon_container на синий ..., но не работает.

.active.icons.icon_container {
  background-color: blue;
}

Может кто-то помочьмне с этим.спасибо.

Answer 1

html:

в теле выше использования svg поместите ваш svg в html, например:

вставьте это использование svg там, где вы хотите его использовать:

<svg id="icon-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100">
    <use xlink:href="#icon"></use>
</svg>

css: установить цвет:

#icon-svg use
{
    fill: #000;
}

изменить цвет при наведении:

#icon-svg use:hover, 
#icon-svg use:active, 
#icon-svg use:focus
{
    fill: #fff;
}

Полезная ссылка: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use