Bootstrap 5 icons, не обновляется иконка при замене класса через js.

"заного", значица... нууу

Проблема в том, что Bootstrap 5 использует CSS-классы для определения иконок, а не SVG-изображения. При замене класса jQuery обновляет CSS-стили элемента, но сам SVG-контент не меняется.

Вот как можно решить эту проблему, не удаляя и не создавая элемент заново:

1. Используйте JavaScript для замены SVG-контента

Получите доступ к SVG-элементу внутри иконки.
Замените контент SVG-элемента на новый контент, соответствующий новой иконке.
Пример:

<i class="test bi bi-person-fill-add someAnotherClass"></i>

<script>
$(document).ready(function() {
$('.test').click(function() {
let iconElement = $(this).find('svg')[0]; // Получаем элемент SVG
if (iconElement) {
if ($(this).hasClass('bi-person-fill-add')) {
// Заменяем контент на SVG новой иконки
iconElement.innerHTML = '<path d="M12 14a7 7 0 0 0 5-6v6h-5zM12 14a7 7 0 0 1 5-6v6h-5z"></path>';
$(this).removeClass('bi-person-fill-add').addClass('bi-person-fill-dash');
} else {
// Заменяем контент на SVG исходной иконки
iconElement.innerHTML = '<path d="M12 14a7 7 0 0 0 5-6v6h-5z"></path>';
$(this).removeClass('bi-person-fill-dash').addClass('bi-person-fill-add');
}
}
});
});
</script>
2. Используйте библиотеку для работы с SVG

Используйте библиотеку, например, Snap.svg, для манипулирования SVG-контентом.
Snap.svg позволяет вам изменять атрибуты и контент SVG-элементов, что может быть более удобным, чем ручная замена HTML.
Пример (с Snap.svg):

<i class="test bi bi-person-fill-add someAnotherClass"></i>

<script>
$(document).ready(function() {
$('.test').click(function() {
let iconElement = $(this).find('svg')[0]; // Получаем элемент SVG
if (iconElement) {
let snapElement = Snap(iconElement);
if ($(this).hasClass('bi-person-fill-add')) {
// Заменяем контент на SVG новой иконки
snapElement.select ('path').attr({ d: 'M12 14a7 7 0 0 1 5-6v6h-5z' });
$(this).removeClass('bi-person-fill-add').addClass('bi-person-fill-dash');
} else {
// Заменяем контент на SVG исходной иконки
snapElement.select ('path').attr({ d: 'M12 14a7 7 0 0 0 5-6v6h-5z' });
$(this).removeClass('bi-person-fill-dash').addClass('bi-person-fill-add');
}
}
});
});
</script>
Важные моменты:

Загрузка Snap.svg: Убедитесь, что вы подключили библиотеку Snap.svg к вашему проекту.
SVG-контент: Используйте правильный SVG-контент для каждой иконки, который соответствует классу иконки. Вы можете найти SVG-код для иконок Bootstrap в документации.
Повторное использование: Если вам нужно часто менять иконки, рассмотрите возможность создания функции, которая принимает класс иконки в качестве параметра и обновляет SVG-контент.
Надеюсь, эти методы помогут вам динамически менять иконки Bootstrap 5 с помощью JavaScript, не удаляя и не создавая элементы заново!