webpack-webfont

0.0.1-alpha.10 • Public • Published

webpack-webfont

NPM version Travis Build Status dependencies Status devDependencies Status Greenkeeper badge

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

Contribution

Feel free to push your code if you agree with publishing under the MIT license.

Changelog

License

Install

DownloadsWeekly Downloads

44

Version

0.0.1-alpha.10

License

MIT

Last publish

Collaborators

  • cap-bernardito
  • evilebottnawi
  • itgalaxy-owner