SvgIcon
Defined in: vanilla-integration/src/SvgIcon.ts:30
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 transitionInternal API
Section titled “Internal API”You can use this API to extend SvgIcon. This API is the same as in SvgImage, but with additional methods.
Use SvgIcon._updateWrapperBeforeUserAttrsSet, SvgIcon._updateWrapperAfterUserAttrsSet to set custom
wrapper (<span>) attributes.
SvgIcon._updateSvgBeforeUserAttrsSet should call super._updateSvgBeforeUserAttrsSet().
Extends
Section titled “Extends”Constructors
Section titled “Constructors”Constructor
Section titled “Constructor”new SvgIcon(
src,mountTo?):SvgIcon
Defined in: vanilla-integration/src/SvgIcon.ts:36
Parameters
Section titled “Parameters”string
mountTo?
Section titled “mountTo?”Returns
Section titled “Returns”SvgIcon
Overrides
Section titled “Overrides”Methods
Section titled “Methods”getColor()
Section titled “getColor()”getColor():
string
Defined in: vanilla-integration/src/SvgIcon.ts:143
Returns
Section titled “Returns”string
Current icon color or empty string, if color is unset
getColorTransition()
Section titled “getColorTransition()”getColorTransition():
string
Defined in: vanilla-integration/src/SvgIcon.ts:161
Returns
Section titled “Returns”string
Current icon color transition or empty string, if transition is unset
getContainer()
Section titled “getContainer()”getContainer():
undefined|Element
Defined in: vanilla-integration/src/SvgImage.ts:207
Returns
Section titled “Returns”undefined | Element
A container of this image, or undefined, if image is not mounted
Inherited from
Section titled “Inherited from”getSize()
Section titled “getSize()”getSize():
string
Defined in: vanilla-integration/src/SvgIcon.ts:125
Returns
Section titled “Returns”string
Current icon size or empty string, if size is unset
getSrc()
Section titled “getSrc()”getSrc():
undefined|string
Defined in: vanilla-integration/src/SvgImage.ts:200
Returns
Section titled “Returns”undefined | string
SVG source code
Inherited from
Section titled “Inherited from”getSvgEl()
Section titled “getSvgEl()”getSvgEl():
SVGElement
Defined in: vanilla-integration/src/SvgImage.ts:218
Returns <svg> element.
To assign attributes, use setSvgElAttrs instead.
Returns
Section titled “Returns”SVGElement
<svg> element
Inherited from
Section titled “Inherited from”getUseEl()
Section titled “getUseEl()”getUseEl():
SVGUseElement
Defined in: vanilla-integration/src/SvgImage.ts:229
Returns <use> element.
To assign attributes, use setSvgElAttrs instead.
Returns
Section titled “Returns”SVGUseElement
<use> element
Inherited from
Section titled “Inherited from”getWrapper()
Section titled “getWrapper()”getWrapper():
HTMLSpanElement
Defined in: vanilla-integration/src/SvgIcon.ts:103
Returns
Section titled “Returns”HTMLSpanElement
Wrapper (<span>) element
mount()
Section titled “mount()”mount(
to):this
Defined in: vanilla-integration/src/SvgIcon.ts:48
Mounts image to the given element
Parameters
Section titled “Parameters”Element or selector of an element to mount image to
Returns
Section titled “Returns”this
this
Overrides
Section titled “Overrides”setColor()
Section titled “setColor()”setColor(
color):SvgIcon
Defined in: vanilla-integration/src/SvgIcon.ts:134
Sets icon color. Empty string or undefined unsets color.
Parameters
Section titled “Parameters”Color to set, for example: "red", "var(--icon-color)".
undefined | string
Returns
Section titled “Returns”SvgIcon
this
setColorTransition()
Section titled “setColorTransition()”setColorTransition(
transition):SvgIcon
Defined in: vanilla-integration/src/SvgIcon.ts:152
Sets icon color transition. This transition is applied when icon color is changed.
Parameters
Section titled “Parameters”transition
Section titled “transition”string = DEFAULT_COLOR_TRANSITION
Transition to set, for example: "0.3s linear", "var(--icon-transition)"
Returns
Section titled “Returns”SvgIcon
this
setSize()
Section titled “setSize()”setSize(
size):SvgIcon
Defined in: vanilla-integration/src/SvgIcon.ts:112
Sets icon size. Empty string or undefined unsets size.
Parameters
Section titled “Parameters”Size to set, for example: "24px", "1rem"
undefined | string
Returns
Section titled “Returns”SvgIcon
this
setSrc()
Section titled “setSrc()”setSrc(
src):SvgIcon
Defined in: vanilla-integration/src/SvgImage.ts:189
Sets SVG source code
Parameters
Section titled “Parameters”string
SVG source code
Returns
Section titled “Returns”SvgIcon
this
Inherited from
Section titled “Inherited from”setSvgElAttrs()
Section titled “setSvgElAttrs()”setSvgElAttrs(
attrs):SvgIcon
Defined in: vanilla-integration/src/SvgImage.ts:115
Sets <svg> element attributes. It won’t remove id, class and style.
Parameters
Section titled “Parameters”Record<string, any>
Attributes to set
Returns
Section titled “Returns”SvgIcon
this
Inherited from
Section titled “Inherited from”setUseElAttrs()
Section titled “setUseElAttrs()”setUseElAttrs(
attrs):SvgIcon
Defined in: vanilla-integration/src/SvgImage.ts:152
Sets <use> element attributes. It won’t remove id, class and style.
Parameters
Section titled “Parameters”Record<string, any>
Attributes to set
Returns
Section titled “Returns”SvgIcon
this
Inherited from
Section titled “Inherited from”setWrapperAttrs()
Section titled “setWrapperAttrs()”setWrapperAttrs(
attrs):SvgIcon
Defined in: vanilla-integration/src/SvgIcon.ts:72
Sets wrapper (<span>) element attributes.
Warning: you can’t change class, size, color and color transition using this method
Parameters
Section titled “Parameters”Record<string, any>
Attributes to set
Returns
Section titled “Returns”SvgIcon
this
unmount()
Section titled “unmount()”unmount():
this
Defined in: vanilla-integration/src/SvgIcon.ts:53
Removes image from the container
Returns
Section titled “Returns”this
this