如何在 vue-cli 构建的 vue 项目中使用 bootstrap-icons 作为 svgs

Question

我尝试在我的 vue 项目中使用 bootstrap-icons 库，现在我只导入 CSS 文件，这样我就可以用作图标字体（“i”标签）。但是我想将它们用作 svg，这样我就可以使用线性渐变来填充颜色。

我使用

在我的项目中安装了 bootstrap-图标

npm i bootstrap-icons

并尝试按照网站上的说明使用它们：

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

它不起作用，我尝试对 xlink:href 使用 require() 或使用 v-bind 将 link 值赋给 var，其中 none 有效，抛出“找不到模块”或“获取 404”错误。我试图将 bootstrap-icons 文档复制到 node_modules 之外并将其放在根目录下，将 xlink:href 的值更改为 "bootstrap-icons/bootstrap-icons.svg#heart-填充”，仍然无效。

我是一个 vue 菜鸟，我用 vue-cli 构建了这个项目。我无法弄清楚这个问题是怎么回事，也没有在 Internet 上找到解决方案。有人遇到过同样的问题吗？

Answer 1

静态link

您可以使用 ~ 快捷方式来引用 node_modules 中的资产（参见 here）：

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

动态link

如果您需要动态绑定，您可以使用 require returns 到所需 svg-file:

的路径这一事实

<template>
  <svg class="bi" width="32" height="32" fill="currentColor">
    <use :xlink:href="`${iconUrl}`"/>
  </svg>
</template>

<script>
const iconPath = require('bootstrap-icons/bootstrap-icons.svg');

export default {
  name: 'App',
  data() {
    return {
      iconUrl: iconPath + '#heart-fill'
    };
  }
};
</script>

你可以用 import 而不是 require 做同样的事情：

import iconPath from 'bootstrap-icons/bootstrap-icons.svg'

如果您想知道此行为的定义位置，您可以按照 here.

所述检查您的默认值 vue-cli webpack-config

字体

虽然这不是你所要求的，但你可以使用 CSS 图标字体而不是 svg:

<template>
  <i :class="iconClass" style="font-size: 32px;"></i>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      iconClass: 'bi-heart-fill'
    };
  }
};
</script>

<style>
  @import "bootstrap-icons/font/bootstrap-icons.css";
</style>

如何在 vue-cli 构建的 vue 项目中使用 bootstrap-icons 作为 svgs

How to use bootstrap-icons as svgs in a vue project build by vue-cli

icons

twitter-bootstrap

vue.js

vue-cli

静态link

动态link

字体