@svelte-put/preprocess-inline-svg/dist/vite/index.d.ts

minimal svg inliner from local resources at build time

import { I as InlineSvgConfig, a as resolveSources, S as SourceConfig } from '../preprocessor.internals-yao1xFqK.js';
import { Plugin } from 'vite';
import 'magic-string';

interface ViteInlineSvgConfig extends InlineSvgConfig {
    /** file extensions to search & transform in vite plugin. Default to `.svelte` */
    extension?: string | string[];
    /** svg extensions for file watcher in vite dev server. Default to `.svg` */
    svgExtension?: string | string[];
    /** whether to enable source typing generation in vite dev server */
    sourceTypingGeneration?: boolean;
}

/**
 * @package
 */
declare const DEFAULT_VITE_PLUGIN_CONFIG: {
    extension: string[];
    svgExtension: string[];
    sourceTypingGeneration: true;
    inlineSrcAttributeName: string;
    keepInlineSrcAttribute: false;
};
declare function resolveExtension(extension?: string | string[], fallback?: string[]): string[];
/**
 * @package
 */
declare function resolveViteInlineSvgConfig(config?: ViteInlineSvgConfig): {
    extension: string[];
    svgExtension: string[];
    sourceTypingGeneration: boolean;
    inlineSrcAttributeName: string;
    keepInlineSrcAttribute: boolean;
};
/**
 * @package
 */
declare function generateSourceTyping(sources: ReturnType<typeof resolveSources>): void;

/**
 * preprocess svelte markup and inline matching svgs
 *
 * @example
 *
 * Given this config
 *
 * ```javascript
 * // vite.config.js
 *
 * import { inlineSvg } from '@svelte-put/preprocess-inline-svg/vite';
 * import { sveltekit } from '@sveltejs/kit/vite';
 * import { defineConfig } from 'vite';
 *
 * export default defineConfig({
 *   plugins: [
 *     // make sure inlineSvg comes before `svelte` or `sveltekit` plugin
 *     inlineSvg([
 *       {
 *         directories: 'src/assets/icons',
 *         attributes: {
 *           class: 'icon',
 *           width: '20',
 *           height: '20',
 *         },
 *       },
 *       {
 *         directories: 'src/assets/pictograms',
 *       },
 *     ]),
 *     sveltekit(),
 *   ],
 * });
 * ```
 *
 * and the assets files as follow
 *
 * ```tree
 * src/assets
 *     |
 *     |-- icons
 *          |-- svelte.svg
 *          |
 *          |-- google
 *                |-- arrow-right.svg
 *          |-- simpleicons
 *                |-- github.svg
 *     |
 *     |-- pictograms
 *          |-- diagram.svg
 * ```
 *
 * We can now do
 *
 * ```html
 * <!-- this will have width="20" height="20" as specified in the config -->
 * <svg data-inline-src="svelte"></svg>
 *
 * <!-- nested -->
 * <svg data-inline-src="google/arrow-right"></svg>
 * <svg data-inline-src="simpleicons/github"></svg>
 *
 * <!-- with custom attributes -->
 * <svg data-inline-src="diagram" width="100" height="100"></svg>
 *
 * <!-- alternatively, you can provide a per-case path that is relative to the current source file -->
 * <svg data-inline-src="./local-icon.svg"></svg>
 *
 * <!-- if the source svg is not found for any of the above, an error will be thrown -->
 * ```
 *
 *
 * @param sources - config for svg sources
 * @param config - global config for the plugin & preprocessor
 * @returns vite plugin
 */
declare function inlineSvg(sources?: SourceConfig | SourceConfig[], config?: ViteInlineSvgConfig): Plugin;

export { DEFAULT_VITE_PLUGIN_CONFIG, type ViteInlineSvgConfig, generateSourceTyping, inlineSvg, resolveExtension, resolveViteInlineSvgConfig };