Cronocide/starbase-81
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixing icon styles

Browse Source
This commit is contained in:
Jordan Roher 2023-12-18 13:22:01 -08:00
parent 88252eea06
commit e8059930e1
1 changed files with 21 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/icon.ts
View File

@ -134,7 +134,7 @@ function IconBase(props: IIconBaseProps) {
iconClassName += " rounded-2xl border border-black/5 shadow-sm"; iconClassName += " rounded-2xl border border-black/5 shadow-sm";
} }
const iconStyle: any = {}; const iconStyle: string[] = [];
switch (iconType) { switch (iconType) {
case IconType.uri: case IconType.uri:
@ -142,7 +142,7 @@ function IconBase(props: IIconBaseProps) {
// Default to bubble and no background for URI and Dashboard icons // Default to bubble and no background for URI and Dashboard icons
if (!is.null(iconBG)) { if (!is.null(iconBG)) {
if (iconBG?.startsWith("#")) { if (iconBG?.startsWith("#")) {
iconStyle.backgroundColor = iconBG; iconStyle.push(`background-color: ${iconBG}`);
} else { } else {
iconClassName += ` bg-${iconBG}`; iconClassName += ` bg-${iconBG}`;
} }
@ -154,7 +154,7 @@ function IconBase(props: IIconBaseProps) {
iconClassName += ` bg-slate-200 dark:bg-gray-900`; iconClassName += ` bg-slate-200 dark:bg-gray-900`;
} else { } else {
if (iconBG?.startsWith("#")) { if (iconBG?.startsWith("#")) {
iconStyle.backgroundColor = iconBG; iconStyle.push(`background-color: ${iconBG}`);
} else { } else {
iconClassName += ` bg-${iconBG}`; iconClassName += ` bg-${iconBG}`;
} }
@ -166,17 +166,17 @@ function IconBase(props: IIconBaseProps) {
break; break;
} }
const mdiIconStyle: any = {}; const mdiIconStyle: string[] = [];
let mdiIconColorFull = "bg-" + iconColor; let mdiIconColorFull = "bg-" + iconColor;
if (!is.null(iconColor) && iconColor?.startsWith("#")) { if (!is.null(iconColor) && iconColor?.startsWith("#")) {
mdiIconColorFull = ""; mdiIconColorFull = "";
mdiIconStyle.backgroundColor = iconColor; mdiIconStyle.push(`background-color: ${iconColor}`);
} }
switch (iconType) { switch (iconType) {
case IconType.uri: case IconType.uri:
return `<img src="${icon}" alt="" class="${iconClassName || ""}" style="${{ ...iconStyle }}" />`; return `<img src="${icon}" alt="" class="${iconClassName || ""}" style="${unwrapStyles(iconStyle)}" />`;
case IconType.dashboard: case IconType.dashboard:
icon = icon.replace(".png", "").replace(".jpg", "").replace(".svg", ""); icon = icon.replace(".png", "").replace(".jpg", "").replace(".svg", "");
return ` return `
@ -184,7 +184,7 @@ function IconBase(props: IIconBaseProps) {
src=${`https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/${icon}.png`} src=${`https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/${icon}.png`}
alt="" alt=""
class="${iconClassName || ""}" class="${iconClassName || ""}"
style="${{ ...iconStyle }}" style="${unwrapStyles(iconStyle)}"
/> />
`; `;
case IconType.material: case IconType.material:
@ -194,13 +194,22 @@ function IconBase(props: IIconBaseProps) {
<div class="${iconClassName || ""}" style="${{ ...iconStyle }}"> <div class="${iconClassName || ""}" style="${{ ...iconStyle }}">
<div <div
className=${`block ${iconWidthHeightClassName} ${mdiIconColorFull} overflow-hidden`} className=${`block ${iconWidthHeightClassName} ${mdiIconColorFull} overflow-hidden`}
style="${{ style="${unwrapStyles(
...mdiIconStyle, mdiIconStyle.concat(
mask: `url(https://cdn.jsdelivr.net/npm/@mdi/svg@latest/svg/${icon}.svg) no-repeat center / contain`, `mask: url(https://cdn.jsdelivr.net/npm/@mdi/svg@latest/svg/${icon}.svg) no-repeat center / contain`,
WebkitMask: `url(https://cdn.jsdelivr.net/npm/@mdi/svg@latest/svg/${icon}.svg) no-repeat center / contain`, `webkit-mask: url(https://cdn.jsdelivr.net/npm/@mdi/svg@latest/svg/${icon}.svg) no-repeat center / contain`
}}" )
)}"
/> />
</div> </div>
`; `;
} }
} }
function unwrapStyles(styles: string[]): string {
if (is.null(styles)) {
return "";
}
return styles.join(";");
}