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

Streamline code for custom icon colors in resolvedicon.jsx

Browse Source 
Removed redundant if statement when defaulting to theme colors if no custom icon color code is provided
This commit is contained in:
Mega-Volti 2023-07-25 12:12:44 +02:00 committed by GitHub
parent 50146dc08e
commit 5264ffd071
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 20 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/components/resolvedicon.jsx
View File

@ -35,8 +35,7 @@ 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]; const suffix = icon.split("-")[icon.split("-").length - 1];
// get icon source
if (prefix in iconSetURLs) { if (prefix in iconSetURLs) {
// check whether icon ends with color code // check whether icon ends with color code
if (!(suffix.match(`[#][a-f0-9][a-f0-9][a-f0-9][a-f0-9][a-f0-9][a-f0-9]`) == null)) { if (!(suffix.match(`[#][a-f0-9][a-f0-9][a-f0-9][a-f0-9][a-f0-9][a-f0-9]`) == null)) {
@ -58,27 +57,26 @@ export default function ResolvedIcon({ icon, width = 32, height = 32, alt = "log
/> />
); );
}; };
// default to theme setting if no custom icon color code is provided
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`,
}}
/>
);
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