时间戳

首页 > 解决方案 > 在 bootstrap-vue 中使用自定义图标，或不同的方法？

vue.js - 在 bootstrap-vue 中使用自定义图标，或不同的方法？

问题描述

我有一个动态图标组件，它从我正在使用的数据中的字符串中获取其图标，如下所示：

<b-icon :icon="my-icon"></b-icon>

只要my-icon我的数据中的字符串与Bootstrap 图标列表中可用的内容匹配，它就可以很好地工作。但有时my-icon是一个完全自定义的字符串，我需要为其创建自定义 SVG。

是否可以选择提供与:icon道具一起使用的自定义图标<b-icon>？或者我应该避免<b-icon>在这种特殊情况下，而只使用另一种方法来动态拉出我的自定义图标以及Bootstrap 图标？

Vue中有这样的东西吗？

<svg class="bi" width="32" height="32" fill="currentColor">
  <use :xlink:href="'bootstrap-icons.svg#' + myIcon" />
</svg>

我想我必须建立自己的 bootstrap-icons.svg 文件——也许我可以从他们的文档中弄清楚。

本质上...

在将图标名称作为道具传递给 Vue 中的组件时，您如何使用图标包和您自己的自定义图标？

标签： vue.jsvuejs2bootstrap-vue

解决方案

据我所知，没有办法将自定义 SVG 公开到<b-icon>.

您可以改为构建一个包装器组件来包装<b-icon>，并将您自己的图标/SVG 合并到其中。首先检查传入的图标是否与您自己的任何图标匹配，如果不匹配则回退到<b-icon>.

或者，您可以查看 Bootstrap-Vue 如何在 GitHub 存储库上创建图标，并复制此方法来创建您自己的自定义组件。

推荐阅读