Registry / devops / vite-plugin-fantasticon

vite-plugin-fantasticon

library1.4.1jsnpmunverified

Vite plugin to build icon fonts from SVG files using fantasticon. Current stable version 1.4.1, released sporadically. Supports single and multiple icon fonts with HMR via virtual imports. Generates CSS, TS constants, JSON metadata, and HTML preview. Differentiators: zero-config defaults, TypeScript types included, and built-in HMR for font assets.

devops

npm install vite-plugin-fantasticon

package ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-FANTAS

vite-plugin-fantasticon

devopsjavascriptv1.4.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

✓ import fantasticon from 'vite-plugin-fantasticon'

✗ const fantasticon = require('vite-plugin-fantasticon')

CommonJS require() fails because plugin is ESM-only.

defaults

✓ import { defaults } from 'vite-plugin-fantasticon'

Utility to get default options; not needed for basic usage.

Virtual import

✓ import 'fontasticon:icons'

✗ import 'virtual:fantasticon'

Must use 'fontasticon:' prefix with your font name, not 'virtual:'.

Shows minimal Vite config with fantasticon plugin and HMR import for icon font.

// vite.config.ts import { defineConfig } from 'vite'; import fantasticon from 'vite-plugin-fantasticon'; export default defineConfig({ plugins: [ fantasticon({ name: 'icons', inputDir: 'icons', outputDir: './dist', fontTypes: ['woff2', 'woff'], assetTypes: ['css', 'ts', 'json'], }), ], }); // In a source file to enable HMR: import 'fontasticon:icons';

Debug

Known issues

gotchaHMR virtual import must use 'fontasticon:' prefix exactly as configured font name.

fix

Use import 'fontasticon:icons' if font name is 'icons'.

affects: >=0.0.0

gotchaDefault inputDir depends on font name: if name is not 'icons', it becomes 'icons/{name}'. This can cause missing files if directories are not named accordingly.

fix

Explicitly set inputDir in options to avoid confusion.

affects: >=0.0.0

gotchaPlugin is ESM-only; using require() will fail at runtime with 'ERR_REQUIRE_ESM'.

fix

Use import syntax; set type: 'module' in package.json if needed.

affects: >=0.0.0

deprecatedNo breaking changes reported, but TypeScript types may not cover all fantasticon options.

fix

Use // @ts-ignore if needed, or contribute types upstream.

affects: >=0.0.0

Errors

Common errors & fixes

ERR_REQUIRE_ESM

Using require() to import ESM-only module.

fix

Change to import statement: import fantasticon from 'vite-plugin-fantasticon'.

ENOENT: no such file or directory, open 'icons/icons/...'

Default inputDir appends 'icons/{name}' when name is set to something other than 'icons', leading to double nesting.

fix

Set inputDir explicitly: fantasticon({ inputDir: 'my-icons' }).

Failed to resolve import "fontasticon:icons"

Plugin is not loaded or the virtual import prefix does not match the configured font name.

fix

Ensure plugin is added in vite config and use exact font name: import 'fontasticon:<font-name>'.

Upgrade

Version history

1.4.1latest on npm

Audit

Dependencies

viterequiredPeer dependency required as Vite plugin.

Agent activity

3 hits · last 30 days

node

Amazon

Resources

packagehttps://www.npmjs.com/package/vite-plugin-fantasticon ↗