https://github.com/karesztrk/astro-svg-icon
A modern way to add icons to your Astro website.
https://github.com/karesztrk/astro-svg-icon
astro-component svg usetheplatform withastro
Last synced: 5 months ago
JSON representation
A modern way to add icons to your Astro website.
- Host: GitHub
- URL: https://github.com/karesztrk/astro-svg-icon
- Owner: karesztrk
- Created: 2024-06-04T12:38:55.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2025-01-24T14:42:46.000Z (over 1 year ago)
- Last Synced: 2025-10-26T20:57:35.585Z (8 months ago)
- Topics: astro-component, svg, usetheplatform, withastro
- Language: Astro
- Homepage: https://karolytorok.netlify.app/blog/styling-an-svg/
- Size: 51.8 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Astro SVG Icon
This is a component that lets you add SVG icons to your Astro project using modern Web Standards. #UseThePlatform
The component utilizes the SVG `` tag, allowing the developer to include any external SVG asset, typically an icon for websites.
## How to use
```jsx
---
import Icon from 'astro-svg-icon';
import { Calendar } from 'Calendar.svg';
---
```
## Advantages
- 🚀 The image is loaded by the browser as an image, making caching possible
- 💅 An inline SVG tag allows for flexible styling with CSS.
## Limitations
- The `id` of the SVG must be the same as the name of the file. For example:
```html title="Calendar.svg"
```
Otherwise use the `reference` prop to specify the `id` of the sprite.
## References
Read on to find out why it's useful.
- https://kurtextrem.de/posts/svg-in-js
- https://karolytorok.netlify.app/blog/styling-an-svg/