【thingsboard】替换首页logo的方法

参考教程：https://my.oschina.net/sukf/blog/3108354

一、按如下尺寸设计新的LOGO
a. logo.png ----- 128x128,
b. thingsboard.ico ----- 320x320
c. logo_title_white.svg ----- 1536x318 SVG 32-bit
（这个比例亲测后发现有问题，后来改为153*36，但是存在logo偏移的情况，需要另外修改scss文件内容，文章末尾有补充说明）
d. logo_white.svg ----- 320x320 SVG 32-bit

分别替换到以下路径
a. thingsboard-2.4\img\logo.png
b. thingsboard-2.4\ui\src\thingsboard.ico
c. thingsboard-2.4\ui\src\svg\logo_title_white.svg
d. thingsboard-2.4\ui\src\svg\logo_white.svg

二、修改内容

1.分别修改文件 thingsboard-2.4\ui\webpack.config.prod.js 和 webpack.config.dev.js两个文件
搜索 HtmlWebpackPlugin 找到下图的位置
例如：
原标题：Thingsboard >>> 改为 >>> 新标题：XXX

2.修改文件 thingsboard-2.4\ui\src\app\app.run.js
搜素关键字pageTitle找到下图的位置

例如：
原标题：Thingsboard >>> 改为 >>> 新标题：XXXX

3.重命名thingsboard.ico （图省事也可以沿用原文件名 只要覆盖图片文件即可）

原文件名：thingsboard.ico >>> 改为 >>> 新文件名：hsiot.ico

1）重命名文件 thingsboard.ico >>> hsiot.ico

thingsboard-2.4\ui\src\thingsboard.ico

2）修改文件内容 thingsboard.ico >>> hsiot.ico

三、 重新打包

mvn clean package

（这个过程很慢，如果要反复尝试，可以换成UI热编译，详情参考热编译配置的文章
https://blog.csdn.net/liuli283/article/details/93479955）

补充情况：
1.原教程中第六步替换thingsboard.jar
thingsboard\lib\thingsboard.jar（这一步没有看懂，没做也不影响效果，可以忽略）
2.由于在实际修改的时候发现logo_title_white.svg按1536x318比例无法正常显示，改为153*36，但是存在logo偏移的情况，因此附上样式修改scss的步骤。
（1）全局搜索tb-logo-title
找到这三个文件（可以只修改ui\src\app\layout\home.scss但是需要重新编译和清理缓存否则可能会有问题，最好直接手动修改三个文件）：

（2）按实际需要修改logo偏移样式。（如果以下参考css代码的显示效果不符合实际需要，可以在浏览器F12，预调整样式获取合适的css代码再作修改）
本人成功调整偏移的代码如下（左侧是修改前右侧是修改后）：

md-icon.tb-logo-title{
width:600px;
height:40px;
margin-left:-180px;
}

最后推荐svg的在线编辑网页：

http://tools.jb51.net/static/api/svg/index.html（最为规范，兼容性最好）
https://www.zhangxinxu.com/sp/svg/