最近，众多的网站开始采用 PWA 技术，将其网站转化为一个类似于原生应用的模式。而其中，一个关键的因素就是网站所能够提供的图标。如果您正在开发一个 PWA 应用，不妨使用 pwa-manifest-icons 这个 NPM 包来完成图标的设置。
安装
首先，我们需要使用 npm 来安装 pwa-manifest-icons 这个包：
npm install pwa-manifest-icons
安装成功后，你可以在你的项目中引入它：
const PwaManifesticons = require('pwa-manifest-icons');使用
pwa-manifest-icons 允许你设置应用的图标。首先，你需要指定要创建的各种图标的尺寸。例如，如果你希望创建一个 144 乘 144 px 的图标，你可以像这样指定尺寸配置：
const icons = [
{ "src": "icons/icon-144x144.png", "sizes": "144x144", "type": "image/png" }
];上述代码中的对象包含了三个键值对。
src：图标资源的路径。sizes：图标的尺寸。type：图标文件的 MIME 类型。
接下来，您需要调用 generateIcons(icons, outputFolderPath) 方法来生成图标：
PwaManifesticons.generateIcons(icons, './icons', null);
上述代码的第三个参数有一个默认值，null。你可以传递一个可选的回调函数，当生成图标完成时将被调用：
PwaManifesticons.generateIcons(icons, './icons', () => {
console.log('Icons generated successfully!');
});示例代码
下面是一个完整示例的代码。它将在 ./icons 文件夹中生成三个不同尺寸的 PNG 图标，并且在生成成功后输出一条消息到控制台：
-- -------------------- ---- -------
----- ---------------- - ------------------------------
----- ----- - -
- ------ ------------------------- -------- ---------- ------- ----------- --
- ------ ------------------------- -------- ---------- ------- ----------- --
- ------ ------------------------- -------- ---------- ------- ----------- -
--
------------------------------------- ---------- -- -- -
------------------ --------- ----------------
---结论
使用 pwa-manifest-icons 可以让您轻松生成各种尺寸的图标，为您的 PWA 应用程序提供了更好的用户体验。此外，这个包非常易于使用，尤其是在您对 PWA 开发非常了解的情况下。因此，请尽快在您的应用程序中尝试使用该包，并为您的用户提供更好的服务体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057bac81e8991b448eb91f