前言
在前端开发中，图标的使用往往是不可避免的，而天气图标则是在许多应用中经常出现的。本文将介绍一个使用方便的 npm 包 weather-icons-lite，它提供了一套精美的天气图标，并且使用与配置都十分简单。
安装
使用 npm 安装 weather-icons-lite：
npm i weather-icons-lite --save
使用
在 HTML 中引入 dist 目录下的 CSS 文件和对应主题的字体文件。例如，如果要使用蓝色主题，则应该在 HTML 文件中添加以下代码：
<link rel="stylesheet" href="node_modules/weather-icons-lite/dist/css/weather-icons.min.css"> <link rel="stylesheet" href="node_modules/weather-icons-lite/dist/css/weather-icons-wind.min.css"> <link rel="stylesheet" href="node_modules/weather-icons-lite/dist/css/weather-icons-blue.min.css">
其中，weather-icons.min.css 是必需的，它包含了所有天气图标的 CSS 样式；weather-icons-wind.min.css 包含了风向图标的 CSS 样式；weather-icons-blue.min.css 则是蓝色主题的 CSS 样式。
在需要使用天气图标的地方，添加对应的 HTML 标签即可。例如，如果需要显示 “晴天” 的图标，则可以使用以下代码：
<i class="wi wi-day-sunny"></i>
其中，wi 类名是 weather-icons.min.css 中定义的，day-sunny 是晴天的名称，可以在官方文档中找到对应的名称。同理，如果需要显示 “阴天” 的图标，则使用以下代码：
<i class="wi wi-day-cloudy"></i>
更多天气图标的名称可以在官方文档中找到。
示例
以下是一个简单的示例，展示了如何使用 weather-icons-lite 显示当天天气情况：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ---------------------- ----- ---------------- ---------------------------------------------------------------------- ----- ---------------- --------------------------------------------------------------------------- ----- ---------------- --------------------------------------------------------------------------- ------- ------ ------------- -- --------- ------------------ --------------- ---- -- --------- ------------------------- --------------- ------- -------
可以看到，我们在 HTML 文件中引入了三个 CSS 文件，并分别设置了不同的主题。然后，在页面上添加了两个天气图标和相应的文字说明。
总结
weather-icons-lite 是一款方便易用的 npm 包，它提供了一套精美的天气图标，并且使用起来非常简单。希望本文对你有所帮助，欢迎使用和提出宝贵意见！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64963