角闪烁的图标

【问题标题】：Angular flickering icons角闪烁的图标
【发布时间】：2021-02-17 23:30:23
【问题描述】：

我用 Angular 11 和 bootstrap 和 bootstrap-icons 实现了一个简单的按钮。当我路由显示按钮的页面时，按钮会立即加载。但只有在大约 500 毫秒后，图标才会弹出并且看起来像是在闪烁。

我怎样才能摆脱这种行为？它也会出现在列表视图等中的图标上。

 <button
  type="button"
  class="btn btn-secondary float-right w-25 mb-3"
 >
  <svg width="24" height="24">
    <use xlink:href="assets/bootstrap-icons/bootstrap-icons.svg#plus" />
  </svg>
  Test
</button>

【问题讨论】：

标签： css angular bootstrap-4 bootstrap-icons

【解决方案1】：

您可以使用下面的npm 命令直接将引导图标安装到您的 Angular 项目中。

npm i bootstrap-icons

然后使用如下图标。（例如：+ 图标）

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus" viewBox="0 0 16 16">
   <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
</svg>

这将消除闪烁的行为。

【讨论】：