https://github.com/jasikpark/astro-svg-loader

Import SVG's as Astro components
https://github.com/jasikpark/astro-svg-loader

astro astro-svg-loader svg

Last synced: about 1 month ago
JSON representation

Import SVG's as Astro components

• Host: GitHub
• URL: https://github.com/jasikpark/astro-svg-loader
• Owner: jasikpark
• License: mit
• Created: 2022-10-20T19:37:53.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-10-29T17:08:58.000Z (3 months ago)
• Last Synced: 2024-10-29T18:37:44.635Z (3 months ago)
• Topics: astro, astro-svg-loader, svg
• Language: TypeScript
• Homepage: https://stackblitz.com/github/jasikpark/astro-svg-loader/
• Size: 1.17 MB
• Stars: 24
• Watchers: 2
• Forks: 5
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
# `@jasikpark/astro-svg-loader`

[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fjasikpark%2Fastro-svg-loader.svg?type=shield)](https://app.fossa.com/projects/git%2Bgithub.com%2Fjasikpark%2Fastro-svg-loader?ref=badge_shield)

This package allows you to import SVGs as Astro components, using

[@natemoo-re](https://github.com/natemoo-re)'s `ultrahtml` and vite's support

for

[raw imports](https://vitejs.dev/guide/assets.html#importing-asset-as-string) to

do the trick.

Taking inspiration from 

that holds that icons should always be inlined.

Usage:

Peer deps are `astro`

```

npm add -D @jasikpark/astro-svg-loader

```

```

yarn add -D @jasikpark/astro-svg-loader

```

```

pnpm add -D @jasikpark/astro-svg-loader

```

then in an Astro component:

```astro

---

import Svg from "@jasikpark/astro-svg-loader";

---

```

Be sure to use a raw import: `?raw`, or you'll import the URL rather than the

SVG source.

[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/jasikpark/astro-svg-loader/)

## License

[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fjasikpark%2Fastro-svg-loader.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fjasikpark%2Fastro-svg-loader?ref=badge_large)

## Inspiration

- [astro-icon](https://github.com/natemoo-re/astro-icon)

- [svgr](https://react-svgr.com/)