OpenSource/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add custom colors to resolvedicon.jsx

Browse Source 
Enables appending a color code (e.g. "#123456") to all mdi and si icons, in order to change their color to a per-icon custom one.
This commit is contained in:
Mega-Volti 2023-07-25 04:02:32 +02:00 committed by GitHub
parent f4fa098f6b
commit 50146dc08e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 43 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
src/components/resolvedicon.jsx
View File

@ -33,30 +33,53 @@ export default function ResolvedIcon({ icon, width = 32, height = 32, alt = "log
} }
// check mdi- or si- prefixed icons // check mdi- or si- prefixed icons
const prefix = icon.split("-")[0] const prefix = icon.split("-")[0];
const suffix = icon.split("-")[icon.split("-").length - 1];
// get icon source
if (prefix in iconSetURLs) { if (prefix in iconSetURLs) {
// get icon source // check whether icon ends with color code
const iconName = icon.replace(`${prefix}-`, "").replace(".svg", ""); if (!(suffix.match(`[#][a-f0-9][a-f0-9][a-f0-9][a-f0-9][a-f0-9][a-f0-9]`) == null)) {
const iconSource = `${iconSetURLs[prefix]}${iconName}.svg`;
return ( const iconColor = `${suffix}`;
<div const iconName = icon.replace(`${prefix}-`, "").replace(".svg", "").replace(`-${suffix}`, "");
style={{ const iconSource = `${iconSetURLs[prefix]}${iconName}.svg`;
width, return (
height, <div
maxWidth: '100%', style={{
maxHeight: '100%', width,
background: settings.iconStyle === "theme" ? height,
`rgb(var(--color-${ theme === "dark" ? 300 : 900 }) / var(--tw-text-opacity, 1))` : maxWidth: '100%',
"linear-gradient(180deg, rgb(var(--color-logo-start)), rgb(var(--color-logo-stop)))", maxHeight: '100%',
mask: `url(${iconSource}) no-repeat center / contain`, background: `${iconColor}`,
WebkitMask: `url(${iconSource}) no-repeat center / contain`, mask: `url(${iconSource}) no-repeat center / contain`,
}} WebkitMask: `url(${iconSource}) no-repeat center / contain`,
/> }}
); />
);
};
if (suffix.match(`[#][a-f0-9][a-f0-9][a-f0-9][a-f0-9][a-f0-9][a-f0-9]`) == null) {
const iconColor = settings.iconStyle === "theme" ?
`rgb(var(--color-${ theme === "dark" ? 300 : 900 }) / var(--tw-text-opacity, 1))` :
"linear-gradient(180deg, rgb(var(--color-logo-start)), rgb(var(--color-logo-stop)))";
const iconName = icon.replace(`${prefix}-`, "").replace(".svg", "");
const iconSource = `${iconSetURLs[prefix]}${iconName}.svg`;
return (
<div
style={{
width,
height,
maxWidth: '100%',
maxHeight: '100%',
background: `${iconColor}`,
mask: `url(${iconSource}) no-repeat center / contain`,
WebkitMask: `url(${iconSource}) no-repeat center / contain`,
}}
/>
);
}
} }
// fallback to dashboard-icons // fallback to dashboard-icons
if (icon.endsWith(".svg")) { if (icon.endsWith(".svg")) {