webpack-webfont

v0.0.1-alpha.10

Webpack plugin for webfont package

cli standalone font fonts webfont webfonts svg ttf woff and 14 more...

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