前言
在前端开发中，我们经常需要在网站中添加一些状态标识，比如浏览器兼容性提示图标等。这时候就可以使用 npm 包 browser-badge，它可以快速添加浏览器兼容性的图标，并且支持自定义图标。
安装
在使用之前，我们需要先安装 browser-badge，使用以下命令即可：
npm install browser-badge --save
使用方法
在安装好 browser-badge 后，我们可以在项目中直接引入 browser-badge。接下来我们来看一下怎么使用。
首先，我们创建一个 HTML 页面，然后在 head 中引入 CSS 文件：
<head> <link rel="stylesheet" href="browser-badge/dist/browser-badge.min.css"> </head>
接下来，我们需要在 body 中添加一些元素，用于渲染浏览器兼容性提示图标。可以通过添加一个含有 data-browser 属性的元素来指定浏览器类型，然后添加一个含有 data-version 属性的元素来指定该浏览器的最低版本。
例如，我们要添加一个兼容 IE11 及以上浏览器的图标，可以这样写：
<body> <div data-browser="ie" data-version="11"></div> </body>
接下来，我们还需要在 body 的底部引入 JS 文件：
<body> <div data-browser="ie" data-version="11"></div> <script src="browser-badge/dist/browser-badge.min.js"></script> </body>
最后，我们只需要在 JS 文件中初始化 browser-badge 即可：
window.onload = function() { browserBadge.init(); };
这样，我们就可以在浏览器中看到兼容性提示图标了。
自定义图标
如果想要使用自定义的图标，可以将自定义的图标文件添加到项目中，并在 CSS 文件中修改相应的样式。
以下是默认图标的 CSS 样式：
-- -------------------- ---- ------- ------------------------ - -------- --- ----------- -------- ------ ---- ------- ---- -------------- ---- -------- ------ ------- - ---- ----- - ----------------- ----------------------------- - -------- ----- ------ ----- ---------- ------ ------- - - ----- -------- ------ - ----------------- ---------------------------- - -------- ------------------- ---------- ------ ------ ----- -------- ------ -展开代码
可以看到，我们可以通过修改 .browser-badge-ie:before 来修改图标样式。同时也可以通过修改 .browser-badge-version:before 和 .browser-badge-version:after 来修改版本号样式。
以下是使用自定义图标的方法，以修改成 Chrome 浏览器图标为例：
首先，我们需要准备一张图标，假设我们将其放在 images 文件夹下，并命名为 chrome.png。
然后，在 CSS 文件中添加以下样式：
-- -------------------- ---- ------- ---------------------------- - -------- --- ------ ----- ------- ----- -------- ------ ----------------- ------------------------- ---------------- -------- ------------------ ---------- -展开代码
最后，在 HTML 页面中指定浏览器类型为 "chrome" 即可：
<body> <div data-browser="chrome" data-version="latest"></div> <script src="browser-badge/dist/browser-badge.min.js"></script> </body>
这样，我们就可以自定义 Chrome 浏览器图标了。
总结
在本篇文章中，我们介绍了如何使用 npm 包 browser-badge 来添加浏览器兼容性提示图标，并且讲解了如何自定义图标。希望这篇文章对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c8bccdc64669dde52bf
