❤
npm
Sign UpSign In

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

/webpack-webfont/

    Package Sidebar

    Install

    npm i webpack-webfont

    Repository

    github.com/itgalaxy/webpack-webfont

    Homepage

    github.com/itgalaxy/webpack-webfont#readme

    Weekly Downloads

    115

    Version

    0.0.1-alpha.10

    License

    MIT

    Last publish

    Collaborators

    • cap-bernardito
    • evilebottnawi
    • itgalaxy-owner
    Try on RunKit
    Report malware