Lucide dynamic loading

[BorisTherin]

we have to look at the right way to add lucide-icons dynamicly.

Lucide-react package has a dynamicIconImports function:

import { dynamicIconImports, LucideProps } from 'lucide-react';
const fallback = <div style={{ background: '#ddd', width: 24, height: 24 }}/>;
interface IconProps extends Omit<LucideProps, 'ref'> {
  name: keyof typeof dynamicIconImports;
}
const Icon = ({ name, ...props }: IconProps) => {
  const LucideIcon = lazy(dynamicIconImports[name]);

  return (
    <Suspense fallback={fallback}>
      <LucideIcon {...props} />
    </Suspense>
  );
}

export default Icon;

• https://www.npmjs.com/package/lucide-react?activeTab=code
• https://towardsdev.com/lucide-react-streamlining-lucide-icon-integration-in-react-applications-fdd65d82864b

tried this one, but didnt succed, the browser keep freezing when it comes to render our share icons (=> browser alert [wait] or [exit])

[BorisTherin]

• something else quiet weird atm:

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'

[BorisTherin]

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:

• SocialList.tsx:

  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]"
  }

• SocialCornerUp.tsx:

  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"}
  />

[BorisTherin]

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

[BorisTherin]

MAY-BE ?

• SocialList.tsx

  
  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 

[BorisTherin]

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";

[BorisTherin]

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

[Jean-Baptiste-Lasselle]

Note: dans cette issue un problème de conception était là, on a complètement abandonné l'utilisation de returnIcon