webpack-webfont
v0.0.1-alpha.10
Published
Webpack plugin for webfont package
Downloads
578
Readme
webpack-webfont
Webpack plugin for the webfont package.
Generating fonts from svg icons using the webpack. Supported any style (CSS
, SCSS
and own) of templates.
Install
npm install --save-dev webpack-webfont
Usage
For CSS
:
@import 'webfont.css';
import WebfontPlugin from '../../Plugin';
import path from 'path';
export default {
entry: path.resolve(__dirname, '../fixtures/entry.js'),
output: {
path: path.resolve(__dirname, '../build'),
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.css/,
loaders: [
'style',
'css'
]
},
{
test: /\.scss$/,
loaders: [
'style',
'css',
'sass'
]
},
{
loader: 'url-loader',
test: /\.(svg|eot|ttf|woff|woff2)?$/
},
]
},
resolve: {
modulesDirectories: ["web_modules", "node_modules"]
},
plugins: [
new WebfontPlugin({
files: path.resolve(__dirname, '../fixtures/svg-icons/**/*.svg'),
css: true,
cssTemplateFontPath: './fonts/',
dest: {
fontsDir: path.resolve(__dirname, '../fixtures/css/fonts'),
css: path.resolve(__dirname, '../fixtures/css/webfont.css'),
}
})
]
};
For SCSS
:
@import 'webfont.scss';
a.avatar {
&::before {
@extend %webfont;
content: $webfont-avatar;
}
}
import WebfontPlugin from '../../Plugin';
import path from 'path';
export default {
entry: path.resolve(__dirname, '../entry.js'),
output: {
path: path.resolve(__dirname, '../build'),
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.css/,
loaders: [
'style',
'css'
]
},
{
test: /\.scss$/,
loaders: [
'style',
'css',
'sass'
]
},
{
loader: 'url-loader',
test: /\.(svg|eot|ttf|woff|woff2)?$/
},
]
},
resolve: {
modulesDirectories: ["web_modules", "node_modules"]
},
plugins: [
new WebfontPlugin({
files: path.resolve(__dirname, '../svg-icons/**/*.svg'),
css: true,
cssFormat: 'scss',
cssTemplateFontPath: './fonts/',
dest: {
fontsDir: path.resolve(__dirname, '../scss/fonts'),
css: path.resolve(__dirname, '../scss/_webfont.scss'),
}
})
]
};
Options
General options
- see webfont options. Some options are required.dest
- (required) generated files.fontsDir
- (required) directory fonts saving.stylesDir
- (optional) directory styles saving.outputFilename
- (optional) Set the filename of the generated styles file
Related
- webfont - api for this package.
Contribution
Feel free to push your code if you agree with publishing under the MIT license.