изменить реагировать bootstrap значок переключения навигационной панели (стилизованные компоненты)

Question

Есть ли способ изменить значок кнопки Navbar.Toggle (React- bootstrap) на пользовательский, используя стилизованные компоненты?

Мне нужно отображать различные значки в соответствии с открыт ли / закрыт navbar

Answer 1

Да, вы можете изменить его, используя background-image свойство.

ПО УМОЛЧАНИЮ

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E)
}

Ваш lo go

.navbar-toggler-icon {
    background-image: url("yourpath_of_img")
}

С СТИЛЬНЫМИ КОМПОНЕНТАМИ

const Thing = styled.div`
  .navbar-toggler-icon {
      background-image: url("yourpath_of_img")
  }`