前言
在前端开发中，使用图标是必不可少的。常见的图标库有 Font Awesome、Material Icons 等，它们都很好用。但有时候需要使用另外一些图标，这时候可以使用 bootstrap-material-design-icons。
bootstrap-material-design-icons 是基于 Google Material Design 风格的图标库，可以用于项目中的按钮、表单、面包屑等元素。本文将介绍如何使用这个 npm 包。
安装
使用 npm 安装很简单，只需运行以下命令即可：
npm install bootstrap-material-design-icons --save
使用
在 HTML 中使用
在 HTML 中使用 bootstrap-material-design-icons 很简单，只需要在需要使用图标的地方添加相应的标签即可。例如，添加一个带有 home 图标的按钮：
<button type="button" class="btn btn-primary"> <i class="material-icons">home</i> Home </button>
可以看到，图标的标签使用 <i>，class 为 material-icons，内容为需要显示的图标名称。
如果要使用具体的图标名称，可以在官方文档中查找。官方文档地址
在 CSS 中使用
你也可以直接在 CSS 代码中使用 bootstrap-material-design-icons，
只需导入相关的 CSS 文件即可使用：
-- -------------------- ---- ------- -- -- --- -- ------- ---------------------------------------------------------- -- -- ---- -- ----- - ------------ --------- ------- ------------ ------- ----------- ------- ---------- ----- ------------ -- --------------- ------- --------------- ----- -------- ------------- ------------ ------- ---------- ------- ---------- ---- ------------------------------ ------- ----------------------- ------------ ------------- ----- - -- ---- -- ---- -----------------------
在 Vue、React 中使用
在 Vue、React 中同样可以使用 bootstrap-material-design-icons。
- Vue：在组件中添加相应的标签即可。
-- -------------------- ---- -------
----------
------- ------------- ---------- -------------
-- ------------------------------- ----
---------
-----------
--------
------ --------------------------------------------------------
------ ------- --
---------- React：同理，在组件中添加相应的标签即可。
-- -------------------- ---- -------
------ ----- ---- -------
------ --------------------------------------------------------
----- ------ - -- -- -
------ -
------- ------------- -------------- -------------
-- ----------------------------------- ----
---------
-
-总结
本文介绍了使用 npm 包 bootstrap-material-design-icons 的方法，并提供了多种使用方式。它不仅能让你写出更好看的前端样式，还能让你更快更高效地完成工作。希望本文能给你带来帮助，谢谢阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c81ccdc64669dde4cfb