Security News
Research
Data Theft Repackaged: A Case Study in Malicious Wrapper Packages on npm
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
gulp-iconfont
Advanced tools
Create icon fonts from several SVG icons
You can test this library with the frontend generator.
Warning: While this plugin may still be useful for fonts generation or old
browser support, you should consider using SVG icons directly. Indeed, when I
created gulp-iconfont
and all its related modules, using SVG icons was just
not realistic for a wide browser support but I was already convinced that SVG
was the future, that's why I wanted my SVG source files to sit separated in a
folder. So, now, just enjoy switching to SVG with almost no effort :). Was a
great open source journey with you all!
More info on why using SVG over icon fonts.
First, install gulp-iconfont
as a development dependency:
npm install --save-dev gulp-iconfont
Then, add it to your gulpfile.js
:
import iconfont from 'gulp-iconfont';
const runTimestamp = Math.round(Date.now() / 1000);
gulp.task('Iconfont', function () {
return iconfont('assets/icons/*.svg', {
fontName: 'myfont', // required
prependUnicode: true, // recommended option
formats: ['ttf', 'eot', 'woff'], // default, 'woff2' and 'svg' are available
timestamp: runTimestamp, // recommended to get consistent builds when watching files
})
.on('glyphs', function (glyphs, options) {
// CSS templating, e.g.
console.log(glyphs, options);
})
.pipe(gulp.dest('www/fonts/'));
});
gulp-iconfont
bundles several plugins to bring a simpler API
(gulp-svgicons2svgfont
, gulp-svg2tff
, gulp-ttf2eot
, gulp-ttf2woff
) for
more flexibility, feel free to use them separately.
If some font glyphs aren't converted properly you should add the
normalize:true
option and a fontHeight
greater than 1000
(fontHeight: 1001
).
You can also generate your CSS automatically with
gulp-iconfont-css
.
Add issues to the right repos:
Path to the icons files.
Type: Array
Default value: ['ttf', 'eot', 'woff']
Possible values:
['svg', 'ttf', 'eot', 'woff', 'woff2']
Since SVG fonts are deprecated in some (every ?) browsers, they are disabled per default.
Also the WOFF2 fonts are disabled since it seems to cause issues on some setup (see https://github.com/nfroidure/gulp-iconfont/issues/64).
Type: Boolean|String
Default value: false
If ttfautohint is installed on your system, you may want to auto hint your fonts. Beware that this is an experimental and untested feature (beware to use at least the 0.93 version).
If the value is a string, it is taken to be the path to the ttfautohint
binary. Otherwise, ttfautohint
is searched in $PATH.
The svgicons2svgfont are available:
So are the gulp-svgicons2svgfont:
And the gulp-svg2ttf:
Beware that your SVG icons must have a high enough height. 500 is a minimum.
If you do not want to resize them, you can try to combine the fontHeight
and
the normalize
option to get them in a correct size.
Ungroup every shapes (Ctrl+Shift+G), convert to pathes (Ctrl+Maj+C) and merge them (Ctrl++). Then save your SVG, prefer 'simple SVG' file type.
Save your file as SVG with the following settings:
Leave the rest unchecked.
More in-depth information: http://www.adobe.com/inspire/2013/09/exporting-svg-illustrator.html
Feel free to push your code if you agree with publishing under the MIT license.
You may want to use the dockerized version of TTFAutoHint, to do so, run:
docker build -t ttfautohint .
FAQs
Create icon fonts from several SVG icons
The npm package gulp-iconfont receives a total of 24,018 weekly downloads. As such, gulp-iconfont popularity was classified as popular.
We found that gulp-iconfont demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.