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

Question

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

我在我的项目中安装了 bootstrap-icons

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 将值链接到 var，但它们都不起作用，抛出错误“找不到模块”或“获取 404”。我尝试将 bootstrap-icons 文档复制到 node_modules 之外并将其放在根目录下，将 xlink:href 的值更改为“bootstrap-icons/bootstrap-icons.svg#heart-fill”，但仍然不起作用。

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

Answer 1

静态链接

您可以使用

~

快捷方式在

node_modules

中引用资源（请参阅此处）：

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

动态链接

如果您需要动态绑定，您可以使用

require

返回所需 svg 文件的路径：

<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'

如果您想知道此行为是在哪里定义的，您可以检查默认的 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>

Answer 2

这是一个简单的总结，可供使用的组件（TypeScript 和组合 API）：

<script lang="ts" setup>
import iconPath from 'bootstrap-icons/bootstrap-icons.svg'

defineProps({
    name: {
        type: String,
        required: true
    },
    size: {
        type: Number,
        required: false,
        default: 32
    },
    fill: {
        type: String,
        required: false,
        default: 'currentColor'
    }
})
</script>

<template>
    <svg class="bi" :width="size" :height="size" :fill="fill">
        <use :xlink:href="`${iconPath}#${name}`"/>
    </svg>
</template>

您只需要

npm install bootstrap-icons

。