在前端应用中，我们经常需要使用一些图标来丰富界面信息，zooid-device-icon 就是一个提供大量设备图标的 npm 包，可以帮助我们快速定位和展示设备。
安装和使用
要使用 zooid-device-icon，需要先在项目中安装它。可以使用 npm 或 yarn 安装：
npm install zooid-device-icon
或
yarn add zooid-device-icon
引入后，在 HTML 或组件中使用 <i> 标签，设置 class 属性为对应的设备 ID，即可显示对应的设备图标。
<i class="zd-power-outlet"></i>
设备 ID
zooid-device-icon 中提供了众多的设备图标，可以通过查看官方文档获取每个设备的 ID。这里列举一些常见设备的 ID：
- 灯泡：
zd-bulb - 电源插座：
zd-power-outlet - 窗帘：
zd-curtains - 空调：
zd-air-conditioner - 扫地机器人：
zd-robot-vacuum - 洗衣机：
zd-washing-machine
自定义样式
默认情况下，zooid-device-icon 的样式是纯 SVG 的，可以通过 css 样式自定义它的颜色、大小、粗细等。
.zd-power-outlet {
color: green;
font-size: 24px;
font-weight: bold;
}示例
以下是一个简单的示例，包含了几个设备图标，以及对它们的自定义样式。你可以复制代码到本地，安装 zooid-device-icon 包后，运行查看效果。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------------------ ----------
-------
- -
------- - --- --- --
---------- -----
-
-------- -
------ -------
-
------------------- -
------ -----
-
------------------- -
------ -----
-
--------
-------
------
-- --------------------
-- ----------------------------
-- ------------------------
-- -------------------------------
-- ----------------------------
-- -------------------------------
-------
-------总结
zooid-device-icon 提供了常见设备的图标，可以在前端应用中快速引入并自定义样式。使用 zooid-device-icon 可以提高开发效率，美化界面，更加直观地展示设备信息。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/79947