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

Update resolvedicon.jsx - DRY

Browse Source 
Removed repetition, slimmed down if statement.

Also reverse previous commit as it did not work as intended.
This commit is contained in:
Mega-Volti 2023-07-25 19:20:51 +02:00 committed by GitHub
parent 8bdedfa4f7
commit 185a4cbae5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 18 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/components/resolvedicon.jsx
View File

@ -34,33 +34,27 @@ 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];
if (prefix in iconSetURLs) { if (prefix in iconSetURLs) {
// check whether icon ends with color code // check whether icon ends with color code
if (suffix.test(`[#][a-fA-F0-9][a-fA-F0-9][a-fA-F0-9][a-fA-F0-9][a-fA-F0-9][a-fA-F0-9]`)) { let iconName;
let iconColor;
const suffix = icon.split("-")[icon.split("-").length - 1];
const iconColor = `${suffix}`; if (!(suffix.match(`[#][a-f0-9][a-f0-9][a-f0-9][a-f0-9][a-f0-9][a-f0-9]`) == null)) {
const iconName = icon.replace(`${prefix}-`, "").replace(".svg", "").replace(`-${suffix}`, ""); // set custom color code
const iconSource = `${iconSetURLs[prefix]}${iconName}.svg`; iconName = icon.replace(`${prefix}-`, "").replace(".svg", "").replace(`-${suffix}`, "");
return ( iconColor = `${suffix}`;
<div } else {
style={{ // default to theme setting if no custom icon color code is provided
width, iconName = icon.replace(`${prefix}-`, "").replace(".svg", "");
height, iconColor = settings.iconStyle === "theme" ?
maxWidth: '100%', `rgb(var(--color-${ theme === "dark" ? 300 : 900 }) / var(--tw-text-opacity, 1))` :
maxHeight: '100%', "linear-gradient(180deg, rgb(var(--color-logo-start)), rgb(var(--color-logo-stop)))";
background: `${iconColor}`, }
mask: `url(${iconSource}) no-repeat center / contain`,
WebkitMask: `url(${iconSource}) no-repeat center / contain`,
}}
/>
);
};
// default to theme setting if no custom icon color code is provided
const iconName = icon.replace(`${prefix}-`, "").replace(".svg", "");
const iconSource = `${iconSetURLs[prefix]}${iconName}.svg`; const iconSource = `${iconSetURLs[prefix]}${iconName}.svg`;
return ( return (
<div <div
style={{ style={{
@ -68,15 +62,12 @@ export default function ResolvedIcon({ icon, width = 32, height = 32, alt = "log
height, height,
maxWidth: '100%', maxWidth: '100%',
maxHeight: '100%', maxHeight: '100%',
background: settings.iconStyle === "theme" ? background: `${iconColor}`,
`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)))",
mask: `url(${iconSource}) no-repeat center / contain`, mask: `url(${iconSource}) no-repeat center / contain`,
WebkitMask: `url(${iconSource}) no-repeat center / contain`, WebkitMask: `url(${iconSource}) no-repeat center / contain`,
}} }}
/> />
); );
} }
// fallback to dashboard-icons // fallback to dashboard-icons