grunt-fontsmith
v0.11.1
Published
Grunt plugin for composing SVGs into multiple fonts, a character mapping, and CSS variables
Downloads
62
Maintainers
Readme
grunt-fontsmith
DEPRECATED
We are choosing to deprecate grunt-fontsmith
and its family of libraries. They rely on a deprecated icomoon.io API, were never fully developed (e.g. missing SASS templates, multiple engines), and out of date (e.g. uses [email protected]
).
While we would love to keep everything running, we have to choose to prioritize other projects over this one. We suggest using grunt-webfont
as an alternative:
https://www.npmjs.com/package/grunt-webfont
If you are interested in forking, feel free to (and maybe open an issue to let me know so we can link to it).
If you have a minor request (e.g. cannot figure out how to use existing tool), feel free to open an issue describing your problem.
Grunt plugin for composing SVGs into multiple fonts, a character mapping, and CSS variables.
The use case for this was to have a synchronized and automatically generated variable set between HTML character entities (e.g. &#e002;
), CSS variables (e.g. `content: '\e002';), and fonts.
Getting Started
Install this grunt plugin via npm install grunt-fontsmith
and add it to your gruntfile
:
// Inside of grunt.js/Gruntfile.js
grunt.loadNpmTasks('grunt-fontsmith');
Dependencies
Currently, there is only the icomoon-phantomjs engine.
icomoon-phantomjs
This requires installing phantomjs and having it accessible from your path (i.e. phantomjs --version
will work).
Usage
grunt.initConfig({
font: {
all: {
// SVG files to read in
src: ['public/images/icons/*.svg'],
// Location to output CSS variables
destCss: 'public/css/icons.styl',
// Location to output fonts (expanded via brace expansion)
destFonts: 'public/fonts/icons.{svg,woff,eot,ttf}',
// Multiple CSS outputs supported (generated .styl and .json files)
destCss: 'actual_files/font.{styl,json}',
// Alternative formats (1)
destCss:[
'actual_files/font.styl',
'actual_files/font.json'
],
destFonts: [
'actual_files/font.svg',
'actual_files/font.woff',
'actual_files/font.eot'
],
// Alternative formats (2)
destFonts: {
// Override specific engines
json: 'actual_files/font.less',
styl: 'actual_files/font.json'
},
destFonts: {
// Override specific engines
'dev-svg': 'actual_files/font.svg',
woff: 'actual_files/font.waffles',
eot: 'actual_files/more.like.eof'
},
// OPTIONAL: Specify CSS format (inferred from destCss' extension by default)
// (stylus, less, scss, json)
cssFormat: 'json',
// Optional: Custom routing of font filepaths for CSS
cssRouter: function (fontpath) {
return 'mysubfolder/' + fontpath;
},
// Optional: Custom naming of font families for multi-task support
fontFamily: 'my-icon-font',
// OPTIONAL: Specify CSS options
cssOptions: {}
}
}
});
Attribution
Test files
Building Block designed by Michael Rowe from The Noun Project
Eye designed by Dmitry Baranovskiy from The Noun Project
Moon designed by P.J. Onori from The Noun Project
Contributing
In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint using grunt and test via npm test
.
Donating
Support this project and others by twolfson via gittip.
License
Copyright (c) 2013 Todd Wolfson
Licensed under the MIT license.