我正在尝试使用 Vue.JS
构建 Web 应用程序,并且在我的应用程序中,我尝试使用 [Bootstrap Icons][1]
。但是由于某种原因,即使添加了图标,它们也不会出现在屏幕上。
我做了以下步骤:
Bootstrap Icons
安装到应用程序中:npm install bootstrap-icons
安装后,我可以在我的 package.json
文件中看到它。
Main.js
文件:import 'bootstrap-icons/font/bootstrap-icons';
<template>
<button type="button" class="btn btn-secondary copy" @click="copyXML()">Copy<i class="bi bi-clipboard"></i></button>
</template>
这对我的按钮文本没有任何影响。我仍然只能看到按钮上的 Copy
文字。
根据文档,还有另一种添加图标的方法。当我添加 SVG
时,我会得到图标:
<button type="button" class="btn btn-secondary copy" @click="copyXML()">Copy<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-archive" viewBox="0 0 16 16">
<path d="M0 2a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1v7.5a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 1 12.5V5a1 1 0 0 1-1-1V2zm2 3v7.5A1.5 1.5 0 0 0 3.5 14h9a1.5 1.5 0 0 0 1.5-1.5V5H2zm13-3H1v2h14V2zM5 7.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z"/>
</svg></button>
我不明白为什么只有 SVG
有效,是不是可以只添加 <i class="bi bi-clipboard"></i>
并获取图标?
这可能是一个愚蠢的问题,但我正在寻找 Vuejs 应用程序中图标的一些解释和用法。
答案 0 :(得分:0)
最后,我找到了解决方法。大多数 npm
软件包不支持最近发布的 Vuejs 3.x
。
解决方法不是将其安装为 npm library
,而是将直接 js
或 CDN link
包含到我们的应用程序中。
我将以下 CDN
添加到我的 index.html
并且对我有用:
<!-- Bootstrap Icons Starts -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
<!-- Bootstrap Icons Ends -->