inner-svg

Inject svg into your html with only one attribute or with javascript

Update

See the Changelog

Installation

$3

``
$ 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";
`

$3

`html

`

Demo

Live demo on the github page

How to use ?

$3

> 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
id="originalElement"
class="fill-red-500"
title="some svg"
data-i-svg="./assets/discord.svg"
>
`

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

`

$3

#### 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);
``