我嘗試在我的 vue 專案中使用 bootstrap-icons 庫，現在我只匯入 CSS 檔案，這樣我就可以用作圖示字體（“i”標簽）。但我想將它們用作 svg，這樣我就可以使用線性 -顏色填充的漸變。
我將引導圖示安裝到我的專案中
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 構建了這個專案。我無法弄清楚這個問題是怎么回事，我也沒有在互聯網上找到解決方案。有沒有人遇到過同樣的問題？
uj5u.com熱心網友回復：
靜態鏈接
您可以使用快捷方式在（請參閱此處~）中參考資產：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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/464171.html