如何在Jenkins 2.479.1中替换原生SVG图标？

方法1：利用CSS属性选择器+父元素定位 #

原生SVG虽无类名/ID，但可通过自身属性（如fill颜色、viewBox尺寸）或父元素类定位，隐藏原SVG后给父容器设置自定义背景图。

针对原蓝色图标，可尝试以下CSS（需根据实际页面结构微调）：

/* 隐藏原蓝色SVG图标 */
.task-icon svg[fill="#4285f4"] {
  visibility: hidden;
}
/* 给父容器设置自定义图标 */
.task-icon {
  background-image: url('/userContent/custom-blue.png') !important;
  background-size: 16px 16px; /* 匹配原图标尺寸 */
  background-repeat: no-repeat;
  background-position: center;
}

若父元素无明确类名，可用:has()选择器直接匹配包含目标SVG的容器：

/* 匹配含特定fill值SVG的容器并设置背景图 */
div:has(svg[fill="#4285f4"]) {
  background-image: url('/userContent/custom-blue.png') !important;
  background-size: contain;
  background-position: center;
}
/* 隐藏原SVG */
div:has(svg[fill="#4285f4"]) svg {
  display: none;
}

注：:has()选择器需浏览器支持，Jenkins现代版本内置环境通常兼容。

方法2：使用Simple Theme Plugin插件 #

该插件比Custom CSS功能更全面，支持全局样式覆盖及页面元素替换。安装后在系统配置中，可直接填入自定义CSS或上传主题包，能更灵活地定位替换图标。

方法3：浏览器端用户脚本（个人使用场景） #

若仅个人使用，无需服务器配置，可借助油猴类工具编写脚本在浏览器端修改样式：

// ==UserScript==
// @name Jenkins Custom Icons
// @match *://你的Jenkins地址/*
// ==/UserScript==

// 替换指定fill属性的SVG图标
document.querySelectorAll('svg[fill="#4285f4"]').forEach(svg => {
  svg.style.display = 'none';
  const parent = svg.parentElement;
  parent.style.backgroundImage = 'url(/userContent/custom-blue.png)';
  parent.style.backgroundSize = 'contain';
  parent.style.backgroundRepeat = 'no-repeat';
  parent.style.backgroundPosition = 'center';
});

不推荐的方法：修改Jenkins静态资源 #

若有权限访问Jenkins安装目录，可找到war包或静态资源文件夹中的SVG文件直接替换，但此方法会在Jenkins升级时被覆盖，维护成本高，不建议使用。

内容的提问来源于stack exchange，提问作者Hello234