如何在有角度的项目中以编程方式使用引导图标? [英] How to programmatically use bootstrap icons in an angular project?

问题描述

以下是

如果要完全使用它，我正在尝试弄清楚如何使用该软件包.他们的使用选项都没有说出我在6秒钟前被告知要安装的软件包的任何内容.

我只是不明白，如果我应该做的就是复制所需的svg然后卸载软件包，为什么文档会告诉我要安装软件包.

按照实际的源代码控制的精​​神，我是否可以通过某种方法将其导入角度组件中?

响应于为什么我不按照答案中的建议使用以下html的原因< svg class ="bi bi-chevron-right" width ="32" height ="32" viewBox ="0 0 20 20" fill ="currentColor" xmlns ="http://www.w3.org/2000/svg">< path fill-rule ="evenodd" d ="M6.646 3.646a.5.50 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L12.293 10 6.646 4.354a.5.5 0 010-.708z"clip-rule =" evenodd"/</svg>

是因为它根本不使用引导程序图标库.粘贴到您的响应中进行演示，并且堆栈溢出不使用引导程序.

解决方案

很老了，但是由于我遇到了同样的问题，而且这些答案根本没有用，所以这是我想出的解决方案.

首先安装引导程序图标包(--save还将其添加到您的依赖项中):

  $ npm i bootstrap-icons-保存 

然后将此行添加到您的styles.css文件中:

  @import``〜bootstrap-icons/font/bootstrap-icons.css"; 

现在就可以使用Frmo，可以在应用程序中的任何地方使用它，就像引导文档所希望的那样:

 < i class ="bi bi-star-fill-"</i> 

Here is the official bootstrap documentation on the usage of their icons:

I'm trying to figure out how to use the package, if I'm supposed to be using it at all. None of their usage options say anything about the package I was told to install 6 seconds ago.

I just don't understand why the documentation would tell me to install the package if all I was supposed to do was copy the svg's I needed and then uninstall the package.

Is there some way for me to import one into an angular component, in the spirit of actual source control?

EDIT: in response to why I'm not using the following html as recommended in an answer <svg class="bi bi-chevron-right" width="32" height="32" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6.646 3.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L12.293 10 6.646 4.354a.5.5 0 010-.708z" clip-rule="evenodd"/></svg>

is because this doesn't use the bootstrap icon library at all. Pasted into your response for demonstration, and stack overflow doesn't use bootstrap.

解决方案

Quite old, but since I had the same problem and these answers where not helpful at all, here is the Solution I came up with.

First install the bootstrap icons package (--save adds it to your dependencies as well):

$ npm i bootstrap-icons --save

Then add this line to your styles.css file:

@import "~bootstrap-icons/font/bootstrap-icons.css";

Frmo now on you can use it anywhere in your app, just like intended by the bootstrap documentation:

<i class="bi bi-star-fill"></i>

这篇关于如何在有角度的项目中以编程方式使用引导图标?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！