Using Astro Components

4 min read

Global SVG Icons Component

Original SVG file.

Rename svg tag to symbol
Remove xmlns='http://www.w3.org/2000/svg'
add unique id. id="close-icon"

close.svg

// this
<svg xmlns='http://www.w3.org/2000/svg' viewBox="0 0 32 32" fill="currentColor">
  <path d="M16 0C7.164 0 0 7.164 0 16C0 24.836 7.164 32 16 32C24.836 32 32 24.836 32 16C32 7.164 24.836 0 16 0ZM22.012 19.002L19.012 22L16.028 19L13.012 22L10.012 19.002L13 16.002L10.012 13.002L13.012 10.002L16.028 12.998L19.012 10.002L22.02 12.924L19.012 16.002L22.012 19.002Z"/>
</svg>
//

Add to svg tag in a hidden <div>

SVGIcons.astro

<div style='display:none;' aria-hidden='true' tabindex='-1'>
  <svg xmlns='http://www.w3.org/2000/svg'>
    // to this
    <symbol id="close-icon" viewBox="0 0 32 32" fill="currentColor">
      <path d="M16 0C7.164 0 0 7.164 0 16C0 24.836 7.164 32 16 32C24.836 32 32 24.836 32 16C32 7.164 24.836 0 16 0ZM22.012 19.002L19.012 22L16.028 19L13.012 22L10.012 19.002L13 16.002L10.012 13.002L13.012 10.002L16.028 12.998L19.012 10.002L22.02 12.924L19.012 16.002L22.012 19.002Z"/>
    </symbol>
    //
  </svg>
</div>

Import the file into the footer component to make it accessible on every page. Or you could put it in the Layouts.astro file.

SiteFooter.astro

---
import SVGIcons from "@components/SVGIcons.astro";
---
<SVGIcons />
<footer>
    <!-- footer content -->
</footer>

Using the icon

add height and width that is the same aspect ratio as original

page.astro

<svg width="16" height="16"><use href="#close-icon"></use></svg>

Destructuring Class in a Child Component

Astro Styling Docs.

---
const { class: className, ...rest } = Astro.props;
---
<div class={className} {...rest}>
  <slot/>
</div>