Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2026-01-03 07:18:49 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

🐛 Improve icon switching (#15123)

Browse source
This commit is contained in:
Jeffrey Chen 2025-07-06 16:27:12 +08:00 • committed by GitHub
parent 90f5e6b081
commit e17e9aa1cf
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 52 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

2
app/appearance/icons/ant/icon.js
View file

@ -1,4 +1,4 @@
document.body.insertAdjacentHTML('afterbegin', `<svg style="position: absolute; width: 0; height: 0; overflow: hidden;" xmlns="http://www.w3.org/2000/svg">
document.body.insertAdjacentHTML('afterbegin', `<svg id="icons-ant" style="position: absolute; width: 0; height: 0; overflow: hidden;" xmlns="http://www.w3.org/2000/svg">
<defs>
<symbol id="iconGroups" viewBox="0 0 32 32">
<path d="M3.074 1c-0.646 0-1.17 0.524-1.17 1.17s0.524 1.17 1.17 1.17h25.851c0.646 0 1.17-0.524 1.17-1.17s-0.524-1.17-1.17-1.17v0zM3.074 17.526c-0.646 0-1.17 0.524-1.17 1.17s0.524 1.17 1.17 1.17h25.851c0.646 0 1.17-0.524 1.17-1.17s-0.524-1.17-1.17-1.17v0zM1.904 8.517c0-1.175 0.953-2.128 2.128-2.128v0h3.83c1.175 0 2.128 0.953 2.128 2.128v0 3.83c0 1.175-0.953 2.128-2.128 2.128v0h-3.83c-1.175 0-2.128-0.953-2.128-2.128v0zM4.245 8.73v3.404h3.404v-3.404zM14.085 6.389c-1.175 0-2.128 0.953-2.128 2.128v0 3.83c0 1.175 0.953 2.128 2.128 2.128v0h3.83c1.175 0 2.128-0.953 2.128-2.128v0-3.83c0-1.175-0.953-2.128-2.128-2.128v0zM14.298 12.134v-3.404h3.404v3.404zM22.011 8.517c0-1.175 0.953-2.128 2.128-2.128v0h3.83c1.175 0 2.128 0.953 2.128 2.128v0 3.83c0 1.175-0.953 2.128-2.128 2.128v0h-3.83c-1.175 0-2.128-0.953-2.128-2.128v0zM24.351 8.73v3.404h3.404v-3.404zM4.032 22.915c-1.175 0-2.128 0.953-2.128 2.128v0 3.83c0 1.175 0.953 2.128 2.128 2.128v0h3.83c1.175 0 2.128-0.953 2.128-2.128v0-3.83c0-1.175-0.953-2.128-2.128-2.128v0zM4.245 28.66v-3.404h3.404v3.404zM11.957 25.043c0-1.175 0.953-2.128 2.128-2.128v0h3.83c1.175 0 2.128 0.953 2.128 2.128v0 3.83c0 1.175-0.953 2.128-2.128 2.128v0h-3.83c-1.175 0-2.128-0.953-2.128-2.128v0zM14.298 25.255v3.404h3.404v-3.404zM24.138 22.915c-1.175 0-2.128 0.953-2.128 2.128v0 3.83c0 1.175 0.953 2.128 2.128 2.128v0h3.83c1.175 0 2.128-0.953 2.128-2.128v0-3.83c0-1.175-0.953-2.128-2.128-2.128v0zM24.351 28.66v-3.404h3.404v3.404z"></path>

2
app/appearance/icons/material/icon.js
View file

@ -1,4 +1,4 @@
document.body.insertAdjacentHTML('afterbegin', `<svg style="position: absolute; width: 0; height: 0; overflow: hidden;" xmlns="http://www.w3.org/2000/svg">
document.body.insertAdjacentHTML('afterbegin', `<svg id="icons-material" style="position: absolute; width: 0; height: 0; overflow: hidden;" xmlns="http://www.w3.org/2000/svg">
<defs>
<symbol id="iconGroups" viewBox="0 0 32 32">
<path d="M3.074 1c-0.646 0-1.17 0.524-1.17 1.17s0.524 1.17 1.17 1.17h25.851c0.646 0 1.17-0.524 1.17-1.17s-0.524-1.17-1.17-1.17v0zM3.074 17.526c-0.646 0-1.17 0.524-1.17 1.17s0.524 1.17 1.17 1.17h25.851c0.646 0 1.17-0.524 1.17-1.17s-0.524-1.17-1.17-1.17v0zM1.904 8.517c0-1.175 0.953-2.128 2.128-2.128v0h3.83c1.175 0 2.128 0.953 2.128 2.128v0 3.83c0 1.175-0.953 2.128-2.128 2.128v0h-3.83c-1.175 0-2.128-0.953-2.128-2.128v0zM4.245 8.73v3.404h3.404v-3.404zM14.085 6.389c-1.175 0-2.128 0.953-2.128 2.128v0 3.83c0 1.175 0.953 2.128 2.128 2.128v0h3.83c1.175 0 2.128-0.953 2.128-2.128v0-3.83c0-1.175-0.953-2.128-2.128-2.128v0zM14.298 12.134v-3.404h3.404v3.404zM22.011 8.517c0-1.175 0.953-2.128 2.128-2.128v0h3.83c1.175 0 2.128 0.953 2.128 2.128v0 3.83c0 1.175-0.953 2.128-2.128 2.128v0h-3.83c-1.175 0-2.128-0.953-2.128-2.128v0zM24.351 8.73v3.404h3.404v-3.404zM4.032 22.915c-1.175 0-2.128 0.953-2.128 2.128v0 3.83c0 1.175 0.953 2.128 2.128 2.128v0h3.83c1.175 0 2.128-0.953 2.128-2.128v0-3.83c0-1.175-0.953-2.128-2.128-2.128v0zM4.245 28.66v-3.404h3.404v3.404zM11.957 25.043c0-1.175 0.953-2.128 2.128-2.128v0h3.83c1.175 0 2.128 0.953 2.128 2.128v0 3.83c0 1.175-0.953 2.128-2.128 2.128v0h-3.83c-1.175 0-2.128-0.953-2.128-2.128v0zM14.298 25.255v3.404h3.404v-3.404zM24.138 22.915c-1.175 0-2.128 0.953-2.128 2.128v0 3.83c0 1.175 0.953 2.128 2.128 2.128v0h3.83c1.175 0 2.128-0.953 2.128-2.128v0-3.83c0-1.175-0.953-2.128-2.128-2.128v0zM24.351 28.66v-3.404h3.404v3.404z"></path>

77
app/src/util/assets.ts
View file

@ -9,16 +9,57 @@ import {fetchPost} from "./fetch";
import {appearance} from "../config/appearance";
import {isInAndroid, isInHarmony, isInIOS, isIPad, isIPhone, isMac, isWin11} from "../protyle/util/compatibility";
const loadThirdIcon = (iconURL: string, data: Config.IAppearance) => {
addScript(iconURL, "iconDefaultScript").then(() => {
if (!["ant", "material"].includes(data.icon)) {
const iconScriptElement = document.getElementById("iconScript");
if (iconScriptElement) {
iconScriptElement.remove();
}
addScript(`/appearance/icons/${data.icon}/icon.js?v=${data.iconVer}`, "iconScript");
const loadIcons = (data: Config.IAppearance) => {
const isBuiltInIcon = ["ant", "material"].includes(data.icon);
const iconDefaultName = isBuiltInIcon ? data.icon : "material";
// 不能使用 data.iconVer，因为其他主题也需要加载默认图标，此时 data.iconVer 为其他图标的版本号
const iconDefaultURL = `/appearance/icons/${iconDefaultName}/icon.js?v=${Constants.SIYUAN_VERSION}`;
const iconDefaultScriptElement = document.getElementById("iconDefaultScript");
const isDefaultIconUnchanged = iconDefaultScriptElement && iconDefaultScriptElement.getAttribute("src").startsWith(iconDefaultURL);
const iconURL = `/appearance/icons/${data.icon}/icon.js?v=${data.iconVer}`;
const iconScriptElement = document.getElementById("iconScript");
if (
// 使用的内置图标不变
isDefaultIconUnchanged &&
// 使用的第三方图标不变
iconScriptElement && iconScriptElement.getAttribute("src").startsWith(iconURL)
) {
return;
}
if (!isDefaultIconUnchanged) {
iconDefaultScriptElement?.remove();
}
iconScriptElement?.remove();
const oldSVGElements = Array.from(document.body.children).filter(child => {
if (
child.tagName !== "svg" ||
// 使用的内置图标不变就不需要移除
(isDefaultIconUnchanged && child.id === ("icons-" + iconDefaultName)) ||
// 插件添加的图标 data-name="icons-plugin"
child.getAttribute("data-name")
) {
return false;
}
return true;
});
addScript(iconDefaultURL, "iconDefaultScript").then(() => {
if (!isBuiltInIcon) {
addScript(iconURL, "iconScript").then(removeOldSvgElements);
} else {
removeOldSvgElements();
}
});
function removeOldSvgElements() {
oldSVGElements.forEach(svgElement => {
svgElement.remove();
});
}
};
export const loadAssets = (data: Config.IAppearance) => {
@ -98,25 +139,7 @@ export const loadAssets = (data: Config.IAppearance) => {
addScript(themeScriptAddress, "themeScript");
}
const iconDefaultScriptElement = document.getElementById("iconDefaultScript");
// 不能使用 data.iconVer，因为其他主题也需要加载默认图标，此时 data.iconVer 为其他图标的版本号
const iconURL = `/appearance/icons/${["ant", "material"].includes(data.icon) ? data.icon : "material"}/icon.js?v=${Constants.SIYUAN_VERSION}`;
if (iconDefaultScriptElement) {
if (!iconDefaultScriptElement.getAttribute("src").startsWith(iconURL)) {
iconDefaultScriptElement.remove();
let svgElement = document.body.firstElementChild;
while (svgElement.tagName === "svg") {
const currentSvgElement = svgElement;
svgElement = svgElement.nextElementSibling;
if (!currentSvgElement.getAttribute("data-name")) {
currentSvgElement.remove();
}
}
loadThirdIcon(iconURL, data);
}
} else {
loadThirdIcon(iconURL, data);
}
loadIcons(data);
};
export const initAssets = () => {