SvgIcon

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

Basic SVG icon, extends SvgImage.

Example

import iconSrc from "./path/to/icon.svg";
import { SvgIcon } from "vite-awesome-svg-loader/vanilla-integration";

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

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

Icon color

---

_colorTransition

protected _colorTransition: string = ""

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

Icon color transition

---

_container

protected _container: Element | undefined

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

Element containing this SvgImage (element passed to mount)

Inherited from

SvgImage._container

---

_size

protected _size: string = ""

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

Icon size

---

_span

protected _span: HTMLSpanElement

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

<span> element that wraps _svgEl

---

_src

protected _src: string | undefined

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

User-provided source code

Inherited from

SvgImage._src

---

_svgEl

protected readonly _svgEl: SVGElement

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

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

Last onSrcUpdate call result

Inherited from

SvgImage._updateSrcRes

---

_useEl

protected readonly _useEl: SVGUseElement

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

<use> element

Inherited from

SvgImage._useEl

Methods

getColor()

getColor(): string

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

Returns

string

Current icon color or empty string, if color is unset

---

getColorTransition()

getColorTransition(): string

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

Returns

string

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

---

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

Inherited from

SvgImage.getContainer

---

getSize()

getSize(): string

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

Returns

string

Current icon size or empty string, if size is unset

---

getSrc()

getSrc(): string | undefined

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

Returns

string | undefined

SVG source code

Inherited from

SvgImage.getSrc

---

getSvgEl()

getSvgEl(): SVGElement

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

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

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

Returns

HTMLSpanElement

Wrapper (<span>) element

---

mount()

mount(to): this

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

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

Parameters

color

Color to set, for example: "red", "var(--icon-color)". An empty string or undefined unsets color.

string | undefined

Returns

SvgIcon

this

---

setColorTransition()

setColorTransition(transition): SvgIcon

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

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

Parameters

transition

Transition to set, for example: "0.2s ease-out", "var(--icon-transition)" An empty string or undefined sets default transition. "none" disables transition.

string | undefined

Returns

SvgIcon

this

---

setSize()

setSize(size): SvgIcon

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

Sets icon size.

Parameters

size

Size to set, for example: "24px", "1rem". An empty string or undefined unsets size.

string | undefined

Returns

SvgIcon

this

---

setSrc()

setSrc(src): SvgIcon

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

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

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

Parameters

attrs

Record<string, SettableAttributeValue>

Attributes to set

Returns

SvgIcon

this

Inherited from

SvgImage.setSvgElAttrs

---

setUseElAttrs()

setUseElAttrs(attrs): SvgIcon

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

SvgIcon

this

Inherited from

SvgImage.setUseElAttrs

---

setWrapperAttrs()

setWrapperAttrs(attrs): SvgIcon

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

Sets wrapper (<span>) element attributes.

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

Parameters

attrs

Record<string, SettableAttributeValue>

Attributes to set

Returns

SvgIcon

this

---

unmount()

unmount(): this

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

Removes image from the container

Returns

this

this

Overrides

SvgImage.unmount

---

_setRequiredSvgElAttrs()

protected _setRequiredSvgElAttrs(): SvgIcon

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

Sets required attributes to the <svg> element

Returns

SvgIcon

this

Overrides

SvgImage._setRequiredSvgElAttrs

---

_setRequiredUseElAttrs()

protected _setRequiredUseElAttrs(): SvgIcon

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

Sets required attributes to the <use> element

Returns

SvgIcon

this

Inherited from

SvgImage._setRequiredUseElAttrs

---

_setWrapperClass()

protected _setWrapperClass(): void

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

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

Returns

void