vite-awesome-svg-loader/vanilla-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 { SvgImage } from './SvgImage';
import { ElementOrSelector, SettableAttributeValue } from "../common-utils/index";
/**
 * Basic SVG icon, extends {@link SvgImage}.
 *
 * @example
 *
 * import iconSrc from "./path/to/icon.svg";
 * import { SvgIcon } from "vite-awesome-svg-loader/vanilla-integration";
 *
 * const icon = new SvgIcon(iconSrc, ".my-container") // Create and mount icon
 *   .setContainerAttrs({ title: "My icon" }) // Set container attributes
 *   .setColor("red") // Set icon color to red
 *   .setColorTransition("0.2s ease-out"); // Change icon color transition
 */
export declare class SvgIcon extends SvgImage {
    /**
     * `<span>` element that wraps {@link _svgEl}
     */
    protected _span: HTMLSpanElement;
    /**
     * Icon size
     */
    protected _size: string;
    /**
     * Icon color
     */
    protected _color: string;
    /**
     * Icon color transition
     */
    protected _colorTransition: string;
    /**
     * @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);
    mount(to: ElementOrSelector): this;
    unmount(): this;
    protected _setRequiredSvgElAttrs(): 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(attrs: Record<string, SettableAttributeValue>): this;
    /**
     * Sets wrapper's ({@link _span}) `class` property to match stylesheet
     */
    protected _setWrapperClass(): void;
    /**
     * @returns Wrapper (`<span>`) element
     */
    getWrapper(): HTMLSpanElement;
    /**
     * Sets icon size.
     *
     * @param size Size to set, for example: `"24px"`, `"1rem"`. An empty string or `undefined` unsets size.
     * @returns this
     */
    setSize(size: string | undefined): this;
    /**
     * @returns Current icon size or empty string, if size is unset
     */
    getSize(): string;
    /**
     * Sets icon color
     *
     * @param color  Color to set, for example: `"red"`, `"var(--icon-color)"`. An empty string or `undefined` unsets
     * color.
     * @returns this
     */
    setColor(color: string | undefined): this;
    /**
     * @returns Current icon color or empty string, if color is unset
     */
    getColor(): string;
    /**
     * 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(transition: string | undefined): this;
    /**
     * @returns Current icon color transition or empty string, if transition is unset
     */
    getColorTransition(): string;
}