近年来随着前端技术的不断发展，npm 作为前端最重要的模块管理工具之一，对于前端开发者来说已经是必不可少的工具。而 npm 上的 pon-task-icon 这个包可以帮助前端开发者更方便地生成各种矢量图标。
pon-task-icon 是什么？
pon-task-icon 是一个基于 gulp-svg2png、gulp-svgstore 和 gulp-cheerio 的构建工具。它可以帮助你将多个 SVG 图标合并成一个 SVG sprite，并且同样可以将 SVG sprite 转换成 PNG 的多种尺寸以适应 Retina 屏幕。使用 pon-task-icon，可以方便创建可以直接在网页中使用的矢量图标。
如何安装 pon-task-icon？
在使用 pon-task-icon 之前，你需要先安装 npm 前置环境，并在命令行中输入以下代码进行安装：
npm install -g pon-task-icon
安装完成后，你就可以开始使用 pon-task-icon 了。
如何使用 pon-task-icon？
在使用 pon-task-icon 之前，你需要准备好需要转换的 SVG 图标。将这些图标放到一个指定的文件夹中即可。
基本命令
在准备好需要转换的 SVG 图标之后，你可以在命令行中输入以下代码执行 pon-task-icon：
pon-task-icon --source src/icons/**/* --output src/sprites/sprite.svg
上面的代码中，--source 参数指定了需要转换的 SVG 图标所在的文件夹，--output 参数指定了生成的 SVG sprite 的输出路径。
高级命令
- 使用多种尺寸的 PNG 转换 SVG sprite
pon-task-icon --source src/icons/**/* --output src/sprites/sprite.svg --png-dest src/sprites/png --png-sizes '16, 32, 64'
该命令会通过 --png-dest 参数指定生成的 PNG 文件的输出路径，通过 --png-sizes 参数指定生成的 PNG 文件的尺寸。
- 使用 CSS 声明 SVG sprite
pon-task-icon --source src/icons/**/* --output src/sprites/sprite.svg --style-dest src/styles/icons.scss
该命令会通过 --style-dest 参数指定生成的 CSS 样式表的输出路径。
结语
通过本文的介绍，相信读者对于如何使用 pon-task-icon 生成 SVG sprite 已经有了初步的了解。使用 pon-task-icon，相信可以大大简化前端开发者的工作。当然，我们还可以根据项目的需求进行一些高级的定制化操作。在使用 pon-task-icon 的过程中，需要注意版本的选择，以及合理的参数选择。最后，希望本文能够帮助读者更好地了解 pon-task-icon，实现更简单高效的前端开发工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/pon-task-icon