Dynamically import SVG

[somber nova]

Fill in the blank:

---
/*
  Mukul's Personal Website is a Website
  Copyright (C) 2025 Mukul Kedia

  Mukul's Personal Website is free software: you can redistribute it and/or modify
  it under the terms of the GNU Affero General Public License as published
  by the Free Software Foundation, either version 3 of the License, or
  (at your option) any later version.

  Mukul's Personal Website is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  GNU Affero General Public License for more details.

  You should have received a copy of the GNU Affero General Public License
  along with Mukul's Personal Website. If not, see <https://www.gnu.org/licenses/>.
*/

interface Props {
  label: string;
  src: string;
  tags: string[];
}

const { label, src, tags } = Astro.props;

const Image = // ???
---

<li class="list-row">
  <Image class="size-10" />
  <div>
    <div class="-translate-y-1 font-bold">{label}</div>
    <div class="flex gap-2">
      {tags.map((tag) => <div class="badge badge-primary badge-sm font-semibold">{tag}</div>)}
    </div>
  </div>
</li>

[deep wasp]

Hi @somber nova. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

To dynamically import SVG files in Astro and use them as components, you need to use Astro's SVG component feature along with dynamic imports. Here's how to fill in the blank in your code:

---
/*
  Mukul's Personal Website is a Website
  Copyright (C) 2025 Mukul Kedia

  Mukul's Personal Website is free software: you can redistribute it and/or modify
  it under the terms of the GNU Affero General Public License as published
  by the Free Software Foundation, either version 3 of the License, or
  (at your option) any later version.

  Mukul's Personal Website is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  GNU Affero General Public License for more details.

  You should have received a copy of the GNU Affero General Public License
  along with Mukul's Personal Website. If not, see <<https://www.gnu.org/licenses/>.>
*/

interface Props {
  label: string;
  src: string;
  tags: string[];
}

const { label, src, tags } = Astro.props;

const images = import.meta.glob<{ default: any }>('/src/assets/*.svg');
if (!images[src]) throw new Error(`"${src}" does not exist in glob: "/src/assets/*.svg"`);
const Image = images[src];
---

<li class="list-row">
  <Image class="size-10" />
  <div>
    <div class="-translate-y-1 font-bold">{label}</div>
    <div class="flex gap-2">
      {tags.map((tag) => <div class="badge badge-primary badge-sm font-semibold">{tag}</div>)}
    </div>
  </div>
</li>

This solution uses Astro's import.meta.glob() function to dynamically import SVG files from your assets directory. The approach is similar to how you would dynamically import images in Astro, but adapted for SVG components.

The code:

1. Creates a glob of all SVG files in your assets directory
2. Checks if the requested SVG exists in the glob
3. Assigns the dynamic import to the Image variable, which can then be used as a component

Note that Astro 5.7.0 and later supports using SVG files as components, which allows them to be inlined directly into your HTML output and accept props like width, height, and fill as documented in the Astro guides.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: