Closed BorisTherin closed 6 months ago
in header.astro:
L.8 import { socials } from "./SocialList";
...
L.202 socials.map((item) => {
when SocialList.tsx DO import preact-lucide
import { TwitchIcon, YoutubeIcon, FacebookIcon, LucideIcon } from 'lucide-preact'
from https://lucide.dev/guide/packages/lucide-react
import { icons } from 'lucide-react';
const Icon = ({ name, color, size }) => {
const LucideIcon = icons[name];
return <LucideIcon color={color} size={size} />;
};
export default Icon;
But
The example below imports all ES Modules, so exercise caution when using it. Importing all icons will significantly increase the build size of the application, negatively affecting its performance. This is especially important to keep in mind when using bundlers like Webpack, Rollup, or Vite.
this is where i tried the same with my imported one:
import { TwitchIcon, YoutubeIcon, FacebookIcon, LucideIcon } from 'lucide-preact'
...
{
link: "https://www.twitch.tv/Justin_Curieux",
icon: TwitchIcon,
label: "Twitch",
bottom: "-bottom-[20px]",
right: "right-[20px]"
}
socials.map(({link: url, label: label, icon: SocialIcon, bottom: bottom, right: right }: social) => {
...
<SocialIcon
size={(label !== "Discord")?iconSize:iconSize-12}
strokeWidth={2}
stroke={`currentColor`}viewBox={(label !== "Discord")?"-2 -4 32 32":"0 0 640
512"}
alt="Share"
className={(label !== "Discord")?"m-1 p-1 rounded-full focus:border-none":"m-2
p-2 rounded-full focus:border-none"}
/>
this is about next.js concerns, but perhaps something like: https://github.com/lucide-icons/lucide/issues/1534 https://github.com/lucide-icons/lucide/issues/1576
import { h } from 'preact'
import { TwitchIcon, YoutubeIcon, FacebookIcon, LucideIcon } from 'lucide-preact'
import DiscordIcon from "./DiscordIcon"
export interface social { link: string returnIcon: Function label: string bottom: string right: string }
export const socials: social[] = [ { link: "https://www.twitch.tv/Justin_Curieux", returnIcon: (props: LucideIcon) => { return h(TwitchIcon, {...props}) } , label: "Twitch", bottom: "-bottom-[20px]", right: "right-[20px]" },
{ link: "https://www.youtube.com/@justincurieux31", returnIcon: (props: LucideIcon) => { return h(YoutubeIcon, {...props}) }, label: "Youtube", bottom: "bottom-[10px]", right: "-right-[10px]" }, { link: "https://www.facebook.com/justin.curieux/", returnIcon: (props: LucideIcon) => { return h(FacebookIcon, {...props}) }, label: "Facebook", bottom: "bottom-[10px]", right: "-right-[50px]" }, { link: "https://discord.com/channels/1054405752422420531/1054405753240305736", returnIcon: (props: LucideIcon) => { return h(DiscordIcon, {...props}) }, label: "Discord", bottom: "-bottom-[15px]", right: "-right-[70px]" }, ]
* SocialCornerUp.tsx:
{socials.map((item: social) => {
return (
<a
href={${item.link}?${urlOfLinkToShare}
}
target="_blank"
role="menuitem"
class={absolute rotate-[${isUp?
0deg:
-180deg}] ${item.bottom} ${item.right}
}
id={user-menu-bottom-${item.label}-${name}
}>
{
item.returnIcon({
size:(item.label !== "Discord")?iconSize:iconSize-12,
strokeWidth:2,
stroke:currentColor
,
viewBox:(item.label !== "Discord")?"-2 -4 32 32":"0 0 640 512",
alt:"Share",
className:(item.label !== "Discord")?"m-1 p-1 rounded-full focus:border-none":"m-2 p-2 rounded-full focus:border-none"
})
}
{item.label}
)
})}
Working & commited
c'est quand on passe socials
en props au composant depuis un .astro que icon: null
ce qui semble logique puisque SocialList.tsx import preact
l'import dans le frontmatter de header.astro est carrement douteux !
import { socials } from "./SocialList";
something friendly for header.astro, with SocialList.ts
to SocialList.tsx
& removed preact import
returnIcon: (props: LucideIcon) => {
//return h(TwitchIcon, {...props})
return (<TwitchIcon {...props} />)
}
socials.returnIcon()
fn is available in header.astro, but still null when passed into SocialCornerUp prop
socials
has to be import in SocialCornerUp.tsx ATM if we want our icons
Note: dans cette issue un problème de conception était là, on a complètement abandonné l'utilisation de returnIcon
we have to look at the right way to add lucide-icons dynamicly.
Lucide-react package has a
dynamicIconImports
function:tried this one, but didnt succed, the browser keep freezing when it comes to render our share icons (=> browser alert [wait] or [exit])