vite-plugin-svg-sfc/index.d.ts

Convert SVGs to Vue single file component(SFC), support <style> tag

import { Plugin as VitePlugin } from "vite";
import { Config, CustomPlugin, PluginConfig } from "svgo";
/**
 * Called on each svg root element, modify the attrs in place.
 *
 * @param attrs Attributes of the <svg> element.
 * @param path absolute file path.
 * @param passes current pass count.
 */
export type ModifySVGProps = (attrs: Record<string, any>, path: string, passes: number) => void;
type SVGPropsParam = Record<string, any> | ModifySVGProps;
/**
 * Replace attributes with reactive value, used when `responsive` is true.
 *
 * If you prefer to control the size with CSS,
 * you can use modifySVGAttrs plugin to remove `width` & `height`.
 */
export declare const responsiveSVGAttrs: CustomPlugin;
/**
 * Modify attributes of the outermost <svg> element, used by `svgProps` option.
 *
 * SVGO has a addAttributesToSVGElement plugin similar to this,
 * but it cannot override existing attributes.
 *
 * @param params Attributes to add to <svg>, or a function to modify attributes.
 */
export declare function modifySVGAttrs(params: SVGPropsParam): CustomPlugin;
/**
 * Remove all <style> elements and collect their content。
 *
 * @param styles store <style>'s content.
 */
export declare function extractCSS(styles: string[]): PluginConfig;
type PluginConfigEx = {
    name: "extractCSS";
} | {
    name: "responsiveSVGAttrs";
} | {
    name: "modifySVGAttrs";
    params?: SVGPropsParam;
};
type PluginEx = PluginConfig | PluginConfigEx | PluginConfigEx["name"];
export interface SVGOptions extends Omit<Config, "plugins"> {
    plugins?: PluginEx[];
}
export interface SVGSFCOptions {
    /**
     * When set to true, extract all style elements in the svg and put
     * their content into a scoped SFC style block.
     *
     * @default true
     */
    extractStyles?: boolean;
    /**
     * Perform minification for SVG.
     *
     * @default true on production mode and false otherwise.
     */
    minify?: boolean;
    /**
     * When set to true, some attributes on <svg> will be replaced with reactive value:
     * 1）set width & height to "1em".
     * 2）set fill and stroke to "currentColor" if it's not transparent。
     *
     * @default true
     */
    responsive?: boolean;
    /**
     * Modify attributes of the root SVG tag.
     *
     * @default undefined
     */
    svgProps?: SVGPropsParam;
    /**
     * Specify SVGO config, set to false to disable processing SVG data.
     *
     * If `svgo.plugins` is specified, the `extractStyles`, `minify`, `svgProps`,
     * `responsive` options and builtin plugins are ignored, you can add them manually:
     *
     * @example
     * import svgSfc from "vite-plugin-svg-sfc";
     *
     * svgSfc({
     *     svgo: {
     *         plugins: [
     *             "responsiveSVGAttrs",
     *             "extractCSS",
     *             "preset-default",
     *             {
     *                 name: "modifySVGAttrs",
     *                 params(attrs) {
     * 	                   delete attrs.xmlns;
     * 	                   delete attrs.version;
     * 	                   delete attrs["xml:space"];
     *                 }
     *             }
     *         ]
     *     }
     * });
     *
     * @default {}
     */
    svgo?: SVGOptions | false;
    /**
     * Make `id` attributes of elements in SVG component per-instance unique,
     * requires Vue 3.5 `useId` function.
     *
     * This feature is useful when you need link elements by id inside SVG.
     *
     * @default false
     */
    uniqueId?: boolean;
}
export declare class SVGSFCConvertor {
    private readonly plugins;
    private readonly styles;
    private readonly idMap;
    private readonly svgo?;
    constructor(options?: SVGSFCOptions);
    private resolve;
    private applyPresets;
    /**
     * Convert the SVG XML to Vue SFC code.
     *
     * @param svg the SVG code.
     * @param path The path of the SVG file, used by plugins.
     */
    convert(svg: string, path?: string): string;
}
export interface SVGSFCPluginOptions extends SVGSFCOptions {
    /**
     * SVG will be imported as SFC using the query parameter.
     *
     * @example
     * // vite.config.js
     * export default defineConfig({
     *     plugins: [svgSfc({ mark: "component" }), vue()],
     * });
     *
     * // Vue component.
     * import Icon from "../assets/my-icon.svg?component";
     *
     * @default "sfc"
     */
    mark?: string;
}
/**
 * Convert SVG to Vue SFC, you need another plugin to process the .vue file。
 */
export default function (options?: SVGSFCPluginOptions): VitePlugin;
export {};