ranui/dist/components/icon/index.d.ts

A framework-agnostic Web Components UI library built on native custom elements, with TypeScript types, light/dark theming, SSR and PWA support.

import { RanElement } from '@/utils/index';
import { EventManager } from '@/utils/builder';
/** Register one icon. Consumer controls what gets bundled by what it imports. */
export declare const registerIcon: (name: string, source: unknown) => void;
/** Batch register icons. */
export declare const registerIcons: (icons: Record<string, unknown>) => void;
/**
 * Names of the SVGs ranui ships in `assets/icons/`. This tuple is the source of
 * truth for {@link RanIconName}; a unit test asserts it stays in sync with the
 * asset folder, so adding/removing an SVG without updating this list fails CI.
 */
export declare const RAN_ICON_NAMES: readonly ['add-user', 'arrow-down', 'book', 'check', 'check-circle', 'check-circle-fill', 'close', 'close-circle', 'close-circle-fill', 'copy', 'download', 'drop', 'eye', 'eye-close', 'fullscreen', 'github', 'globe', 'home', 'info-circle', 'info-circle-fill', 'issue', 'loading', 'loading-scene', 'lock', 'menu', 'message', 'more', 'plus', 'power-off', 'preview', 'refresh', 'search', 'setting', 'sort', 'team', 'unlock', 'user', 'warning-circle', 'warning-circle-fill', 'without-content', 'zoom-in', 'zoom-out'];
/** A name from ranui's bundled icon set (see {@link registerBuiltinIcons}). */
export type RanIconName = (typeof RAN_ICON_NAMES)[number];
export declare class Icon extends RanElement {
    private readonly isDev;
    _events: EventManager;
    static get observedAttributes(): string[];
    _icon?: SVGElement;
    _div: HTMLElement;
    _shadowDom: ShadowRoot;
    _onIconRegistered: (event: Event) => void;
    constructor();
    get name(): string;
    set name(value: string);
    get size(): string;
    set size(value: string);
    get color(): string;
    set color(value: string);
    get spin(): boolean;
    set spin(value: boolean);
    get decorative(): boolean;
    set decorative(value: boolean);
    get ariaLabel(): string;
    set ariaLabel(value: string);
    get sheet(): string;
    set sheet(value: string);
    handlerExternalCss: () => void;
    syncA11y: () => void;
    /**
     * @description: 设置 icon 的 svg
     * @return {*}
     */
    setIcon: () => void;
    isSvgText: (value: string) => boolean;
    parseSvg: (svgContent: string) => SVGElement | undefined;
    renderSvg: (svgContent: string, iconName: string) => void;
    /**
     * @description: 设置 icon 的大小
     * @return {*}
     */
    setSize: () => void;
    /**
     * @description: 设置 icon 的颜色
     * @return {*}
     */
    setColor: () => void;
    /**
     * @description: 设置 icon 是否旋转
     * @return {*}
     */
    setSpin: () => void;
    connectedCallback(): void;
    disconnectedCallback(): void;
    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
}