Как использовать значки начальной загрузки как svgs в проекте vue, созданном vue-cli

статическая ссылка

Вы можете использовать ярлык ~ для ссылки на активы в 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>