Изменить значок пера в JS

Question

Я использую перья и хочу просто изменить атрибут data-feather при щелчке значка с идентификатором powerOn. Это простая кнопка питания.

Я пробовал:

const powerOn = $('#powerOn');
powerOn.attr('data-feather', 'stop-circle');

, но это не сработало. Я также вижу, что API имеет функцию replace(), но не совсем понимаю, как ее применить в этом случае.

Я хочу вернуть значок в исходное состояние после повторного нажатия кнопки как в:

powerOn.attr('data-feather', 'power');

Новое для JS и JQuery и библиотеки .

Вот мой HTML:

<button id="connectId"
        onclick="connect()"
        class="btn btn-sm btn-success"><i id="powerOn" data-feather="power"></i> Power On</button>

Обновление : исправлена ​​рассматриваемая опечатка, чтобы включить хэштег для идентификатора элемента.

Answer 1

Попробуйте следующее:

const powerOn = $('#powerOn');
powerOn.replaceWith(feather.icons['stop-circle'].toSvg());

Answer 2

Мне нужно было заменить весь html, чтобы иметь возможность переключения, как в:

const connectId = $('#connectId');
connectId.html(feather.icons['power'].toSvg() + ' Power On');

и

connectid.html(feather.icons['stop-circle'].toSvg() + ' Power Off');

Используя только powerOn.replaceWith удалит тег <i>, поэтому значок не всегда будет отображаться.