SvgIcon

Defined in: vanilla-integration/src/SvgIcon.ts:21

Basic SVG icon, extends SvgImage.

Usage:

import iconSrc from "./path/to/icon.svg";

const icon = new SvgIcon(iconSrc, ".my-container") // Create and mount icon
  .setContainerAttrs({ title: "My icon" }) // Set container attributes
  .setColor("red") // Set icon color to red
  .setColorTransition("0.2s ease-out"); // Change icon color transition

Extends

• SvgImage

Constructors

Constructor

new SvgIcon(src, mountTo?): SvgIcon

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

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

SvgIcon

Overrides

SvgImage.constructor

Properties

_color

protected _color: string = ""

Defined in: vanilla-integration/src/SvgIcon.ts:35

Icon color

---

_colorTransition

protected _colorTransition: string = ""

Defined in: vanilla-integration/src/SvgIcon.ts:40

Icon color transition

---

_container

protected _container: Element | undefined

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

Element containing this SvgImage (element passed to mount)

Inherited from

SvgImage._container

---

_size

protected _size: string = ""

Defined in: vanilla-integration/src/SvgIcon.ts:30

Icon size

---

_span

protected _span: HTMLSpanElement

Defined in: vanilla-integration/src/SvgIcon.ts:25

<span> element that wraps _svgEl

---

_src

protected _src: string | undefined

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

User-provided source code

Inherited from

SvgImage._src

---

_svgAttrs

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

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

User-provided attributes

Inherited from

SvgImage._svgAttrs

---

_svgEl

protected readonly _svgEl: SVGElement

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

<svg> element

Inherited from

SvgImage._svgEl

---

_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

Inherited from

SvgImage._updateSrcRes

---

_useEl

protected readonly _useEl: SVGUseElement

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

<use> element

Inherited from

SvgImage._useEl

---

_useElAttrs

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

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

User-provided attributes

Inherited from

SvgImage._useElAttrs

Methods

_setWrapperClass()

protected _setWrapperClass(): void

Defined in: vanilla-integration/src/SvgIcon.ts:96

Sets wrapper’s (_span) class property to match stylesheet

Returns

void

---

_updateSvgEl()

protected _updateSvgEl(): this

Defined in: vanilla-integration/src/SvgIcon.ts:70

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

Returns

this

this

Overrides

SvgImage._updateSvgEl

---

_updateUseEl()

protected _updateUseEl(): SvgIcon

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

Updates <use> element attributes

Returns

SvgIcon

this

Inherited from

SvgImage._updateUseEl

---

getColor()

getColor(): string

Defined in: vanilla-integration/src/SvgIcon.ts:142

Returns

string

Current icon color or empty string, if color is unset

---

getColorTransition()

getColorTransition(): string

Defined in: vanilla-integration/src/SvgIcon.ts:160

Returns

string

Current icon color transition or empty string, if transition is unset

---

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

Inherited from

SvgImage.getContainer

---

getSize()

getSize(): string

Defined in: vanilla-integration/src/SvgIcon.ts:124

Returns

string

Current icon size or empty string, if size is unset

---

getSrc()

getSrc(): string | undefined

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

Returns

string | undefined

SVG source code

Inherited from

SvgImage.getSrc

---

getSvgEl()

getSvgEl(): SVGElement

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

Returns <svg> element.

To assign attributes, use setSvgElAttrs instead.

Returns

SVGElement

<svg> element

Inherited from

SvgImage.getSvgEl

---

getUseEl()

getUseEl(): SVGUseElement

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

Returns <use> element.

To assign attributes, use setSvgElAttrs instead.

Returns

SVGUseElement

<use> element

Inherited from

SvgImage.getUseEl

---

getWrapper()

getWrapper(): HTMLSpanElement

Defined in: vanilla-integration/src/SvgIcon.ts:103

Returns

HTMLSpanElement

Wrapper (<span>) element

---

mount()

mount(to): this

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

Mounts image to the given element

Parameters

to

ElementOrSelector

Element or selector of an element to mount image to

Returns

this

this

Overrides

SvgImage.mount

---

setColor()

setColor(color): SvgIcon

Defined in: vanilla-integration/src/SvgIcon.ts:133

Sets icon color. Empty string or undefined unsets color.

Parameters

color

Color to set, for example: "red", "var(--icon-color)".

string | undefined

Returns

SvgIcon

this

---

setColorTransition()

setColorTransition(transition): SvgIcon

Defined in: vanilla-integration/src/SvgIcon.ts:151

Sets icon color transition. This transition is applied when icon color is changed.

Parameters

transition

string = DEFAULT_COLOR_TRANSITION

Transition to set, for example: "0.3s linear", "var(--icon-transition)"

Returns

SvgIcon

this

---

setSize()

setSize(size): SvgIcon

Defined in: vanilla-integration/src/SvgIcon.ts:112

Sets icon size. Empty string or undefined unsets size.

Parameters

size

Size to set, for example: "24px", "1rem"

string | undefined

Returns

SvgIcon

this

---

setSrc()

setSrc(src): SvgIcon

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

Sets SVG source code

Parameters

src

string

SVG source code

Returns

SvgIcon

this

Inherited from

SvgImage.setSrc

---

setSvgElAttrs()

setSvgElAttrs(attrs): SvgIcon

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

SvgIcon

this

Inherited from

SvgImage.setSvgElAttrs

---

setUseElAttrs()

setUseElAttrs(attrs): SvgIcon

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

SvgIcon

this

Inherited from

SvgImage.setUseElAttrs

---

setWrapperAttrs()

setWrapperAttrs(attrs): SvgIcon

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

Sets wrapper (<span>) element attributes.

Warning: you can’t change class, size, color and color transition using this method

Parameters

attrs

Record<string, any>

Attributes to set

Returns

SvgIcon

this

---

unmount()

unmount(): this

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

Removes image from the container

Returns

this

this

Overrides

SvgImage.unmount