#Dynamically imported svg in dist/_astro

8 messages · Page 1 of 1 (latest)

sullen pine
#

When dynamically importing an SVG, it is copied into the HTML but a copy of it is kept in dist/_astro which is redundant, is there any way to avoid this?

---
export interface Props {
    name: string;
}
const { name } = Astro.props as Props;
import type { SvgComponent } from "astro/types";

const allIcons = import.meta.glob("/src/assets/icons/*.svg");
const iconPath = `/src/assets/icons/${name.toLowerCase()}.svg`;
if (!allIcons[iconPath]) throw new Error(`"${iconPath}" not found.`);
const Icon = ((await allIcons[iconPath]()) as SvgComponent).default;
---

<div>
    <Icon />
</div>
wispy spadeBOT
#

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

#

The knowledge sources do not explicitly mention a way to prevent Astro from keeping a copy of dynamically imported SVG files in the dist/_astro directory while also inlining them.

Based on the provided documentation, here is what is known about the behavior of SVG components in Astro:

Default Behavior

Starting in astro@5.7.0, Astro allows you to import SVG files as components and will inline the content directly into your HTML output [SVG components]. This feature was previously introduced as an experimental flag in astro@5.0.0 [Experimental SVG components].

Handling Redundancy

The documentation does not provide a specific configuration to suppress the physical file generation in dist/_astro when an SVG is used as a component. However, there are two modes available for handling SVGs if you are using the experimental flag or specific versions of the feature:

  • inline (Default): Astro inlines the SVG content into your HTML output [Experimental SVG components].
  • sprite: Astro generates a sprite sheet for all imported SVG files instead of inlining them individually. You can set this globally in your config or per component using the mode attribute:
    <Icon mode="sprite" />
    This may consolidate the "redundant" individual files into a single sprite sheet, though it changes how the SVG is delivered to the browser [Experimental SVG components].
#

If you are using astro@5.14.0 or later, you can ensure type safety for these imports using the SvgComponent type from astro/types [SvgComponent Type].

I'm sorry, but there's no information in the provided sources regarding a configuration to explicitly disable the asset copy in the build output for inlined SVGs.

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

#

@sullen pine Kapa.ai is still learning and improving, please let me know how I did by reacting below.

sullen pine
#

@wispy spade

import LinkedinIcon from "/src/assets/icons/linkedin.svg";

inlines the svg just fine, but that too places the svg in the output dir when its never going to be used, not ringing any bells?

wispy spadeBOT
#

Let me check the knowledge base for you again. One moment! :books:

#

I'm sorry, but the provided knowledge sources do not contain information on how to prevent Astro from emitting the original SVG file to the dist/_astro directory when using it as an inline component.

The documentation confirms that importing an SVG as a component—whether via a static import or a dynamic import—will inline the SVG content into your HTML output [SVG components; Experimental SVG components]. However, the sources do not explicitly address the redundancy of the physical file remaining in the build output or provide a configuration flag to disable that behavior.

The only related configuration mentioned is the Experimental SVG optimization (added in astro@5.16.0), which uses SVGO to reduce the file size of these SVG components during the build process [Experimental SVG optimization]. While this would make the "redundant" file in dist/_astro smaller, it does not remove it.

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