SVG

          
            Rule Name: experimental-svg.mdc
Description: Guidelines for using Astro's experimental SVG components feature.

# Experimental SVG Components Guidelines

1.  **Purpose:** Allows importing local `.svg` files directly as Astro components. The SVG content is inlined into the final HTML output. This feature requires enabling an experimental flag.

2.  **Enablement (`astro.config.mjs`):** Add the `experimental.svg` flag to your configuration file:

    ```javascript
    import { defineConfig } from "astro/config";

    export default defineConfig({
      experimental: {
        svg: true,
      },
    });
    ```

3.  **Usage:** Import the SVG file using a default import and render it like any other Astro component. Note the component capitalization convention.

    ```astro
    ---
    import MyIcon from '../assets/icon.svg';
    import AnotherLogo from '../assets/another-logo.svg';
    ---
    <div>
      <MyIcon />
      <AnotherLogo />
    </div>
    ```

4.  **Passing Attributes:** You can pass standard SVG attributes (e.g., `width`, `height`, `fill`, `class`, `stroke`) as props directly to the imported SVG component. These props will be applied to the root `<svg>` element, overriding any matching attributes present in the original `.svg` file.
    ```astro
    ---
    import Logo from '../assets/logo.svg';
    ---
    <Logo width={64} height={64} fill="currentColor" class="logo-style" />
    ```

Reference: [Astro Experimental SVG Components Docs](mdc:https:/docs.astro.build/en/reference/experimental-flags/svg/)