webfonts-loader-temp
v4.1.1
Published
A WebPack loader to automaticaly generate font files and CSS to make your own icon font
Downloads
5
Maintainers
Readme
TEMP package. Dont use
webfonts-loader
A Webpack loader that generates fonts from your SVG icons and allows you to use your icons in your HTML.
webfonts-loader
uses the webfonts-generator
plugin to create fonts in any format. It also generates CSS files so that you can use your icons directly in your HTML, using CSS classes.
Installation
npm install webfonts-loader
Usage
An example of usage can be found in the test/
directory of this repository.
Webpack rule
Add this rule to your Webpack config:
{
test: /\.font\.js/,
loader: ExtractTextPlugin.extract({
use: [
'style-loader',
'css-loader',
'webfonts-loader'
]
})
}
So that each font configuration file will be loaded using this rule.
Loader options
You can provide options
objects to configure the loader behaviour:
{
test: /\.font\.js/,
loader: ExtractTextPlugin.extract({
use: [
'style-loader',
'css-loader',
{
loader: 'webfonts-loader',
options: { ... }
}
]
})
}
Available options are:
publicPath
, String
This is the URL prefix for generated links (e.g. /static/
or https://cdn.project.net/
). Should typically match Webpack's config.output.publicPath
.
Any font config option
If you pass types
, fileName
or any other font config option, it will be used as a default (unless overriden in font config file).
The font configuration file
Description
The config file allows you to specify parameters for the loader to use. Here is an example configuration file:
// myfont.font.js
module.exports = {
'files': [
'./myfont/*.svg'
],
'fontName': 'myfonticons',
'classPrefix': 'myfonticon-',
'baseSelector': '.myfonticon',
'types': ['eot', 'woff', 'woff2', 'ttf', 'svg'],
'fileName': 'app.[fontname].[hash].[ext]'
};
Then you have to require the configuration file:
// entry.js
require('./myfont.font');
The loader will then generate:
- CSS with the base and class prefix
- Font files for the SVG icons
All font configuration options
baseSelector
, String
The base CSS selector, under which each icon class is to be created. See webfonts-generator#templateoptions
classPrefix
, String
The prefix to be used with each icon class. See webfonts-generator#templateoptions
cssTemplate
, String
See webfonts-generator#csstemplate
embed
, Boolean
If true the font is encoded in base64 and embedded inside the @font-face
declaration, otherwise font files are written to disk.
Default: false
hashLength
, Number
Optional. The length of hash in fileName
.
Min: 8
Max: 32
Default: 20
fileName
, String
The generated font file names. These elements can be used:
[fontname]
: the value of thefontName
parameter[ext]
: the extension of the font file being generated (eot
, ...)[hash]
: the hash of the current compilation[chunkhash]
: the hash of the SVG files
This option can be also configured globally in the webpack loader options.
files
, Array
fontName
, String
See webfonts-generator#fontname
formatOptions
, Object
See webfonts-generator#formatoptions
rename
, Function
types
, Array
dest
, String
html
, Boolean
htmlDest
, String
See webfonts-generator#htmldest
writeFiles
, Boolean (default false)
See webfonts-generator#writefiles
cssFontsUrl
, String (before cssFontsPath)
See webfonts-generator#cssfontspath
htmlTemplate
, String
Example
...
htmlTemplate: path.resolve(__dirname, 'src/html.hbs'),
...