This is a component that lets you add SVG icons to your Astro project using modern Web Standards. #UseThePlatform
The component utilizes the SVG <use>
tag, allowing the developer to include any external SVG asset, typically an icon for websites.
---
import Icon from 'astro-svg-icon';
import { Calendar } from 'Calendar.svg';
---
<Icon src={Calendar.src} viewBox={`0 0 ${Calendar.width} ${Calendar.height}`} />
- ๐ The image is loaded by the browser as an image, making caching possible
- ๐ An inline SVG tag allows for flexible styling with CSS.
- The
id
of the SVG must be the same as the name of the file. For example:
<!-- Calendar.svg -->
<svg id="Calendar" ... />
Otherwise use the reference
prop to specify the id
of the sprite.
Read on to find out why it's useful.