[pve-devel] [PATCH proxmox-widget-toolkit v2 1/1] add Proxmox logo as SVG
Lukas Wagner
l.wagner at proxmox.com
Mon Aug 4 11:02:25 CEST 2025
The SVG is based on the one from PDM, but with the `width` and `height`
properties removed - apparently that is needed so that the SVG properly
resizes with the parent container. Also the media query which changes
the fill color for the dark theme support was removed - since that
happens on the CSS level now, same as for old PNG logo.
Signed-off-by: Lukas Wagner <l.wagner at proxmox.com>
---
Notes:
Created a new component because I did not want to mess with the old one.
Technically I could have reused the old one and just overridde the 'src'
config where it is used, but as a new component it is a bit more
self-contained.
Changes since v1 (thx @Chris):
- adapt stylesheet to invert the logo when in dark mode, same
as with the PNG logo
- remove dark theme support from the SVG itself
src/Logo.js | 22 +++++++++++++++++++++
src/images/Makefile | 1 +
src/images/proxmox_logo.svg | 22 +++++++++++++++++++++
src/proxmox-dark/scss/proxmox/_general.scss | 4 ++++
4 files changed, 49 insertions(+)
create mode 100644 src/images/proxmox_logo.svg
diff --git a/src/Logo.js b/src/Logo.js
index e8c8fe5..b88f724 100644
--- a/src/Logo.js
+++ b/src/Logo.js
@@ -19,3 +19,25 @@ Ext.define('PMX.image.Logo', {
me.callParent();
},
});
+
+Ext.define('PMX.image.LogoSVG', {
+ extend: 'Ext.Img',
+ xtype: 'proxmoxLogoSvg',
+
+ height: 30,
+ width: 172,
+ src: '/images/proxmox_logo.svg',
+ alt: 'Proxmox',
+ autoEl: {
+ tag: 'a',
+ href: 'https://www.proxmox.com',
+ target: '_blank',
+ },
+
+ initComponent: function () {
+ let me = this;
+ let prefix = me.prefix !== undefined ? me.prefix : '/pve2';
+ me.src = prefix + me.src;
+ me.callParent();
+ },
+});
diff --git a/src/images/Makefile b/src/images/Makefile
index 61395b4..9fec695 100644
--- a/src/images/Makefile
+++ b/src/images/Makefile
@@ -5,6 +5,7 @@ IMAGES=pmx-clear-trigger.png \
icon-cpu.svg \
icon-ram.svg \
debian-swirl-openlogo.svg \
+ proxmox_logo.svg \
proxmox-symbol-x.svg \
all:
diff --git a/src/images/proxmox_logo.svg b/src/images/proxmox_logo.svg
new file mode 100644
index 0000000..192aa04
--- /dev/null
+++ b/src/images/proxmox_logo.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" viewBox="0 0 384 64" xmlns="http://www.w3.org/2000/svg">
+ <style type="text/css">
+ path { fill: #000; }
+ .st0 { fill:#E57000; }
+ </style>
+ <g transform="matrix(.65882 0 0 .65882 -12.696 -13.986)">
+ <g id="_x31_">
+ <path class="st0" d="m100.6 69.8 24.9 27.3c-2.7 2.8-6.6 4.6-10.7 4.6s-8.4-1.9-11.1-4.9l-13.7-15.1-10.7-11.8 10.7-11.7 13.7-15.1c2.7-3 6.6-4.9 11.1-4.9s8 1.7 10.7 4.5l-24.9 27.3z"/>
+ <path class="st0" d="m52.1 69.8-24.9 27.3c2.7 2.8 6.6 4.6 10.7 4.6s8.4-1.9 11.1-4.9l13.7-15.1 10.7-11.8-10.7-11.7-13.7-15.1c-2.7-3-6.6-4.9-11.1-4.9s-8 1.7-10.7 4.5l24.9 27.3z"/>
+ <path d="m86.2 83.3-9.8-10.8-9.8 10.8-22.7 24.9c2.5 2.5 6 4.1 9.8 4.1s7.5-1.7 10.1-4.5l12.6-13.8 12.5 13.8c2.5 2.7 6.1 4.5 10.1 4.5s7.3-1.6 9.8-4.1l-22.7-24.9z"/>
+ <path d="m86.2 56.3-9.8 10.8-9.8-10.8-22.7-24.9c2.5-2.5 6-4.1 9.8-4.1s7.5 1.7 10.1 4.5l12.6 13.8 12.5-13.8c2.5-2.7 6.1-4.5 10.1-4.5s7.3 1.6 9.8 4.1l-22.7 24.9z"/>
+ <path d="m176.5 71.5c3.4 0 3.4-3.4 3.4-3.4v-8.5c0-3.4-3.4-3.4-3.4-3.4h-23.9v15.3zm17.1-15.3v13.6c0 7.6-6.2 13.6-13.7 13.6h-27.3c0 7.6-6.1 13.6-13.6 13.6v-49.4c0-2.8 2.3-5.1 5.1-5.1h35.8c7.6 0 13.7 6.2 13.7 13.7"/>
+ <path d="m238.9 68.1c3.4 0 3.4-3.4 3.4-3.4v-5.1c0-3.4-3.4-3.4-3.4-3.4h-23.8v11.8zm6.1 11.8 11 15.7c-1.9 1-4.1 1.6-6.3 1.6-4.7 0-8.7-2.3-11.2-5.8l-7.9-11.2h-15.5v3.4c0 7.6-6.2 13.6-13.7 13.6v-49.4c0-2.8 2.3-5.1 5.1-5.1h35.8c7.6 0 13.7 6.2 13.7 13.7v10.2c0 6.6-4.8 12.2-11 13.3"/>
+ <path d="m304.6 59.6c0-3.4-3.4-3.4-3.4-3.4h-20.4c-3.4 0-3.4 3.4-3.4 3.4v20.4c0 3.4 3.4 3.4 3.4 3.4h20.4c3.4 0 3.4-3.4 3.4-3.4zm13.7-3.4v27.2c0 7.6-6.1 13.6-13.7 13.6h-27.2c-7.6 0-13.7-6.1-13.7-13.6v-27.2c0-7.6 6.1-13.7 13.7-13.7h27.2c7.6 0 13.7 6.2 13.7 13.7"/>
+ <path class="st0" d="m365.8 69.8 21.3 23.4c-2.3 2.4-5.6 3.9-9.2 3.9s-7.2-1.6-9.5-4.2l-11.8-12.9-11.8 12.9c-2.3 2.6-5.8 4.2-9.5 4.2s-6.9-1.5-9.2-3.9l21.3-23.4-21.3-23.4c2.3-2.3 5.6-3.8 9.2-3.8s7 1.6 9.4 4.2l11.9 12.9 11.8-12.9c2.3-2.6 5.7-4.2 9.5-4.2s6.9 1.5 9.2 3.8z"/>
+ <path d="m463.1 47.7v49.4c-7.5 0-13.7-6.1-13.7-13.6v-26.1c0-0.7-0.5-1.2-1.1-1.2s-0.9 0.3-1.1 0.6l-15.1 33.4c-0.6 1.2-1.8 1.9-3.1 1.9s-2.6-0.9-3.1-2l-15.1-33.4c-0.2-0.3-0.6-0.6-1-0.6-0.7 0-1.2 0.5-1.2 1.2v26.1c0 7.6-6.2 13.6-13.7 13.6v-49.4c0-2.8 2.3-5.1 5.1-5.1h8.5c5.5 0 10.4 3.4 12.5 8.2v-0.2l8 17.6 8-17.6v0.2c2.1-4.8 6.9-8.2 12.4-8.2h8.6c2.8 0 5.1 2.3 5.1 5.2"/>
+ <path d="m511.7 59.6c0-3.4-3.4-3.4-3.4-3.4h-20.4c-3.4 0-3.4 3.4-3.4 3.4v20.4c0 3.4 3.4 3.4 3.4 3.4h20.4c3.4 0 3.4-3.4 3.4-3.4zm13.7-3.4v27.2c0 7.6-6.1 13.6-13.7 13.6h-27.2c-7.6 0-13.7-6.1-13.7-13.6v-27.2c0-7.6 6.1-13.7 13.7-13.7h27.2c7.6 0 13.7 6.2 13.7 13.7"/>
+ <path class="st0" d="m572.9 69.8 21.3 23.4c-2.3 2.4-5.6 3.9-9.2 3.9s-7.2-1.6-9.5-4.2l-11.8-12.9-11.8 12.9c-2.3 2.6-5.8 4.2-9.5 4.2s-6.9-1.5-9.2-3.9l21.3-23.4-21.3-23.4c2.3-2.3 5.6-3.8 9.2-3.8s7 1.6 9.4 4.2l11.9 12.9 11.8-12.9c2.3-2.6 5.7-4.2 9.5-4.2s6.9 1.5 9.2 3.8z"/>
+ </g>
+ </g>
+</svg>
diff --git a/src/proxmox-dark/scss/proxmox/_general.scss b/src/proxmox-dark/scss/proxmox/_general.scss
index 1342f02..3e22ebc 100644
--- a/src/proxmox-dark/scss/proxmox/_general.scss
+++ b/src/proxmox-dark/scss/proxmox/_general.scss
@@ -3,6 +3,10 @@ img[id^="proxmoxlogo-"][id$="-img"] {
filter: invert(1) hue-rotate(180deg);
}
+img[id^="proxmoxLogoSvg-"][id$="-img"] {
+ filter: invert(1) hue-rotate(180deg);
+}
+
// removes the gray line in the header of the mail gateway
div[id^="versioninfo-"] + div[id^="panel-"] > div[id^="panel-"][id$="-bodyWrap"] > div,
div.eol-notice + div[id^="panel-"] > div[id^="panel-"][id$="-bodyWrap"] > div {
--
2.47.2
More information about the pve-devel
mailing list