# @denysvuika/fantasticon 中文文档 规范地址：https://npmcn.com/package/%40denysvuika/fantasticon/ 版本：1\.4\.0 npm 元数据更新时间：2026-08-12T11:48:58.567Z 中文译文更新时间：2026-11-12T12:42:26.013Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40denysvuika/fantasticon 原文对照：https://npmcn.com/package/%40denysvuika/fantasticon/?lang=original 项目主页：https://github.com/DenysVuika/fantasticon#readme 源码仓库：https://github.com/DenysVuika/fantasticon ## 关键信息（来自 npm 元数据） - 包体积（解压后）：113 kB，17 个文件 - 模块格式：ESM + CJS - TypeScript 类型：包内自带 - Node.js 要求：\>= 24\.14\.0 - 运行依赖：8 个 - 首次发布：2026-05-14T17:25:11.323Z - 最新版本发布：2026-08-12T11:48:58.246Z - 近 30 天下载量：2497（2026-10-12 至 2026-11-10，npm 官方下载统计） - 已发布版本数：16（近 12 个月 16 个） ## 中文简介 图标字体生成工具 ## 安装 ```sh npm install @denysvuika/fantasticon ``` 也可以使用：`pnpm add @denysvuika/fantasticon`、`yarn add @denysvuika/fantasticon`、`bun add @denysvuika/fantasticon` ## README # 法兰斯通 易于使用、预配置的 CLI 工具, 用于从 SVG 文件生成 Web-font 图标包 ## 介绍 图标-font生成,易于使用并高度可配置. 它还生成了TypeScript类型,生成的代码点的JSON地图,允许大量不同的用法,例如与React型安全图标组件相融合,或者仅仅通过将TTF和JSON一代相融合在移动应用上进行集成. ## 安装 斯达尼通目前需要24.14.0或更新. 如果您使用 `nvm`,安装并激活工程版本 `.nvmrc` 第一条: ```bash nvm install nvm use ``` ```bash pnpm add -g @denysvuika/fantasticon ``` ## 使用 ### 快速使用 ```bash fantasticon my-icons -o icon-dist ``` ### 命令行 **说明:** 并非所有选项都可以通过命令行指定 - for `formatOptions`, (中文(简体) ), `pathOptions`, (中文(简体) ), `getIconId` 财务报告和审定财务报表 `templates` 使用一个 [配置文件](https://npmcn.com/package/%40denysvuika/fantasticon/#readme-configuration-file) 或 Java 脚本 [API 密码](https://npmcn.com/package/%40denysvuika/fantasticon/#readme-api)。 。 。 . ```text Usage: fantasticon [options] [input-dir] Options: -V, --version output the version number -c, --config custom config path (default: .fantasticonrc | fantasticonrc | .fantasticonrc.json | fantasticonrc.json | .fantasticonrc.js | fantasticonrc.js) -o, --output specify output directory -n, --name base name of the font set used both as default asset name (default: icons) -t, --font-types specify font formats to generate (default: eot, woff2, woff, available: eot, woff2, woff, ttf, svg) -g --asset-types specify other asset types to generate (default: css, html, json, ts, available: css, scss, sass, html, json, ts) -h, --font-height the output font height (icons will be scaled so the highest has this height) (default: 300) --descent the font descent --normalize [bool] normalize icons by scaling them to the height of the highest icon --ts-quotes generate TypeScript strings with single or double quotes (default: double) -r, --round [bool] setup the SVG path rounding [10e12] --selector use a CSS selector instead of 'tag + prefix' (default: null) -p, --prefix CSS class prefix (default: icon) --tag CSS base tag for icons (default: i) -u, --fonts-url public URL to the fonts directory (used in the generated CSS) --debug display errors stack trace (default: false) --silent run with no logs (default: false) --help display help for command ``` ### 配置文件 一些备选办法(具体来说, `formatOptions`, (中文(简体) ), `pathOptions` 财务报告和审定财务报表 `getIconId`)不能直接传递给CLI. 要获得更多的控制和更好的可读性,可以创建一个简单的配置文件. 默认, `fantasticon` 将在工作目录中查找以下文件之一: ```text .fantasticonrc | fantasticonrc | .fantasticonrc.json | fantasticonrc.json | .fantasticonrc.js | fantasticonrc.js ``` 您可以指定自定义 `--config` 选项. 这里有个例子 `.fantasticonrc.js`数字 : ```js module.exports = { inputDir: './icons', // (required) outputDir: './dist', // (required) fontTypes: ['ttf', 'woff', 'woff2'], assetTypes: ['ts', 'css', 'json', 'html'], fontsUrl: '/static/fonts', formatOptions: { // Pass options directly to `svgicons2svgfont` woff: { // Woff Extended Metadata Block - see https://www.w3.org/TR/WOFF/#Metadata metadata: '...' }, json: { // render the JSON human readable with two spaces indentation (default is none, so minified) indent: 2 }, ts: { // select what kind of types you want to generate (default `['enum', 'constant', 'literalId', 'literalKey']`) types: ['constant', 'literalId'], // render the types with `'` instead of `"` (default is `"`) singleQuotes: true, // customise names used for the generated types and constants enumName: 'MyIconType', constantName: 'MY_CODEPOINTS' // literalIdName: 'IconId', // literalKeyName: 'IconKey' } }, // Use a custom Handlebars template templates: { css: './my-custom-tp.css.hbs' }, pathOptions: { ts: './src/types/icon-types.ts', json: './misc/icon-codepoints.json' }, codepoints: { 'chevron-left': 57344, // decimal representation of 0xe000 'chevron-right': 57345, 'thumbs-up': 57358, 'thumbs-down': 57359 }, // Customize generated icon IDs (unavailable with `.json` config file) getIconId: ({ basename, // `string` - Example: 'foo'; relativeDirPath, // `string` - Example: 'sub/dir/foo.svg' absoluteFilePath, // `string` - Example: '/var/icons/sub/dir/foo.svg' relativeFilePath, // `string` - Example: 'foo.svg' index // `number` - Example: `0` }) => [index, basename].join('_') // '0_foo' }; ``` ### API 密码 #### 简单使用 ```ts import { generateFonts } from '@denysvuika/fantasticon'; const results = await generateFonts(); console.log('Done', results); ``` #### 选项 ```js import { generateFonts } from '@denysvuika/fantasticon'; generateFonts({ name: 'icons', fontTypes: [FontAssetType.EOT, FontAssetType.WOFF2, FontAssetType.WOFF], assetTypes: [ OtherAssetType.CSS, OtherAssetType.HTML, OtherAssetType.JSON, OtherAssetType.TS ], formatOptions: { json: { indent: 2 } }, templates: {}, pathOptions: {}, codepoints: {}, fontHeight: 300, round: undefined, // -- descent: undefined, // Will use `svgicons2svgfont` defaults normalize: undefined, // -- selector: null, tag: 'i', prefix: 'icon', fontsUrl: null }).then(results => console.log(results)); ``` #### 组织图标 图标名称和类名将从相对路径的 slot 中生成 `.svg` 在输入目录中找到的文件. 这允许在命名空间中安排您的图标,如果一个工程使用大量图标,这可能会有用. 考虑到: `./icons` 输入目录 : ```text icons ├── logo.svg ├── social │ ├── facebook.svg │ └── twitter.svg └── symbol └── chevron ├── left.svg └── right.svg ``` 运行 `fantasticon ./icons -o dist` 将使用下列图标 ID / CSS 选择器生成字体集 : 而生成的图标ID将是: | 图标标识 | CSS 选择器 | | --- | --- | | `social-facebook` | `.icon.icon-social-facebook` | | `social-twitter` | `.icon.icon-social-twitter` | | `symbol-chevron-left` | `.icon.icon-chevron-left` | | `symbol-chevron-right` | `.icon.icon-chevron-right` | 你可以提供 `getIconId` 函数通过配置文件来自定义图标 ID / CSS 选择器是如何从文件路径生成的。 该函数将接收与图标和输入目录的相对路径作为参数,并且必须返回一个作为ID使用的独特字符串. ### 许可证 版权 (c) 2026 Denys Vuika. - 发布于 [麻省理工学院许可证](https://github.com/DenysVuika/fantasticon/blob/master/LICENSE) * * * ### 分叉通知 此套件 (`@denysvuika/fantasticon`)是一个叉子 [怪兽](https://github.com/tancredi/fantasticon) 以 **Tancredi Trugenberger有限公司**,用于解决安全问题并不断更新项目. 原项目在 [麻省理工学院许可证](https://github.com/tancredi/fantasticon/blob/master/LICENSE)这个叉子继续使用同样的许可证. ## 常见问题 ### @denysvuika/fantasticon 是什么？ 图标字体生成工具 ### 如何安装 @denysvuika/fantasticon？ 在项目目录运行 npm install @denysvuika/fantasticon，或使用 pnpm add / yarn add / bun add。它还提供命令行工具 fantasticon，可以用 npx fantasticon 直接运行。 ### @denysvuika/fantasticon 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @denysvuika/fantasticon 支持 ESM 还是 CommonJS？ 同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。 ### @denysvuika/fantasticon 需要什么版本的 Node\.js？ package\.json 的 engines 字段要求 Node\.js \>= 24\.14\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。 ### @denysvuika/fantasticon 可以商用吗？ @denysvuika/fantasticon 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @denysvuika/fantasticon 的下载量有多少？ 根据 npm 官方下载统计，@denysvuika/fantasticon 在 2026/10/12 – 2026/11/10 这 30 天内被下载 2,497 次，日均约 83 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @denysvuika/fantasticon 还在维护吗？ 最新版本 1\.4\.0 发布于 2026/08/12（3 个月前）；至今共发布 16 个版本，其中过去 12 个月发布了 16 个；首次发布于 2026/05/15。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。