Repository: gowravshekar/font-awesome-webpack
Branch: master
Commit: 319bb47c5986
Files: 9
Total size: 6.8 KB

Directory structure:
gitextract_ewikveql/

├── .gitignore
├── LICENSE
├── README.md
├── font-awesome-styles.loader.js
├── font-awesome.config.js
├── font-awesome.config.less
├── index.js
├── index.loader.js
└── package.json

================================================
FILE CONTENTS
================================================

================================================
FILE: .gitignore
================================================
/node_modules


================================================
FILE: LICENSE
================================================
The MIT License (MIT)

Copyright (c) 2014 Gowrav Shekar

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


================================================
FILE: README.md
================================================
font-awesome-webpack
====================

Font awesome configuration and loading package for webpack, using font-awesome (Less).

Based on bootstrap-webpack by Scott Bleck (@bline).

Usage
-----

To properly load font-awesome fonts, you need to configure loaders in your `webpack.config.js`. Example:

``` javascript
module.exports = {
  module: {
    loaders: [
      // the url-loader uses DataUrls.
      // the file-loader emits files.
      { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
      { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }
    ]
  }
};
```

Font awesome font urls are of the format `[dot][extension]?=[version-number]`, for example `.woff?v=4.2.0`

The Regex for font types are adjusted to support these formats. Regex also support urls ending with .woff, .ttf, .eot and .svg (Used by Bootstrap).

### Complete Font-Awesome

To use the complete font-awesome package including all styles with the default settings:

``` javascript
require("font-awesome-webpack");
```

The `require` statement should be present in your application code(Entry file or any other file required in entry file) and not in webpack.config.js.

### Custom configuration

You can configurate font-awesome-webpack with two configuration files:

* `font-awesome.config.js`
* `font-awesome.config.less`

Add both files *next to each other* in your project. Then:

``` javascript
require("font-awesome-webpack!./path/to/font-awesome.config.js");
```

Or simple add it as entry point to your `webpack.config.js`:

``` javascript
module.exports = {
  entry: [
    "font-awesome-webpack!./path/to/font-awesome.config.js",
    "your-existing-entry-point"
  ]
};
```

#### `font-awesome.config.js`

Example:

``` javascript
module.exports = {
  styles: {
    "mixins": true,

    "core": true,
    "icons": true,

    "larger": true,
    "path": true,
  }
};
```

#### `font-awesome.config.less`

Imported after Font-Awesome's default variables, but before anything else.

You may customize Font-Awesome here.

Example:

``` less
@fa-inverse: #eee;
@fa-border-color: #ddd;
```

### extract-text-webpack-plugin

Configure style loader in `font-awesome.config.js`.

Example:

``` javascript
module.exports = {
  styleLoader: require('extract-text-webpack-plugin').extract('style-loader', 'css-loader!less-loader'),
  styles: {
    ...
  }
};
```

Install `extract-text-webpack-plugin` before using this configuration.


================================================
FILE: font-awesome-styles.loader.js
================================================
var styles = [
    'mixins',

    'bordered-pulled',
    'core',
    'fixed-width',
    'icons',
    'larger',
    'list',
    'path',
    'rotated-flipped',
    'animated',
    'stacked'
];

module.exports = function(content) {
    this.cacheable(true);
    var config = this.exec(content, this.resourcePath);
    var start =
            "@import          \"~font-awesome/less/variables.less\";\n"
            + "@fa-font-path: \"~font-awesome/fonts/\";\n"
            + "@import          \"./font-awesome.config.less\";\n";
    source = start + styles.filter(function(style) {
        return config.styles[style];
    }).map(function(style) {
        return "@import \"~font-awesome/less/" + style + ".less\";";
    }).join("\n");
    return source;
};


================================================
FILE: font-awesome.config.js
================================================
module.exports = {
    // Default for the style loading
  styleLoader: 'style-loader!css-loader!less-loader',
  
    styles: {
        'mixins': true,
        'bordered-pulled': true,
        'core': true,
        'fixed-width': true,
        'icons': true,
        'larger': true,
        'list': true,
        'path': true,
        'rotated-flipped': true,
        'animated': true,
        'stacked': true
    }
};


================================================
FILE: font-awesome.config.less
================================================
// Modify font-awesome variables here.

// a example:
// @fa-border-color: #ddd;



================================================
FILE: index.js
================================================
require("style-loader!css-loader!less-loader!./font-awesome-styles.loader.js!./font-awesome.config.js");


================================================
FILE: index.loader.js
================================================
module.exports = function() {
};

module.exports.pitch = function (remainingRequest) {

  // Webpack 1.7.3 uses this.resourcePath. Leaving in remaining request for possibly older versions
  // of Webpack
  var configFilePath = this.resourcePath || remainingRequest;
  this.cacheable(true);

  if (!configFilePath || configFilePath.trim() === '') {
    var msg = 'You specified the font-awesome-webpack with no configuration file. Please specify' +
      ' the configuration file, like: \'font-awesome-webpack!./font-awesome.config.js\' or use' +
      ' require(\'font-awesome-webpack\').';
    console.error('ERROR: ' + msg);
    throw new Error(msg);
  }
  
  var config = require(configFilePath);
  var styleLoader = config.styleLoader || 'style-loader!css-loader!less-loader';

  var styleLoaderCommand = 'require(' + JSON.stringify('-!' + styleLoader + '!' +
      require.resolve('./font-awesome-styles.loader.js') + '!' + configFilePath) + ');';
  return styleLoaderCommand;
};

================================================
FILE: package.json
================================================
{
    "name": "font-awesome-webpack",
    "version": "0.0.5-beta.2",
    "description": "font-awesome package for webpack",
    "main": "index.js",
    "loader": "index.loader.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "repository": {
        "type": "git",
        "url": "https://github.com/gowravshekar/font-awesome-webpack.git"
    },
    "keywords": [
        "font-awesome",
        "webpack"
    ],
    "author": {
        "name": "Gowrav Shekar",
        "url": "@gowravshekar"
    },
    "license": "MIT",
    "bugs": {
        "url": "https://github.com/gowravshekar/font-awesome-webpack/issues"
    },
    "dependencies": {
        "css-loader": "~0.26.1",
        "less-loader": "~2.2.3",
        "style-loader": "~0.13.1"
    },
    "peerDependencies": {
        "font-awesome": ">=4.3.0"
    },
    "readme": "",
    "readmeFilename": "README.md",
    "homepage": "https://github.com/gowravshekar/font-awesome-webpack",
    "_id": "font-awesome-webpack@0.0.1",
    "_from": "font-awesome-webpack@"
}