Skip to content

Public API ​

The plugin exposes a public API that can be consumed by other plugins through Rollup inter-plugin communication.

getGeneratedWebfonts ​

  • Returns: Array<{ type: 'svg' | 'ttf' | 'woff2' | 'woff' | 'eot'; href: string }>

Each returned item contains:

  • type: the generated font format
  • href: the path to the generated font asset

This is useful when another plugin needs to inspect or reuse the font files generated by vite-svg-2-webfont.

Reading the API ​

Find the plugin by its name, vite-svg-2-webfont, in the resolved config, then call getGeneratedWebfonts() from a hook that runs after the bundle is generated, such as writeBundle. The list is filled during the build's generateBundle step, so it is empty during development and in earlier build hooks.

vite.config.ts
ts
import { defineConfig, type Plugin } from 'vite';
import viteSvgToWebfont, { type PublicApi } from 'vite-svg-2-webfont';

function readWebfonts(): Plugin {
    let webfontApi: PublicApi | undefined;
    return {
        name: 'read-webfonts',
        configResolved(config) {
            webfontApi = config.plugins.find((plugin): plugin is Plugin<PublicApi> => plugin.name === 'vite-svg-2-webfont')?.api;
        },
        writeBundle() {
            console.log(webfontApi?.getGeneratedWebfonts());
            // [{ type: 'woff2', href: '/assets/iconfont-a1b2c3.woff2' }, ...]
        },
    };
}

export default defineConfig({
    plugins: [viteSvgToWebfont({ context: './src/icons' }), readWebfonts()],
});

See vite-plugin-preload-webfont for an example integration.

TIP

The awesome vite-plugin-preload-webfont plugin was since merged into vite-svg-2-webfont as an optional built-in feature. If you only need to inject preload tags for fonts generated by vite-svg-2-webfont, consider using the built-in preloadFormats and shouldProcessHtml options instead of a separate plugin.

Released under the MIT License.