vite-awesome-svg-loader
Version:
A universal Vite SVG loader. Imports SVGs as source code, base64 and data URI. Preserves stroke width. Replaces colors with currentColor or custom colors. Creates SVG sprites. Optimizes SVGs.
226 lines (225 loc) • 6.2 kB
JavaScript
import { N as o, T as i, z as _, A as l } from "../integration-utils/index-Bs_mjsj3.js";
import { f as n, c as a, a as r, u as e } from "../common-utils/index-YJ0rTXLH.js";
class u {
/**
* User-provided source code
*/
_src;
/**
* Element containing this {@link SvgImage} (element passed to {@link mount})
*/
_container;
/**
* `<svg>` element
*/
_svgEl;
/**
* `<use>` element
*/
_useEl;
/**
* Last {@link onSrcUpdate} call result
*/
_updateSrcRes = {};
/**
* @param src SVG source code
* @param mountTo Element or selector of an element to mount image to. If not provided, image won't be mounted.
*/
constructor(t, s) {
this._svgEl = document.createElementNS("http://www.w3.org/2000/svg", "svg"), this._useEl = document.createElementNS("http://www.w3.org/2000/svg", "use"), this._svgEl.appendChild(this._useEl), this.setSrc(t), s && this.mount(s);
}
/**
* Mounts image to the given element
* @param to Element or selector of an element to mount image to
* @returns this
*/
mount(t) {
return this._container = n(this._svgEl, t), this;
}
/**
* Removes image from the container
* @returns this
*/
unmount() {
return this._svgEl.parentElement?.removeChild(this._svgEl), this._container = void 0, i(this._updateSrcRes.id), this;
}
/**
* Sets `<svg>` element attributes. It won't remove id, class and style.
* @param attrs Attributes to set
* @returns this
*/
setSvgElAttrs(t) {
return r(this._svgEl), e(this._svgEl, t), this._setRequiredSvgElAttrs(), this;
}
/**
* Sets required attributes to the `<svg>` element
* @returns this
*/
_setRequiredSvgElAttrs() {
return this._updateSrcRes.attrs && e(this._svgEl, this._updateSrcRes.attrs), this;
}
/**
* Sets `<use>` element attributes. It won't remove `id`, `class` and `style`.
* @param attrs Attributes to set
* @returns this
*/
setUseElAttrs(t) {
return r(this._useEl), e(this._useEl, t), this._setRequiredUseElAttrs(), this;
}
/**
* Sets required attributes to the `<use>` element
* @returns this
*/
_setRequiredUseElAttrs() {
return this._updateSrcRes.id && e(this._useEl, { href: "#" + this._updateSrcRes.id }), this;
}
/**
* Sets SVG source code
* @param src SVG source code
* @returns this
*/
setSrc(t) {
return this._updateSrcRes = _(this._src, t), this._src = t, this._setRequiredSvgElAttrs(), this._setRequiredUseElAttrs(), this;
}
/**
* @returns SVG source code
*/
getSrc() {
return this._src;
}
/**
* @returns A container of this image, or `undefined`, if image is not mounted
*/
getContainer() {
return this._container;
}
/**
* Returns `<svg>` element.
*
* To assign attributes, use {@link setSvgElAttrs} instead.
*
* @returns `<svg>` element
*/
getSvgEl() {
return this._svgEl;
}
/**
* Returns `<use>` element.
*
* To assign attributes, use {@link setSvgElAttrs} instead.
*
* @returns `<use>` element
*/
getUseEl() {
return this._useEl;
}
}
class d extends u {
/**
* `<span>` element that wraps {@link _svgEl}
*/
_span;
/**
* Icon size
*/
_size = "";
/**
* Icon color
*/
_color = "";
/**
* Icon color transition
*/
_colorTransition = "";
/**
* @param src SVG source code
* @param mountTo Element or selector of an element to mount image to. If not provided, image won't be mounted.
*/
constructor(t, s) {
super(t), o(), this._span = document.createElement("span"), this._setWrapperClass(), this._span.appendChild(this._svgEl), this.setColorTransition(""), s && this.mount(s);
}
mount(t) {
return this._container = n(this._span, t), this;
}
unmount() {
return this._span.parentElement?.removeChild(this._span), this._container = void 0, i(this._updateSrcRes.id), this;
}
_setRequiredSvgElAttrs() {
return super._setRequiredSvgElAttrs(), a(this._svgEl, "aria-hidden", "true"), this;
}
/**
* Sets wrapper (`<span>`) element attributes.
*
* **Warning**: you can't change `class`, size, color and color transition using this method
*
* @param attrs Attributes to set
* @returns this
*/
setWrapperAttrs(t) {
return r(this._span), e(this._span, t), this.setSize(this._size), this.setColor(this._color), this.setColorTransition(this._colorTransition), this._setWrapperClass(), this;
}
/**
* Sets wrapper's ({@link _span}) `class` property to match stylesheet
*/
_setWrapperClass() {
this._span.classList.add("vite-awesome-svg-loader-icon");
}
/**
* @returns Wrapper (`<span>`) element
*/
getWrapper() {
return this._span;
}
/**
* Sets icon size.
*
* @param size Size to set, for example: `"24px"`, `"1rem"`. An empty string or `undefined` unsets size.
* @returns this
*/
setSize(t) {
return t ||= "", this._span.style.setProperty("--size", t), this._size = t, this;
}
/**
* @returns Current icon size or empty string, if size is unset
*/
getSize() {
return this._size;
}
/**
* Sets icon color
*
* @param color Color to set, for example: `"red"`, `"var(--icon-color)"`. An empty string or `undefined` unsets
* color.
* @returns this
*/
setColor(t) {
return t ||= "", this._span.style.setProperty("--color", t), this._color = t, this;
}
/**
* @returns Current icon color or empty string, if color is unset
*/
getColor() {
return this._color;
}
/**
* Sets icon color transition. This transition is applied when icon color is changed.
*
* @param transition Transition to set, for example: `"0.2s ease-out"`, `"var(--icon-transition)"`
* An empty string or `undefined` sets default transition. `"none"` disables transition.
* @returns this
*/
setColorTransition(t) {
return t ||= l, this._span.style.setProperty("--color-transition", t), this._colorTransition = t, this;
}
/**
* @returns Current icon color transition or empty string, if transition is unset
*/
getColorTransition() {
return this._colorTransition;
}
}
export {
d,
u
};
//# sourceMappingURL=index-CGvnkkKj.js.map