https://github.com/yoannchb-pro/inner-svg
Inject svg into your html with only one attribute or with javascript
https://github.com/yoannchb-pro/inner-svg
angular injection javascript react svg svg-inject typescript vuejs
Last synced: 3 months ago
JSON representation
Inject svg into your html with only one attribute or with javascript
- Host: GitHub
- URL: https://github.com/yoannchb-pro/inner-svg
- Owner: yoannchb-pro
- License: mit
- Created: 2023-05-26T00:34:48.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-05-26T15:50:42.000Z (about 3 years ago)
- Last Synced: 2025-10-21T12:45:31.409Z (8 months ago)
- Topics: angular, injection, javascript, react, svg, svg-inject, typescript, vuejs
- Language: TypeScript
- Homepage: https://yoannchb-pro.github.io/inner-svg/
- Size: 43 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# inner-svg
Inject svg into your html with only one attribute or with javascript
## Update
[See the Changelog](./CHANGELOG.md)
## Installation
### Node
```
$ npm i inner-svg-ts
```
And then
```js
const innerSVG = require("inner-svg-ts");
import innerSVG from "inner-svg-ts";
//or if you want only to work with attributes for react, angular, vuejs ...
import "inner-svg-ts";
```
### CDN
```html
```
## Demo
[Live demo on the github page](https://yoannchb-pro.github.io/inner-svg/index.html)
## How to use ?
### With attribute
> NOTE: You can modify as you want the attribute, the svg will automatically update. innerSVG also detect when a new element is write into the page or removed from the page.
The path can be relative or absolut for example `./assets/discord.svg` and `/static/discord.svg` will both work
```html
```
Will inject the svg into the current page with all the attributes derived from the original element (The id is not transfered to the svg)
```html
...
```
### In javascript
#### Init
```js
const injection = innerSVG(
document.querySelector("#element"),
"./assets/discord.svg"
);
```
#### Getters
- injection.element
- injection.svg
- injection.path
#### Methods
Update the path of the svg
```js
injection.updatePath("./assets/hearth.svg");
```
Update attributes from the original element
```js
injection.copySameAttributesFromOriginalElement();
```
Remove the svg
```js
injection.desctruct();
```
Handle svg loaded
```js
function callback(injection) {
console.log(injection.svg);
}
injection.onFirstLoad(callback); // will not be call if the path change
injection.onEachLoad(callback);
```