import { onSrcUpdate } from "../integration-utils/index"; import { ElementOrSelector, SettableAttributeValue } from "../common-utils/index"; /** * Basic SVG image. Implements SVG sprites. Adds `` element with the symbols to the ``. * * ### Basic usage * * ```ts * 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 element attributes * image.setUseElAttrs({ className: "my-svg-symbol-use-el" }); // Change 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 element * console.log(image.getUseEl()); // Get and print image 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 {@link SvgImage#mount} to change component markup. * * You probably don't need to override required elements' attributes. If you actually need to do so, override * {@link SvgImage._setRequiredSvgElAttrs} and {@link SvgImage._setRequiredUseElAttrs}. */ export declare class SvgImage { /** * User-provided source code */ protected _src: string | undefined; /** * Element containing this {@link SvgImage} (element passed to {@link mount}) */ protected _container: Element | undefined; /** * `` element */ protected readonly _svgEl: SVGElement; /** * `` element */ protected readonly _useEl: SVGUseElement; /** * Last {@link onSrcUpdate} call result */ protected _updateSrcRes: ReturnType; /** * @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(src: string, mountTo?: ElementOrSelector); /** * Mounts image to the given element * @param to Element or selector of an element to mount image to * @returns this */ mount(to: ElementOrSelector): this; /** * Removes image from the container * @returns this */ unmount(): this; /** * Sets `` element attributes. It won't remove id, class and style. * @param attrs Attributes to set * @returns this */ setSvgElAttrs(attrs: Record): this; /** * Sets required attributes to the `` element * @returns this */ protected _setRequiredSvgElAttrs(): this; /** * Sets `` element attributes. It won't remove `id`, `class` and `style`. * @param attrs Attributes to set * @returns this */ setUseElAttrs(attrs: Record): this; /** * Sets required attributes to the `` element * @returns this */ protected _setRequiredUseElAttrs(): this; /** * Sets SVG source code * @param src SVG source code * @returns this */ setSrc(src: string): this; /** * @returns SVG source code */ getSrc(): string | undefined; /** * @returns A container of this image, or `undefined`, if image is not mounted */ getContainer(): Element | undefined; /** * Returns `` element. * * To assign attributes, use {@link setSvgElAttrs} instead. * * @returns `` element */ getSvgEl(): SVGElement; /** * Returns `` element. * * To assign attributes, use {@link setSvgElAttrs} instead. * * @returns `` element */ getUseEl(): SVGUseElement; }