search

poppa / sveltekit-svg

SvelteKit plugin that makes it possible to import SVG files as Svelte components, inline SVG code or urls
MIT License
235 stars 23 forks source link

Import SVG component dynamically based on input that the component is getting #37

Closed ambigos1 closed 1 year ago

ambigos1 commented 1 year ago

Hi. I would like to add svg icon dynamically based on parameters that the component is getting by its inputs.

Input example: socials: [ { link: 'XXX', url: '../images/icons/instagram-brands.svg' }, { link: 'XXX', url: '../images/icons/tiktok-brands.svg' }, { link: 'XXX', url: '../images/icons/whatsapp-brands.svg' }, { link: 'https://t.me/InstBlast', url: '../images/icons/telegram-plane-brands.svg' } ]

I tried dynamic import like the example above but the icons is not displayed

  {#each data.socials as social }
    <a
      href={social.link}
      target="_blank"
      rel="noopener noreferrer"
      class="text-gray-400 hover:text-gray-900 hover:text-primary"
    >
      {#await import(`${social.url}?component`) then Icon}
        <Icon.default width="200" />
      {/await}
    </a>
  {/each}

Any suggestions How can I make it work?

Thanks.

poppa commented 1 year ago

This is a build-time plugin and dynamic imports are runtime, so I can't see how this would ever work.

poppa commented 1 year ago

To expand a little: If you wan't to use your SVG's as dynamic imports, convert them manually (statically) to Svelte components on beforehand.

There are probably tools out there for scripting stuff like this.