webfont
11.2.20 (2021-07-31)
Générateur de polices à partir des icônes SVG.
WOFF2 , WOFF , EOT , TTF et SVG ;JavaScript , JSON ou YAML pour spécifier les informations de configuration pour un répertoire entier et tous ses sous-répertoires;css , scss , styl , etc.);gulp , grunt ou autres grands outils;linux , windows et osx );npm install --save-dev webfont import webfont from "webfont" ;
webfont ( {
files : "src/svg-icons/**/*.svg" ,
fontName : "my-font-name" ,
} )
. then ( ( result ) => {
// Do something with result
Function . prototype ( result ) ;
// Or return it
return result ;
} )
. catch ( ( error ) => {
throw error ;
} ) ;ou
const webfont = require ( "webfont" ) . default ;
webfont ( {
files : "src/svg-icons/**/*.svg" ,
fontName : "my-font-name" ,
} )
. then ( ( result ) => {
// Do something with result
Function . prototype ( result ) ;
// Or return it
return result ;
} )
. catch ( ( error ) => {
throw error ;
} ) ;filesstring | arraynode_modules et bower_components sont toujours ignorés. configFilestring(JSON, YAML, or CommonJS) ou le nom d'un module dans node_modules qui pointe vers un.configFile , WebFont recherchera l'arborescence du répertoire pour le fichier de configuration aux endroits suivants, dans cet ordre:webfont dans package.json.webfontrc (avec ou sans extension de nom de fichier: .json , .yaml et .js sont disponibles)webfont.config.js exportant un object JS. La recherche commencera dans le répertoire de travail et remontera l'arborescence du répertoire jusqu'à ce qu'elle trouve un fichier de configuration. fontNamestringwebfontformatsarray ,['svg', 'ttf', 'eot', 'woff', 'woff2'] ,svg, ttf, eot, woff, woff2 ,template Type: string
Par défaut: null
Valeurs possibles: css , scss , styl (n'hésitez pas à contribuer davantage).
Remarque: si vous souhaitez utiliser un modèle personnalisé, utilisez cette option passer dans une string de chemin comme ceci:
webfont ( {
template : "./path/to/my-template.css" ,
} ) ;Ou
webfont ( {
template : path . resolve ( __dirname , "./my-template.css" ) ,
} ) ;Ou
webfont ( {
template : path . resolve ( __dirname , "./my-template.styl" ) ,
} ) ; templateClassNamestringnulltemplateFontPathstring./CSS . templateFontNamestringfontName s'il n'est pas défini, mais vous pouvez spécifier n'importe quelle valeur.ligaturesbooleantrueglyphTransformFn Type: function
Par défaut: null
Description: Si vous souhaitez transformer les métadonnées Glyph (par exemple, les titres des classes CSS ou Unicode) avant de le transférer dans votre modèle de style pour vos icônes, vous pouvez utiliser cette option avec l'objet Metadata Glyphs.
Exemple:
import webfont from "webfont" ;
webfont ( {
files : "src/svg-icons/**/*.svg" ,
glyphTransformFn : ( obj ) => {
obj . name += "_transform" ;
something ( ) ;
return obj ;
} ,
} )
. then ( ( result ) => {
// Do something with result
Function . prototype ( result ) ;
// Or return it
return result ;
} )
. catch ( ( error ) => {
throw error ;
} ) ; sortbooltrueCeux-ci peuvent être annexés aux options WebFont. Ceux-ci sont transmis directement à svgicons2svgfont.
svgicons2svgfont.fontNamestringsvgicons2svgfont.fontIdstringfontNamesvgicons2svgfont.fontStylestring''svgicons2svgfont.fontWeightstring''svgicons2svgfont.fixedWidthbooleanfalsesvgicons2svgfont.centerHorizontallybooleanfalsesvgicons2svgfont.normalizebooleanfalsesvgicons2svgfont.fontHeightnumberMAX(icons.height)svgicons2svgfont.roundnumber10e12 Configuration du chemin du chemin SVG. svgicons2svgfont.descentnumber0svgicons2svgfont.ascentnumberfontHeight - descentsvgicons2svgfont.metadatastringundefinedsvgicons2svgfont.logfunctionconsole.logfunction(){} pour désactiver la journalisation. L'interface pour l'utilisation de la ligne de commande est assez simpliste à ce stade, comme on le voit dans la section d'utilisation suivante.
Ajoutez le script cli à l'objet scripts du fichier package.json :
{
"scripts" : {
"webfont" : " node node_modules/webfont/dist/cli.js "
}
}Si vous utilisez Cross-INV:
{
"scripts" : {
"webfont" : " cross-env node_modules/webfont/dist/cli.js "
}
} Usage: webfont [input] [options]
Input: File(s) or glob(s).
If an input argument is wrapped in quotation marks, it will be passed to " fast-glob "
for cross-platform glob support.
Options:
--config
Path to a specific configuration file (JSON, YAML, or CommonJS)
or the name of a module in ` node_modules ` that points to one.
If no ` --config ` argument is provided, webfont will search for
configuration files in the following places, in this order:
- a ` webfont ` property in ` package.json `
- a ` .webfontrc ` file (with or without filename extension:
` .json ` , ` .yaml ` , and ` .js ` are available)
- a ` webfont.config.js ` file exporting a JS object
The search will begin in the working directory and move up the
directory tree until a configuration file is found.
-f, --font-name
The font family name you want, default: " webfont " .
-h, --help
Output usage information.
-v, --version
Output the version number.
-r, --formats
Only this formats generate.
-d, --dest
Destination for generated fonts.
-m, --dest-create
Create destination directory if it does not exist.
-t, --template
Type of template ( ` css ` , ` scss ` , ` styl ` ) or path to custom template.
'
-s, --dest-template
Destination for generated template. If not passed used `dest` argument value.
-c, --template-class-name
Class name in css template.
-p, --template-font-path
Font path in css template.
-n, --template-font-name
Font name in css template.
--no-sort
Keeps the files in the same order of entry
--verbose
Tell me everything!.
For "svgicons2svgfont":
--font-id
The font id you want, default as "--font-name".
--font-style
The font style you want.
--font-weight
The font weight you want.
--fixed-width
Creates a monospace font of the width of the largest input icon.
--center-horizontally
Calculate the bounds of a glyph and center it horizontally.
--normalize
Normalize icons by scaling them to the height of the highest icon.
--font-height
The outputted font height [MAX(icons.height)].
--round
Setup the SVG path rounding [10e12].
--descent
The font descent [0].
--ascent
The font ascent [height - descent].
--start-unicode
The start unicode codepoint for files without prefix [0xEA01].
--prepend-unicode
Prefix files with their automatically allocated unicode codepoint.
--metadata
Content of the metadata tag.
--add-hash-in-font-url
Generated font url will be : [webfont].[ext]?v=[hash]
La CLI peut quitter le processus avec les codes de sortie suivants:
webpack .ttf2woff2 avec la bibliothèque JS native);N'hésitez pas à pousser votre code si vous êtes d'accord avec la publication sous la licence MIT.
Vérifiez notre Changelog
Vérifiez notre licence
