SvgImage

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

Basic SVG image. Implements SVG sprites. Adds <svg> element with the symbols to the <body>.

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 elements’ attributes. If you actually need to do so, override SvgImage._setRequiredSvgElAttrs and SvgImage._setRequiredUseElAttrs.

Extended by

SvgIcon

Constructors

Constructor

new SvgImage(src, mountTo?): SvgImage

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

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:51

Element containing this SvgImage (element passed to mount)

_src

protected _src: string | undefined

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

User-provided source code

_svgEl

protected readonly _svgEl: SVGElement

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

<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:66

Last onSrcUpdate call result

_useEl

protected readonly _useEl: SVGUseElement

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

<use> element

Methods

getContainer()

getContainer(): Element | undefined

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

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:169

Returns

string | undefined

SVG source code

getSvgEl()

getSvgEl(): SVGElement

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

Returns <svg> element.

To assign attributes, use setSvgElAttrs instead.

Returns

SVGElement

<svg> element

getUseEl()

getUseEl(): SVGUseElement

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

Returns <use> element.

To assign attributes, use setSvgElAttrs instead.

Returns

SVGUseElement

<use> element

mount()

mount(to): SvgImage

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

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:158

Sets SVG source code

Parameters

src

string

SVG source code

Returns

SvgImage

this

setSvgElAttrs()

setSvgElAttrs(attrs): SvgImage

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

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

Parameters

attrs

Record<string, SettableAttributeValue>

Attributes to set

Returns

SvgImage

this

setUseElAttrs()

setUseElAttrs(attrs): SvgImage

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

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

Parameters

attrs

Record<string, SettableAttributeValue>

Attributes to set

Returns

SvgImage

this

unmount()

unmount(): SvgImage

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

Removes image from the container

Returns

SvgImage

this

_setRequiredSvgElAttrs()

protected _setRequiredSvgElAttrs(): SvgImage

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

Sets required attributes to the <svg> element

Returns

SvgImage

this

_setRequiredUseElAttrs()

protected _setRequiredUseElAttrs(): SvgImage

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

Sets required attributes to the <use> element

Returns

SvgImage

this