johanbrook / gulp-fontcustom Goto Github PK

A gulp plugin that convert SVG files to font icons with Fontcustom

JavaScript 34.60% CSS 7.53% Shell 0.88% HTML 56.98%

gulp-fontcustom's Introduction

gulp-fontcustom

This is a gulp plugin that takes a bunch of SVG files and converts them to font icon files with Fontcustom.

Usage

npm install --save gulp-fontcustom

var gulp = require('gulp'),
    fontcustom = require('gulp-fontcustom')

gulp.src("./icons")
.pipe(fontcustom({
  font_name: 'myfont',  // defaults to 'fontcustom',
  'css-selector': '.prefix-{{glyph}}'
}))
.pipe(gulp.dest("./results"))

The following files will be generated into the results directory:

myfont-preview.html
myfont.css
myfont.eot
myfont.ttf
myfont.svg
myfont.woff

The fontcustom function above takes an options object and uses the same keys as the Fontcustom CLI uses. Check out the Fontcustom documentation for more info on all configuration options.

gulp-fontcustom will default to these options:

no_hash: true,
force: true

The --output option for Fontcustom is set inside of gulp-fontcustom and will thus precede any configuration.

Note that fontcustom must be installed on the system beforehand. If not:

# On Mac
brew install fontforge eot-utils
gem install fontcustom

See the Fontcustom docs for further instructions.

Stuff to do

Enable putting stylesheets/preview HTML in another destination
Support all relevant configuration options in Fontcustom
Better tests ...

Similar plugins

If this isn't your cup of tea:

License

MIT.

gulp-fontcustom's People

Contributors

Stargazers

Watchers

Forkers

monokrome michelgotta hitkodev gc-julien

gulp-fontcustom's Issues

Doesn't work on Windows

Unfortunately, doesn't work on windows as a simple gulp plugin. It needs a lot more to run...
Great project, but make it usable on multiple platforms.

Command failed: /bin/sh: fontcustom: command not found

Hi, I've been getting some errors recently, not sure whats causing it.
I've had my script work before.

The gulpfile's supersimple,

var gulp = require('gulp'),
    fontcustom = require('gulp-fontcustom');

gulp.task('makeiconfont', function(){
  return gulp.src("./svg/**/*.svg")
  .pipe(fontcustom({
    font_name: 'newIconFont'
  }))
  .pipe(gulp.dest("./output"));
});

I've had this script work before, tried removing node_modules and running npm install anew, no dice.

In my understanding error 127 is when /bin/sh cant find something in it's path, but I've never run into this problem with gulp/node before. Any thoughts?

[13:13:54] Using gulpfile ~/repos/makesvgfont/gulpfile.js
[13:13:54] Starting 'makeiconfont'...

/Users/madeofpeople/repos/makesvgfont/node_modules/gulp-fontcustom/node_modules/child-process-promise/node_modules/q/q.js:126
                    throw e;
                          ^
Error: Command failed: /bin/sh: fontcustom: command not found
fontcustom compile /Users/madeofpeople/repos/makesvgfont/svg --output ./___tmp___ --font_name newIconFont --force true --no_hash true (exited with error code 127)
    at ChildProcess.exithandler (child_process.js:637:15)
    at ChildProcess.EventEmitter.emit (events.js:98:17)
    at maybeClose (child_process.js:743:16)
    at Socket.<anonymous> (child_process.js:956:11)
    at Socket.EventEmitter.emit (events.js:95:17)
    at Pipe.close (net.js:465:12)

Weird ENOENT error

~/SomeProject/app $ gulp icons    
[gulp] Using gulpfile ~/SomeProject/app/gulpfile.js
[gulp] Starting 'icons'...

/home/ale/SomeProject/app/node_modules/gulp-fontcustom/node_modules/child-process-promise/node_modules/q/q.js:126
                    throw e;
                          ^
Error: Can't list "./___tmp___": ENOENT, readdir './___tmp___'

Config looks like so (nothing unusual here):

var gulp = require('gulp'),
    fontcustom = require('gulp-fontcustom');

gulp.task('icons', function() {
  return gulp.src("src/icons/*.svg")
    .pipe(fontcustom({
      font_name: 'MaterialIcons'
    }))
    .pipe(gulp.dest("www/icons/"));
});

What could have gone wrong?

Fontcustom command is running for each individual SVG icon

The main code involving fontcustom compile is run for every single SVG icon in the source directory.

Instead of running the code for each file in the stream, it should wait for the whole directory (the directory name is the only thing relevant for using fontcustom) and then invoke the command.

Weird Output

I've been generating my custom Font Icon but the output is quite weird

here is the markup

<div class="social_icons">
                <ul id="share">
                    <li><i class="font-facebook"></i></li>
                    <li><i class="font-twitter"></i></li>
                    <li><i class="font-google"></i></li>
                    <li><i class="font-email"></i></li>
                </ul>
 </div>

here I have the generated CSS

    @font-face {
        font-family: "Font";
        src: url("./Font.eot?") format("embedded-opentype");
        font-weight: normal;
        font-style: normal;
    }

    @font-face {
        font-family: "Font";
        src: url("data:application/x-font-woff;charset=utf-8;base64,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") format("woff"),
        url("./Font.ttf") format("truetype"),
        url("./Font.svg#Font") format("svg");
        font-weight: normal;
        font-style: normal;
    }

    @media screen and (-webkit-min-device-pixel-ratio:0) {
        @font-face {
            font-family: "Font";
            src: url("./Font.svg#Font") format("svg");
        }
    }

    [data-icon]:before { content: attr(data-icon); }

    [data-icon]:before,
    .font-email:before,
    .font-facebook:before,
    .font-facebook-01:before,
    .font-google:before,
    .font-google-01:before,
    .font-twitter:before {
        display: inline-block;
        font-family: "Font";
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        line-height: 1;
        text-decoration: inherit;
        text-rendering: optimizeLegibility;
        text-transform: none;
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        font-smoothing: antialiased;
    }

    .font-email:before { content: "\f100"; }
    .font-facebook:before { content: "\f101"; }
    .font-facebook-01:before { content: "\f104"; }
    .font-google:before { content: "\f102"; }
    .font-google-01:before { content: "\f105"; }
    .font-twitter:before { content: "\f103"; }

and here I have the result

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.