{"id":22660,"library":"vite-plugin-fantasticon","title":"vite-plugin-fantasticon","description":"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.","status":"active","version":"1.4.1","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","vite-plugin","fantasticon","icon","font","typescript"],"install":[{"cmd":"npm install vite-plugin-fantasticon","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-fantasticon","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-fantasticon","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required as Vite plugin.","package":"vite","optional":false}],"imports":[{"note":"CommonJS require() fails because plugin is ESM-only.","wrong":"const fantasticon = require('vite-plugin-fantasticon')","symbol":"default","correct":"import fantasticon from 'vite-plugin-fantasticon'"},{"note":"Utility to get default options; not needed for basic usage.","symbol":"defaults","correct":"import { defaults } from 'vite-plugin-fantasticon'"},{"note":"Must use 'fontasticon:' prefix with your font name, not 'virtual:'.","wrong":"import 'virtual:fantasticon'","symbol":"Virtual import","correct":"import 'fontasticon:icons'"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite';\nimport fantasticon from 'vite-plugin-fantasticon';\n\nexport default defineConfig({\n  plugins: [\n    fantasticon({\n      name: 'icons',\n      inputDir: 'icons',\n      outputDir: './dist',\n      fontTypes: ['woff2', 'woff'],\n      assetTypes: ['css', 'ts', 'json'],\n    }),\n  ],\n});\n\n// In a source file to enable HMR:\nimport 'fontasticon:icons';","lang":"typescript","description":"Shows minimal Vite config with fantasticon plugin and HMR import for icon font."},"warnings":[{"fix":"Use import 'fontasticon:icons' if font name is 'icons'.","message":"HMR virtual import must use 'fontasticon:' prefix exactly as configured font name.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Explicitly set inputDir in options to avoid confusion.","message":"Default 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.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Use import syntax; set type: 'module' in package.json if needed.","message":"Plugin is ESM-only; using require() will fail at runtime with 'ERR_REQUIRE_ESM'.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Use // @ts-ignore if needed, or contribute types upstream.","message":"No breaking changes reported, but TypeScript types may not cover all fantasticon options.","severity":"deprecated","affected_versions":">=0.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Change to import statement: import fantasticon from 'vite-plugin-fantasticon'.","cause":"Using require() to import ESM-only module.","error":"ERR_REQUIRE_ESM"},{"fix":"Set inputDir explicitly: fantasticon({ inputDir: 'my-icons' }).","cause":"Default inputDir appends 'icons/{name}' when name is set to something other than 'icons', leading to double nesting.","error":"ENOENT: no such file or directory, open 'icons/icons/...'"},{"fix":"Ensure plugin is added in vite config and use exact font name: import 'fontasticon:<font-name>'.","cause":"Plugin is not loaded or the virtual import prefix does not match the configured font name.","error":"Failed to resolve import \"fontasticon:icons\""}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}