inline svg

[weak bay]

So i have a 100 line svg which I want to use in astro component but code become ugly if I add it directly is there any good ways

[novel pike]

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

---

Yes, you can make your SVGs easier to manage in your Astro application by defining your SVG in an Astro component. Here's an example from one of the GitHub issues (https://github.com/withastro/astro/issues/958) on how you might do this:

---
import { Once } from 'astro/components';
---
<Once>
  <svg viewBox="0 0 30 10" xmlns="<http://www.w3.org/2000/svg">>
    <circle id="myCircle" cx="5" cy="5" r="4" stroke="blue"/>
  </svg>
</Once>

In this example, the SVG is defined in a component named Circle.astro. You can then use this component as many times as you want in your application, which can help keep your code clean and manageable.

If you want to dynamically import SVGs, there seems to be some limitations with Astro and Vite as mentioned in this GitHub issue (https://github.com/withastro/astro/issues/6452). For dynamic imports, the official recommendation is to use the new image() schema as mentioned in the Astro documentation (https://docs.astro.build/en/guides/assets/#update-content-collections-schemas).

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