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.
131 lines (130 loc) • 4.33 kB
TypeScript
import { onSrcUpdate } from "../integration-utils/index";
import { ElementOrSelector, SettableAttributeValue } from "../common-utils/index";
/**
* Basic SVG image. Implements SVG sprites. Adds `<svg>` element with the symbols to the `<body>`.
*
* ### 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 <svg> element attributes
* image.setUseElAttrs({ className: "my-svg-symbol-use-el" }); // Change <use> 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 <svg> element
* console.log(image.getUseEl()); // Get and print image <use> 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;
/**
* `<svg>` element
*/
protected readonly _svgEl: SVGElement;
/**
* `<use>` element
*/
protected readonly _useEl: SVGUseElement;
/**
* Last {@link onSrcUpdate} call result
*/
protected _updateSrcRes: ReturnType<typeof onSrcUpdate>;
/**
* @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 `<svg>` element attributes. It won't remove id, class and style.
* @param attrs Attributes to set
* @returns this
*/
setSvgElAttrs(attrs: Record<string, SettableAttributeValue>): this;
/**
* Sets required attributes to the `<svg>` element
* @returns this
*/
protected _setRequiredSvgElAttrs(): this;
/**
* Sets `<use>` element attributes. It won't remove `id`, `class` and `style`.
* @param attrs Attributes to set
* @returns this
*/
setUseElAttrs(attrs: Record<string, SettableAttributeValue>): this;
/**
* Sets required attributes to the `<use>` 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 `<svg>` element.
*
* To assign attributes, use {@link setSvgElAttrs} instead.
*
* @returns `<svg>` element
*/
getSvgEl(): SVGElement;
/**
* Returns `<use>` element.
*
* To assign attributes, use {@link setSvgElAttrs} instead.
*
* @returns `<use>` element
*/
getUseEl(): SVGUseElement;
}