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.
73 lines (72 loc) • 2.31 kB
TypeScript
import { onSrcUpdate } from "../integration-utils/index";
import { WebComponent, WebComponentDefinitionOptions } from './WebComponent';
import { CustomElement } from 'typed-custom-elements';
/**
* Basic SVG image. Implements SVG sprites. Adds `<svg>` element with the symbols to the `<body>`.
*
* Pass SVG source code to the `src` property, so the image will be rendered.
*
* Every attribute that starts with `svg-` string will be passed down to the `<svg>` element.
*
* Every attribute that starts with `use-` string will be passed down to the `<use>` element.
*
* @example
*
* // Import SVG source code:
* import imgSrc from "@/assets/image.svg?src";
*
* // Import web component:
* import { SvgImage } from "vite-awesome-svg-loader/web-components-integration";
*
* // Define a custom element:
* SvgImage.define();
*
* // Create image:
* const img = new SvgImage();
* // or:
* const img = document.createElement("svg-image");
*
* // Assign SVG source code to the image:
* img.src = imgSrc;
*
* // Add image to the DOM:
* document.body.appendChild(img);
*
* // Set attributes to <svg> element:
* img.setAttribute("svg-preserveAspectRatio", "xMaxYMin"); // Will set preserveAspectRatio="xMaxYMin"
*
* // Set attributes to <use> element:
* img.setAttribute("use-data-test", "use-el"); // will set data-test="use-el"
*/
export declare class SvgImage extends WebComponent implements CustomElement {
static readonly props: {
name: string;
default: string;
}[];
/** SVG source code */
src: string;
/**
* Last src update result
*/
protected _updateSrcRes: ReturnType<typeof onSrcUpdate>;
private readonly _svgEl;
private readonly _useEl;
/**
* `<use>` element
*/
get useEl(): SVGUseElement;
/**
* `<svg>` element
*/
get svgEl(): SVGElement;
constructor();
connectedCallback(): void;
disconnectedCallback(): void;
attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
/** @returns ID of a `<style>` element that styles this component */
getStyleId(): string;
private _handleSrcUpdate;
private _handleSvgAttrUpdate;
private _handleUseAttrUpdate;
static define(options?: WebComponentDefinitionOptions): void;
}