https://github.com/oakstudios/inline-svg
A web component for dynamically fetching SVG files and inlining them in HTML
https://github.com/oakstudios/inline-svg
Last synced: about 1 year ago
JSON representation
A web component for dynamically fetching SVG files and inlining them in HTML
- Host: GitHub
- URL: https://github.com/oakstudios/inline-svg
- Owner: oakstudios
- Created: 2023-03-23T21:20:16.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-04-06T00:09:59.000Z (about 2 years ago)
- Last Synced: 2025-03-29T01:05:35.821Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 98.6 KB
- Stars: 3
- Watchers: 2
- Forks: 1
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Inline SVG
## Installation
```
npm i @oakstudios/inline-svg
```
### Web Component
1. Load the web component. Choose the option that best suits your needs:
Using a `script` tag placed at the end of the `body`:
```html
```
_OR_ importing the same auto-register function in JS:
```js
import "@oakstudios/inline-svg/auto-register";
```
_OR_ registering the component manually:
```js
import InlineSVG from "@oakstudios/inline-svg";
customElements.define("inline-svg", InlineSVG);
```
2. Then add it to your HTML:
```html
```
## API
| Attribute | Default | Description |
| - | - | - |
| `src` | `null` | HTTP path or URL to the desired SVG image |
| `scoped` | `false` | Scopes `id` attributes and references to them within the SVG. Helps prevent naming collisions within the HTML document. |
## Acknowledgements
https://www.npmjs.com/package/react-inlinesvg