Project Icon

vue-pwa-asset-generator

Vue PWA应用图标资源自动生成工具

vue-pwa-asset-generator是一个为Vue PWA应用自动生成图标资源的工具。它能从单个512x512 PNG或SVG源文件创建多种尺寸的图标,适用于Android、iOS和favicon等。工具还会生成包含图标信息的manifest.json文件,简化了PWA开发中的资源准备工作。通过命令行操作,开发者可以轻松使用该工具,并可自定义输出目录和背景颜色。

Vue PWA 资源生成器

npm npm

简述:

npx vue-pwa-asset-generator -a {512x512_png源文件 | svg源文件} [-o {输出文件夹} [-b {备用背景颜色}]]

这个包为你创建了所有在使用PWA插件的VueJS应用中默认使用的资源,以及一个设置了icons属性的manifest JSON文件。

演示

安装

你可以像上面展示的那样使用npx,或者你可以全局安装它:

npm install --global vue-pwa-asset-generator

或者

yarn global add vue-pwa-asset-generator

或者

pnpm global add vue-pwa-asset-generator

使用方法

VueJS PWA 资源生成器有一个vue-asset-generate命令,带有两个参数:

  • -a:输入资源,可以是SVG文件或PNG文件(最大图像为512x512的png图像)。
  • -o:输出文件夹(如果不存在则创建)。此参数是可选的,默认情况下,vue-pwa-asset-generator会假设命令在VueJS项目中运行。因此manifest.jsonfavicon.icopublic文件夹中,其余的在public/img/icons文件夹中。
  • -bico图像的备用背景颜色。
  • --no-manifest:不生成manifest.json文件的选项。

示例

  • vue-asset-generate -a logo.png -o img
  • vue-asset-generate -a logo.svg
  • vue-asset-generate -a logo.svg -o img
  • vue-asset-generate -a logo.svg -o img -b 182C61
  • vue-asset-generate -a logo.svg -o img -b "#9AECDB"

"嘿,我正在使用Vue的pwa插件。我应该把manifest json放在哪里?"

你可以在vue.config.js文件中配置你的PWA。

这里有一个如何合并创建的manifest.json和你的配置文件的例子:

module.exports = {
  // ... 其他配置
  pwa: {
    themeColor: "#130f40",
    msTileColor: "#130f40",
    name: "我的应用",
    manifestOptions: {
      icons: [
        {
          src: "./img/icons/android-chrome-192x192.png",
          sizes: "192x192",
          type: "image/png",
        },
        {
          src: "./img/icons/android-chrome-512x512.png",
          sizes: "512x512",
          type: "image/png",
        },
        {
          src: "./img/icons/android-chrome-maskable-192x192.png",
          sizes: "192x192",
          type: "image/png",
          purpose: "maskable",
        },
        {
          src: "./img/icons/android-chrome-maskable-512x512.png",
          sizes: "512x512",
          type: "image/png",
          purpose: "maskable",
        },
        {
          src: "./img/icons/apple-touch-icon-60x60.png",
          sizes: "60x60",
          type: "image/png",
        },
        {
          src: "./img/icons/apple-touch-icon-76x76.png",
          sizes: "76x76",
          type: "image/png",
        },
        {
          src: "./img/icons/apple-touch-icon-120x120.png",
          sizes: "120x120",
          type: "image/png",
        },
        {
          src: "./img/icons/apple-touch-icon-152x152.png",
          sizes: "152x152",
          type: "image/png",
        },
        {
          src: "./img/icons/apple-touch-icon-180x180.png",
          sizes: "180x180",
          type: "image/png",
        },
        {
          src: "./img/icons/apple-touch-icon.png",
          sizes: "180x180",
          type: "image/png",
        },
        {
          src: "./img/icons/favicon-16x16.png",
          sizes: "16x16",
          type: "image/png",
        },
        {
          src: "./img/icons/favicon-32x32.png",
          sizes: "32x32",
          type: "image/png",
        },
        {
          src: "./img/icons/msapplication-icon-144x144.png",
          sizes: "144x144",
          type: "image/png",
        },
        {
          src: "./img/icons/mstile-150x150.png",
          sizes: "150x150",
          type: "image/png",
        },
      ],
    },
  },
};

⚠️

当从png文件生成资源时,生成器会为safari-pinned-tab.svg图标创建一个黑白svg,可能需要进行一些手动修改。

我希望这对你像对我一样有用!♥

项目侧边栏1项目侧边栏2
推荐项目
Project Cover

豆包MarsCode

豆包 MarsCode 是一款革命性的编程助手,通过AI技术提供代码补全、单测生成、代码解释和智能问答等功能,支持100+编程语言,与主流编辑器无缝集成,显著提升开发效率和代码质量。

Project Cover

AI写歌

Suno AI是一个革命性的AI音乐创作平台,能在短短30秒内帮助用户创作出一首完整的歌曲。无论是寻找创作灵感还是需要快速制作音乐,Suno AI都是音乐爱好者和专业人士的理想选择。

Project Cover

有言AI

有言平台提供一站式AIGC视频创作解决方案,通过智能技术简化视频制作流程。无论是企业宣传还是个人分享,有言都能帮助用户快速、轻松地制作出专业级别的视频内容。

Project Cover

Kimi

Kimi AI助手提供多语言对话支持,能够阅读和理解用户上传的文件内容,解析网页信息,并结合搜索结果为用户提供详尽的答案。无论是日常咨询还是专业问题,Kimi都能以友好、专业的方式提供帮助。

Project Cover

阿里绘蛙

绘蛙是阿里巴巴集团推出的革命性AI电商营销平台。利用尖端人工智能技术,为商家提供一键生成商品图和营销文案的服务,显著提升内容创作效率和营销效果。适用于淘宝、天猫等电商平台,让商品第一时间被种草。

Project Cover

吐司

探索Tensor.Art平台的独特AI模型,免费访问各种图像生成与AI训练工具,从Stable Diffusion等基础模型开始,轻松实现创新图像生成。体验前沿的AI技术,推动个人和企业的创新发展。

Project Cover

SubCat字幕猫

SubCat字幕猫APP是一款创新的视频播放器,它将改变您观看视频的方式!SubCat结合了先进的人工智能技术,为您提供即时视频字幕翻译,无论是本地视频还是网络流媒体,让您轻松享受各种语言的内容。

Project Cover

美间AI

美间AI创意设计平台,利用前沿AI技术,为设计师和营销人员提供一站式设计解决方案。从智能海报到3D效果图,再到文案生成,美间让创意设计更简单、更高效。

Project Cover

AIWritePaper论文写作

AIWritePaper论文写作是一站式AI论文写作辅助工具,简化了选题、文献检索至论文撰写的整个过程。通过简单设定,平台可快速生成高质量论文大纲和全文,配合图表、参考文献等一应俱全,同时提供开题报告和答辩PPT等增值服务,保障数据安全,有效提升写作效率和论文质量。

投诉举报邮箱: service@vectorlightyear.com
@2024 懂AI·鲁ICP备2024100362号-6·鲁公网安备37021002001498号