Tauri 项目更换默认图标（自定义应用桌面图标）

最新推荐文章于 2024-07-09 10:10:05 发布
最新推荐文章于 2024-07-09 10:10:05 发布
阅读量1.3k 收藏 5
点赞数 4
分类专栏： 基础 Tauri 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46329670/article/details/129004331
版权

为实现自定义图标，Tauri 提供了一个 tauricon 的命令，可以自动生成各种尺寸的图标。

使用方法

准备一个尺寸为1240 x 1240 的 PNG图片或者正方形的SVG ，文件命名为app-icon.png
将图片文件放置在项目的根目录
在这里插入图片描述

cd进入到项目根目录，执行npm run tauri icon命令
在这里插入图片描述
然后就会自动生成相关尺寸的图标，并自动应用到对应的位置
图标存放和应用路径为项目根目录下的src-tauri\icons\

之后再打包的话就会自动使用新图标了

七七码生
关注
专栏目录
使用Tauri自带命令生成各平台图标方法，超级简单，只需要一张png图片
04-19 1448
icon.icnsicon.ico*.png请注意，图标类型可以在上面列出的平台以外的平台上使用(特别是png) 因此，我们建议包括所有的图标，即使你打算只构建一个子集的平台。
Tauri 实战总结 系列二（窗口定制）
博客
01-02 3103
Tauri 生成的窗口顶部会有默认的标题栏，默认的效果有时候不符合我们项目需要，接下来我们来实现下如何自定义标题栏。
Tauri 系统托盘图标
豪先生的博客
11-19 857
你的项目/src-tauri/src/main.rs。
Tauri自带命令生成各平台图标
豪先生的博客
07-14 597
图片最好长宽比是1:1：(其他好像会报错)
pnpm tauri icon 一键转换 icon
天问博客-专注于大前端技术
02-01 750
在使用 Electron、Tauri 等框架开发桌面应用时，需要为应用生成不同平台的图标，如：MacOS 中的 icon.icns、Windows 中的 icon.ico、Linux 中的 *.png 等类型图标，这里介绍一种简单快捷一键转换图标的方法。
创建一个和tauri图标一致的icon和苹果icns图标
06-22 292
我们先看一下tauri的图标的样子，然后看一下tauri程序安装之后的样子，其实这里最困难的就是苹果设备的icon图标怎么搞，因为如果你设置的不合适，就会导致生成的苹果图标在安装后比较显大，有的不太好看。所以这里我们就模仿tauri原本的图标尺寸搞一个大小差不多的图标出来。大小和其他的图标差别不大了。
Tauri icon图标生成
九段刀客的博客
09-19 220
这里我制作了一个app-icon.png图标放在src-tauri/icons的目录下，官方推荐。
基于 tauri + vue3 开发的跨平台桌面端应用
03-24
我们使用 tauri 构建项目，使项目包更加小巧精简，资源占用更少，同时适配多个平台。 这意味着您可以在不同的操作系统上都能够使用 ChatGPT-Desktop，并且不会感到卡顿。 可以选择让 app 常驻后台，快捷键(支持...
vue-cli-plugin-tauri:将您的Vue SPA变成轻量级的跨平台桌面应用程序
04-28
是用于通过Web前端创建更小，更快，更安全的桌面应用程序的工具包。 该插件将Tauri配置为可在您的Vue CLI项目中使用。 安装 如果您有任何问题，请访问或我们的。 一般先决条件： NodeJS / npm Vue CLI（ yarn ...
Tauri:构建更小，更快，更安全的桌面应用程序-开源
04-30
使用Web前端构建更小，更快和更安全的桌面应用程序。 Brownfield与任何前端框架的兼容性意味着您不必更改堆栈。 使用Tauri可以进行牙线许可。 Tauri应用程序的捆绑包大小可以小于600KB。 安全是Tauri-Team的重中之重...
基于Rust的轻量级Redis桌面端可视化工具源码 - Tauri与Sciter分支
03-25
项目简介：这是一款基于Rust语言的轻量级Redis桌面端可视化工具，源码包含Tauri与Sciter两个分支。项目主要采用Html语言编写，辅以JavaScript、Rust和CSS等。文件总数76个，具体包括：图片(png)18个，网页(html)18个...
tauri-docs：所有tauri项目文档的来源
02-24
此命令将给定语言（默认为“ en”）的静态内容生成到build/${language}目录中，并且可以使用任何静态内容托管服务进行服务。 要针对所有启用的语言进行构建，请使用： node build.js support-languages.js是包含...
【Tauri + React 实战】VCluster - 配置应用图标与启动闪屏
m0_51810668的博客
07-16 911
本节我们将为 Tauri 应用自定义应用图标的启动闪屏。
【桌面应用开发】Rust+Tauri框架项目打包操作
linhao's 博客
05-03 2874
Tauri 提供了一个 tauricon 的命令，该命令可以输入图片路径（默认情况下为 ./app-icon.png，尺寸为 1240 x 1240 的 PNG ）来创建各种平台所需的所有图标。或者如果是第一次执行tauricon此命令则会提示需要安装命令，输入y回车等待安装就行​​生成好的图标默认放在 src-tauri/icons 目录下。
用Tauri+Vue3+TypeScript+Pinia写的基础类似百度云开发模板，支持国际化和主题切换，图片音视频播放等，可做图床视频床使用
06-09 1303
一个基础的tauri开发模板，具备国际化多语言切换，暗黑和亮白主题切换，注册登陆页面美化，动态路由自动构建左侧菜单列表，Pinia状态管理等等功能，开箱即用项目地址: https://github.com/Sjj1024/s-hub/tree/tauriv1.0 代码下载后，使用pnpm 安装依赖 运行程序：
tauri如何实现窗口拖动，自定义标题栏
最新发布
爱音乐的程序猿的博客
07-09 869
Tauri是一个开源框架，用于创建跨平台的桌面应用程序。它使用Rust编程语言，并结合了现有的Web技术，如HTML、CSS和JavaScript。Tauri旨在提供一个快速、可靠和安全的方式来构建本地应用程序，同时保持Web开发的灵活性和易用性。Tauri的目标是帮助开发者轻松创建高效的桌面应用程序，并提供一个统一的开发体验，使得跨平台开发变得更加简单和方便。这里我的窗口右上角图标使用的是ant-design-vue框架带的。我这里前端使用的是vue框架
Tauri的安装、启动、打包和很多用例(第一部分)
热门推荐
三巧的博客
02-27 1万+
Tauri的使用
Tauri + Rust 系统信息小工具
LeoForBest的博客
02-02 2393
Tauri + Rust 系统信息小工具
在vue中如何实现前端导入文件发送给后端进行数据库记录的批量添加
weixin_46329670的博客
12-12 2596
需求：在前端导入需要添加的信息的excel表，实现记录的批量插入 效果： 实现过程： 1、前端 (1)前端UI <div class="text-h2 pa-12"> <a href="这里填写你的文件路径(注：在vue项目中这个文件的路径需要放在你的此vue文件的同级目录下，否则可能找不到文件，且文件名最好不要有中文)" download="法律信息导入模板(此处为下载文件的命名).xlsx">点击下载法律信息导入模板</a> <v-file-i
vscode tauri
09-17
VSCode Tauri 是一个将 Visual Studio Code（简称 VSCode）与 Tauri 框架结合使用的工具。VSCode 是一个流行的开源代码编辑器，而 Tauri 则是一个用于构建跨平台桌面应用程序的框架。 通过将 VSCode 和 Tauri 结合使用，开发者可以在同一个项目中同时享受到 VSCode 的强大代码编辑功能和 Tauri 的跨平台桌面应用开发能力。这意味着开发者可以使用 VSCode 提供的丰富的代码编辑器功能，如代码补全、调试器等，来开发一个可在不同操作系统上运行的桌面应用。 VSCode Tauri 提供了一个简单易用的框架，使开发者能够使用常见的网页开发技术（如 HTML、CSS 和 JavaScript）来构建桌面应用程序。开发者可以使用现有的前端知识和工具来开发跨平台应用，而无需学习特定的桌面应用开发技术。 此外，VSCode Tauri 还提供了丰富的插件生态系统，开发者可以利用这些插件来扩展应用程序的功能和界面。这使得开发者能够快速构建出功能丰富、界面友好的跨平台桌面应用。 总之，VSCode Tauri 提供了一种便捷的桌面应用开发方式，它将 VSCode 的代码编辑能力与 Tauri 框架的跨平台能力相结合，使开发者能够快速构建出功能强大、跨平台的桌面应用程序。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值