在 JS 中更改羽毛图标

Question

我正在使用 feathericons，我希望通过单击 ID 为 powerOn 的图标来简单地更改 data-feather 属性。这是一个简单的电源按钮。

我试过了：

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

但这不起作用。我还看到 API 有一个 replace() 函数，但不太明白如何在这种情况下应用它。

我希望在再次单击按钮后将图标切换回初始状态，如下所示：

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

JS 新手和 JQuery 以及 library .

这是我的 HTML:

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

更新：更正了问题中的拼写错误以包含元素 ID 的主题标签。

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> 标签，因此该图标不会始终出现。

Change feather icon in JS