如何将Kibana中所有默认Logo替换为自定义Logo

一、加载页Logo替换 #

你找不到对应代码的核心原因是旧教程大多针对未编译的Kibana源码，如果你使用的是官方编译好的生产安装包，直接修改打包后的bundle文件即可，操作路径如下：

1. 打开对应版本的目标文件：7.x版本路径为kibana/optimize/bundles/kibana.bundle.js，8.x版本路径为kibana/x-pack/plugins/security/target/public/security.chunk.*.js
2. 搜索关键词createElement("svg"+logo关联字段，定位到Logo对应的React创建代码段
3. 你提到的示例代码不能直接复制使用，需要将其中的base64内容替换为你自己的自定义Logo编码，正确修改示例如下：

// 原代码
const logo = _react.default.createElement("svg", {…})

// 修改后代码
const logo = _react.default.createElement("img", {
  src:'data:image/png;base64,替换为你自己的Logo完整base64编码',
  width:'100px', // 可根据你的Logo尺寸自定义调整
  alt:'custom logo'
})

二、导航栏Logo不显示问题修复 #

你之前的修改方式错误，iconType是EUI组件库的内置图标标识参数，仅支持传入官方预设的图标名称，不支持直接传入base64编码，正确修改方式如下：
找到原本的代码段：

EuiHeaderLogo"],{"data-test-subj":"logo",iconType:"logoElastic"

替换为以下内容：

EuiHeaderLogo"],{"data-test-subj":"logo", 
  href: "/app/home", 
  children: _react.default.createElement("img", {
    src: "data:image/png;base64,替换为你自己的导航栏Logo完整base64编码",
    style: {height: "32px", width: "auto", objectFit: "contain"}
  })

三、修改后生效操作 #

• 删除Kibana缓存目录下的所有文件：kibana/optimize/.cache/
• 重启Kibana服务
• 浏览器端按Ctrl+Shift+R强制刷新，清除本地缓存

注意事项 #

• 转码Logo时要确保base64编码完整，必须包含data:image/[png/jpg/svg];base64,前缀，不要遗漏结尾的标点
• 8.x及以上版本的Kibana支持官方配置自定义Logo，无需修改源码，直接在kibana.yml中添加xpack.security.ui.customLogo: "你的base64编码"即可生效
• 所有修改前请提前备份原文件，避免修改错误导致Kibana无法启动

内容的提问来源于stack exchange，提问作者Python-97