Use ResolvedIcon, remove extra div

pull/664/head
Michael Shamoon 2 years ago
parent 645cf211dd
commit 95dcb8802a

@ -1,9 +1,9 @@
import Image from "next/future/image"; import Image from "next/future/image";
export default function ResolvedIcon({ icon }) { export default function ResolvedIcon({ icon, width = 32, height = 32 }) {
// direct or relative URLs // direct or relative URLs
if (icon.startsWith("http") || icon.startsWith("/")) { if (icon.startsWith("http") || icon.startsWith("/")) {
return <Image src={`${icon}`} width={32} height={32} alt="logo" />; return <Image src={`${icon}`} width={width} height={height} alt="logo" />;
} }
// mdi- prefixed, material design icons // mdi- prefixed, material design icons
@ -12,8 +12,8 @@ export default function ResolvedIcon({ icon }) {
return ( return (
<div <div
style={{ style={{
width: 32, width,
height: 32, height,
maxWidth: '100%', maxWidth: '100%',
maxHeight: '100%', maxHeight: '100%',
background: "linear-gradient(180deg, rgb(var(--color-logo-start)), rgb(var(--color-logo-stop)))", background: "linear-gradient(180deg, rgb(var(--color-logo-start)), rgb(var(--color-logo-stop)))",
@ -29,8 +29,8 @@ export default function ResolvedIcon({ icon }) {
return ( return (
<Image <Image
src={`https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/${iconName}.png`} src={`https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/${iconName}.png`}
width={32} width={width}
height={32} height={height}
alt="logo" alt="logo"
/> />
); );

@ -1,64 +1,61 @@
import Image from "next/future/image"; import ResolvedIcon from "components/resolvedicon"
export default function Logo({ options }) { export default function Logo({ options }) {
return ( return (
<div className="w-12 h-12 flex flex-row items-center align-middle mr-3 self-center"> <div className="w-12 h-12 flex flex-row items-center align-middle mr-3 self-center">
{options.source ? {options.icon ?
<Image src={`${options.source}`} width={48} height={48} alt="logo" /> : <ResolvedIcon icon={options.icon} width={48} height={48} /> :
// fallback to homepage logo
// if source parameter is not set, use fallback homepage logo <svg
<div className="w-12 h-12 flex flex-row items-center align-middle mr-3 self-center"> xmlns="http://www.w3.org/2000/svg"
<svg viewBox="0 0 1024 1024"
xmlns="http://www.w3.org/2000/svg" style={{
viewBox="0 0 1024 1024" enableBackground: "new 0 0 1024 1024",
style={{ }}
enableBackground: "new 0 0 1024 1024", xmlSpace="preserve"
}} className="w-full h-full"
xmlSpace="preserve" >
className="w-full h-full" <style>
> {
<style> ".st0{display:none}.st3{stroke-linecap:square}.st3,.st4{fill:none;stroke:#fff;stroke-miterlimit:10}.st6{display:inline;fill:#333}.st7{fill:#fff}"
{ }
".st0{display:none}.st3{stroke-linecap:square}.st3,.st4{fill:none;stroke:#fff;stroke-miterlimit:10}.st6{display:inline;fill:#333}.st7{fill:#fff}" </style>
} <g id="Icon">
</style> <path
<g id="Icon"> d="M771.9 191c27.7 0 50.1 26.5 50.1 59.3v186.4l-100.2.3V250.3c0-32.8 22.4-59.3 50.1-59.3z"
<path style={{
d="M771.9 191c27.7 0 50.1 26.5 50.1 59.3v186.4l-100.2.3V250.3c0-32.8 22.4-59.3 50.1-59.3z" fill: "rgba(var(--color-logo-start))",
}}
/>
<linearGradient
id="homepage_logo_gradient"
gradientUnits="userSpaceOnUse"
x1={200.746}
y1={225.015}
x2={764.986}
y2={789.255}
>
<stop
offset={0}
style={{ style={{
fill: "rgba(var(--color-logo-start))", stopColor: "rgba(var(--color-logo-start))",
}} }}
/> />
<linearGradient <stop
id="homepage_logo_gradient" offset={1}
gradientUnits="userSpaceOnUse"
x1={200.746}
y1={225.015}
x2={764.986}
y2={789.255}
>
<stop
offset={0}
style={{
stopColor: "rgba(var(--color-logo-start))",
}}
/>
<stop
offset={1}
style={{
stopColor: "rgba(var(--color-logo-stop))",
}}
/>
</linearGradient>
<path
d="M721.8 250.3c0-32.7 22.4-59.3 50.1-59.3H253.1c-27.7 0-50.1 26.5-50.1 59.3v582.2l90.2-75.7-.1-130.3H375v61.8l88-73.8 258.8 217.9V250.6"
style={{ style={{
fill: "url(#homepage_logo_gradient)", stopColor: "rgba(var(--color-logo-stop))",
}} }}
/> />
</g> </linearGradient>
</svg> <path
</div> d="M721.8 250.3c0-32.7 22.4-59.3 50.1-59.3H253.1c-27.7 0-50.1 26.5-50.1 59.3v582.2l90.2-75.7-.1-130.3H375v61.8l88-73.8 258.8 217.9V250.6"
style={{
fill: "url(#homepage_logo_gradient)",
}}
/>
</g>
</svg>
} }
</div> </div>
) )

Loading…
Cancel
Save