Белые значки SVG не видны, когда цвет фона черный

Question

У меня есть две иконки:

1. звонок - значок

2. Значок настройки

Они представлены в navbar, как вы можете видеть в правом углу на скриншоте:

Когда я надеваю значки цвета обёртки на черном фоне, значки больше не видны.

Нужна помощь, чтобы понять, почему.

Проверьте код:

HTML-КОД:

<div className="container">
  <header className="header">
    <nav className="user-nav">
      <div className="user-nav-item">
        <Link href="/">
          <a className="user-nav-item-link">Overview</a>
        </Link>
      </div>
      <div className="user-nav-item">
        <Link href="/search">
          <a className="user-nav-item-link">Search</a>
        </Link>
      </div>
      <div className="user-nav-item">
        <Link href="/feed">
          <a className="user-nav-item-link">Feed</a>
        </Link>
      </div>
      <h3 className="logo">Logo</h3>
    </nav>

    <div className="user-nav-icon">
      <div className="user-nav-icon-box">
        <img src={bellIcon} alt="notify icon" />
      </div>
      <div className="user-nav-icon-box">
        <img src={settingsIcon} alt="settings icon" />
      </div>
    </div>
  </header>
</div>

CSS-КОД:

.container {
  max-width: 100vw;
  display: flex;
  flex-direction: column;


.header {
  display: flex;
  align-items: center;
  height: 5rem;
  color: #fff;
  background-color: black;


    &-icon {
      display: flex;
      align-items: center;
      background-color: white;
      color: red;
      margin-right: 3rem;

      & > * {
        padding: 0 0.8rem;
        cursor: pointer;
      }

      &-icon-notification {
        color: red;
      }
    }
  }
}

Answer 1

Проблема в переопределении свойства заполнения SVG свойством color. Свойство color не работает с SVG. Ваша SVG-заливка черная. Либо используйте Inline SVG, либо создайте другой файл SVG со свойством fill: white.

.