vite-awesome-svg-loader/web-components-integration/SvgIcon.d.ts

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.

import { WebComponent, WebComponentDefinitionOptions } from './WebComponent';
/**
 * Basic SVG icon.
 *
 * If you plan to define {@link SvgImage} under a non-default tag, define it before creating SVG icons. Otherwise,
 * an error will be thrown.
 *
 * @example
 *
 * // Import SVG source code:
 * import imgSrc from "@/assets/image.svg?src";
 *
 * // Import web component:
 * import { SvgIcon } from "vite-awesome-svg-loader/web-components-integration";
 *
 * // Define a custom element:
 * SvgIcon.define();
 *
 * // Create icon:
 * const icon = new SvgIcon();
 * // or:
 * const icon = document.createElement("svg-icon");
 *
 * // Assign SVG source code to the image:
 * icon.src = imgSrc;
 *
 * // Stylize icon:
 * icon.color = "red";
 * icon.size = "24px";
 * icon.colorTransition = "0.2s ease-out";
 *
 * // Add image to the DOM:
 * document.body.appendChild(icon);
 */
export declare class SvgIcon extends WebComponent {
    static DEFAULT_COLOR_TRANSITION: string;
    static readonly props: (string | {
        name: string;
        default: string;
    })[];
    /**
     * Image source code
     */
    src?: string;
    /**
     * Icon size. Empty string unsets size.
     */
    size?: string;
    /**
     * Icon color. Empty string unsets color.
     */
    color?: string;
    /**
     * Icon color transition. Empty string unsets transition.
     *
     * To set default value, use {@link DEFAULT_COLOR_TRANSITION}.
     */
    colorTransition: string;
    /**
     * Wrapped `SvgImage` element
     */
    private _svgImage;
    constructor();
    connectedCallback(): void;
    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
    static define(options?: WebComponentDefinitionOptions): void;
}