法兰斯通
易于使用、预配置的 CLI 工具, 用于从 SVG 文件生成 Web-font 图标包
介绍
图标-font生成,易于使用并高度可配置.
它还生成了TypeScript类型,生成的代码点的JSON地图,允许大量不同的用法,例如与React型安全图标组件相融合,或者仅仅通过将TTF和JSON一代相融合在移动应用上进行集成.
安装
斯达尼通目前需要24.14.0或更新.
如果您使用 nvm,安装并激活工程版本 .nvmrc 第一条:
nvm install
nvm use
pnpm add -g @denysvuika/fantasticon
使用
快速使用
fantasticon my-icons -o icon-dist
命令行
说明: 并非所有选项都可以通过命令行指定 - for formatOptions, (中文(简体) ), pathOptions, (中文(简体) ), getIconId 财务报告和审定财务报表 templates 使用一个 配置文件 或 Java 脚本 API 密码。 。 。 .
Usage: fantasticon [options] [input-dir]
Options:
-V, --version output the version number
-c, --config <value> custom config path (default: .fantasticonrc | fantasticonrc | .fantasticonrc.json | fantasticonrc.json | .fantasticonrc.js | fantasticonrc.js)
-o, --output <value> specify output directory
-n, --name <value> base name of the font set used both as default asset name (default: icons)
-t, --font-types <value...> specify font formats to generate (default: eot, woff2, woff, available: eot, woff2, woff, ttf, svg)
-g --asset-types <value...> specify other asset types to generate (default: css, html, json, ts, available: css, scss, sass, html, json, ts)
-h, --font-height <value> the output font height (icons will be scaled so the highest has this height) (default: 300)
--descent <value> the font descent
--normalize [bool] normalize icons by scaling them to the height of the highest icon
--ts-quotes <value> generate TypeScript strings with single or double quotes (default: double)
-r, --round [bool] setup the SVG path rounding [10e12]
--selector <value> use a CSS selector instead of 'tag + prefix' (default: null)
-p, --prefix <value> CSS class prefix (default: icon)
--tag <value> CSS base tag for icons (default: i)
-u, --fonts-url <value> 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 将在工作目录中查找以下文件之一:
.fantasticonrc | fantasticonrc | .fantasticonrc.json | fantasticonrc.json | .fantasticonrc.js | fantasticonrc.js
您可以指定自定义 --config 选项.
这里有个例子 .fantasticonrc.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 密码
简单使用
import { generateFonts } from '@denysvuika/fantasticon';
const results = await generateFonts();
console.log('Done', results);
选项
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 输入目录 :
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. - 发布于 麻省理工学院许可证
分叉通知
此套件 (@denysvuika/fantasticon)是一个叉子 怪兽 以 Tancredi Trugenberger有限公司,用于解决安全问题并不断更新项目.
原项目在 麻省理工学院许可证这个叉子继续使用同样的许可证.