❤
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

Readme

Keywords

Package Sidebar

Install

npm i webpack-webfont

Repository

github.com/itgalaxy/webpack-webfont

Homepage

github.com/itgalaxy/webpack-webfont#readme

Weekly Downloads

166

Version

0.0.1-alpha.10

License

MIT

Last publish

Collaborators

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