SvgImage

Defined in: vanilla-integration/src/SvgImage.ts:44

Basic SVG image. Implements SVG sprites.

Will create <svg> element that contains all symbols, add passed source code to it and reuse it later.

Basic usage

import imageSrc from "./path/to/image.svg";
import anotherImageSrc from "./path/to/another/image.svg";
import { SvgImage } from "vite-awesome-svg-loader/vanilla-integration";

const container = document.createElement("div"); // Where to mount SVG
const image = new SvgImage(imageSrc, container); // Create image and mount it to the container
image.setSvgElAttrs({ id: "my-svg-symbol" }); // Change <svg> element attributes
image.setUseElAttrs({ className: "my-svg-symbol-use-el" }); // Change <use> element attributes
image.setSrc(anotherImageSrc); // Change SVG source code
console.log(image.getSrc()); // Get and print image source code
console.log(image.getContainer()); // Get and print image container
console.log(image.getSvgEl()); // Get and print image <svg> element
console.log(image.getUseEl()); // Get and print image <use> element
image.unmount(); // Remove image from the container

// All operations are chainable, so you can do this:

const image2 = new SvgImage(imageSrc)
  .mount(container)
  .setSvgElAttrs({ id: "my-svg-symbol" })
  .setUseElAttrs({ className: "my-svg-symbol-use-el" });

Internal API

You can use this API to extend SvgImage.

Use constructor() and SvgImage#mount to change component markup.

You probably don’t need to override required element’s attributes. If you actually need to do so, override SvgImage._updateSvgEl

Extended by

• SvgIcon

Constructors

Constructor

new SvgImage(src, mountTo?): SvgImage

Defined in: vanilla-integration/src/SvgImage.ts:84

Parameters

src

string

SVG source code

mountTo?

ElementOrSelector

Element or selector of an element to mount image to. If not provided, image won’t be mounted.

Returns

SvgImage

Properties

_container

protected _container: Element | undefined

Defined in: vanilla-integration/src/SvgImage.ts:53

Element containing this SvgImage (element passed to mount)

---

_src

protected _src: string | undefined

Defined in: vanilla-integration/src/SvgImage.ts:48

User-provided source code

---

_svgAttrs

protected _svgAttrs: Record<string, any> = {}

Defined in: vanilla-integration/src/SvgImage.ts:68

User-provided attributes

---

_svgEl

protected readonly _svgEl: SVGElement

Defined in: vanilla-integration/src/SvgImage.ts:58

<svg> element

---

_updateSrcRes

protected _updateSrcRes: { attrs?: undefined; id?: undefined; } | { attrs: { height: string; viewBox: string; width: string; }; id: string; } | { attrs?: undefined; id: string; } = {}

Defined in: vanilla-integration/src/SvgImage.ts:78

Last onSrcUpdate call result

---

_useEl

protected readonly _useEl: SVGUseElement

Defined in: vanilla-integration/src/SvgImage.ts:63

<use> element

---

_useElAttrs

protected _useElAttrs: Record<string, any> = {}

Defined in: vanilla-integration/src/SvgImage.ts:73

User-provided attributes

Methods

_updateSvgEl()

protected _updateSvgEl(): SvgImage

Defined in: vanilla-integration/src/SvgImage.ts:131

Updates SVG element: sets SVG source code, clears previous attributes, sets new attributes

Returns

SvgImage

this

---

_updateUseEl()

protected _updateUseEl(): SvgImage

Defined in: vanilla-integration/src/SvgImage.ts:156

Updates <use> element attributes

Returns

SvgImage

this

---

getContainer()

getContainer(): Element | undefined

Defined in: vanilla-integration/src/SvgImage.ts:189

Returns

Element | undefined

A container of this image, or undefined, if image is not mounted

---

getSrc()

getSrc(): string | undefined

Defined in: vanilla-integration/src/SvgImage.ts:182

Returns

string | undefined

SVG source code

---

getSvgEl()

getSvgEl(): SVGElement

Defined in: vanilla-integration/src/SvgImage.ts:200

Returns <svg> element.

To assign attributes, use setSvgElAttrs instead.

Returns

SVGElement

<svg> element

---

getUseEl()

getUseEl(): SVGUseElement

Defined in: vanilla-integration/src/SvgImage.ts:211

Returns <use> element.

To assign attributes, use setSvgElAttrs instead.

Returns

SVGUseElement

<use> element

---

mount()

mount(to): SvgImage

Defined in: vanilla-integration/src/SvgImage.ts:101

Mounts image to the given element

Parameters

to

ElementOrSelector

Element or selector of an element to mount image to

Returns

SvgImage

this

---

setSrc()

setSrc(src): SvgImage

Defined in: vanilla-integration/src/SvgImage.ts:171

Sets SVG source code

Parameters

src

string

SVG source code

Returns

SvgImage

this

---

setSvgElAttrs()

setSvgElAttrs(attrs): SvgImage

Defined in: vanilla-integration/src/SvgImage.ts:122

Sets <svg> element attributes. It won’t remove id, class and style.

Parameters

attrs

Record<string, any>

Attributes to set

Returns

SvgImage

this

---

setUseElAttrs()

setUseElAttrs(attrs): SvgImage

Defined in: vanilla-integration/src/SvgImage.ts:147

Sets <use> element attributes. It won’t remove id, class and style.

Parameters

attrs

Record<string, any>

Attributes to set

Returns

SvgImage

this

---

unmount()

unmount(): SvgImage

Defined in: vanilla-integration/src/SvgImage.ts:110

Removes image from the container

Returns

SvgImage

this