webpack-webfont

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.

Changelog

License