nfroidure / svgfont2svgicons Goto Github PK

View Code? Open in Web Editor NEW

15.0 4.0 10.0 114 KB

Extract SVG icons from an SVG font

License: MIT License

JavaScript 20.77% TypeScript 79.23%

svgfont2svgicons's Introduction

svgfont2svgicons

Extract SVG icons from an SVG font

Usage

In your scripts

import svgfont2svgicons from 'svgfont2svgicons';
import fs from 'node:fs';

const fontStream = fs.createReadStream('myFont.svg');
const iconProvider = svgfont2svgicons(options);

// Piping the font
fontStream.pipe(iconProvider);

// Saving the SVG files
iconProvider.on('readable', function() {
  let icon;

do {
    icon = iconProvider.read();
    if(icon) {
      console.log('New icon:', icon.metadata.name, icon.metadata.unicode);
      icon.pipe(fs.createWriteStream(icon.metadata.name + '.svg'));
    }
  } while(null !== icon);
}).once('end', function() {
  console.log('No more icons!')
});

CLI interface

svgfont2svgicons font/src/file.svg icons/dest/directory

Options

Currently no options, feel free to suggest some in the issues.

Contributing

Feel free to pull your code if you agree with publishing under the MIT license.

Authors

Nicolas Froidure

License

MIT

svgfont2svgicons's People

Contributors

Stargazers

Watchers

Forkers

qdsang leeqqiang stopcoder m4r7inp mm-tom davidjb pragmaticed not-ryan hzsrc kogoruhn

svgfont2svgicons's Issues

[Tutorial Request]

Hi, just wondering how exactly to use this 😛 I'd like to get 2 icons out of a svg font.

Running Windows 10 Pro x64 if it makes any difference.

What I've tried:

downloading the github source folder, making a test.html document with In your scripts bit inside <script> tags
installing via npm (very new to this, might have screwed up the npm install svgfont2svgicons -g somehow), I then tried to use it command line svgfont2svgicons cleanicons2.svg icons (cleanicons2.svg downloaded off this git). I get this error:

H:\Users\Matt\Downloads>svgfont2svgicons cleanicons2.svg icons
events.js:160
      throw er; // Unhandled 'error' event
      ^

Error: Attribute without value
Line: 32
Column: 91
Char: >
    at error (H:\Users\Matt\AppData\Roaming\npm\node_modules\svgfont2svgicons\node_modules\sax\lib\sax.js:666:10)
    at strictFail (H:\Users\Matt\AppData\Roaming\npm\node_modules\svgfont2svgicons\node_modules\sax\lib\sax.js:692:7)
    at Object.write (H:\Users\Matt\AppData\Roaming\npm\node_modules\svgfont2svgicons\node_modules\sax\lib\sax.js:1332:13)
    at SAXStream.write (H:\Users\Matt\AppData\Roaming\npm\node_modules\svgfont2svgicons\node_modules\sax\lib\sax.js:238:18)
    at PassThrough.ondata (H:\Users\Matt\AppData\Roaming\npm\node_modules\svgfont2svgicons\node_modules\readable-stream\lib\_stream_readable.js:546:20)
    at emitOne (events.js:96:13)
    at PassThrough.emit (events.js:188:7)
    at readableAddChunk (H:\Users\Matt\AppData\Roaming\npm\node_modules\svgfont2svgicons\node_modules\readable-stream\lib\_stream_readable.js:217:18)
    at PassThrough.Readable.push (H:\Users\Matt\AppData\Roaming\npm\node_modules\svgfont2svgicons\node_modules\readable-stream\lib\_stream_readable.js:176:10)
    at PassThrough.Transform.push (H:\Users\Matt\AppData\Roaming\npm\node_modules\svgfont2svgicons\node_modules\readable-stream\lib\_stream_transform.js:123:32)

Create a gulp plugin

Error: EMFILE, open 'fonts/afii10092.svg'

Saving glyph "uni30A4" to "fonts/uni30A4.svg"
Saving glyph "uni30A5" to "fonts/uni30A5.svg"
Saving glyph "uni30A6" to "fonts/uni30A6.svg"
Saving glyph "uni30A7" to "fonts/uni30A7.svg"

events.js:72
        throw er; // Unhandled 'error' event
              ^
Error: EMFILE, open 'fonts/afii10092.svg'
➜  test  svgfont2svgicons FZLTCXHJW.svg ./fonts

When the number of files being given more than 258

Create a Grunt plugin

Options suggestion

You mention suggestions for options are welcome, so here goes...

It would be really handy to be able to pass in a set of attributes to apply to the svg node.

In my instance, I'd like to be able to set the id and also perhaps store some other information in arbitrary attributes.

Could split this repo into 2 other

One to parse SVGFonts
The other to pipe the above result in and generate the icons content.

Saving glyph "undefined" to "fontelloFont/undefined.svg"

This is the output I'm getting

Saving glyph "undefined" to "fontelloFont/undefined.svg"
/usr/lib/node_modules/svgfont2svgicons/bin/svgfont2svgicons.js:21
      glyph.stream.pipe(Fs.createWriteStream(glyphPath));
                   ^

TypeError: Cannot read property 'pipe' of undefined
    at SVGFont2SVGIcons.<anonymous> (/usr/lib/node_modules/svgfont2svgicons/bin/svgfont2svgicons.js:21:20)
    at emitNone (events.js:105:13)
    at SVGFont2SVGIcons.emit (events.js:207:7)
    at emitReadable_ (/usr/lib/node_modules/svgfont2svgicons/node_modules/plexer/node_modules/readable-stream/lib/_stream_readable.js:456:10)
    at emitReadable (/usr/lib/node_modules/svgfont2svgicons/node_modules/plexer/node_modules/readable-stream/lib/_stream_readable.js:450:7)
    at readableAddChunk (/usr/lib/node_modules/svgfont2svgicons/node_modules/plexer/node_modules/readable-stream/lib/_stream_readable.js:206:11)
    at SVGFont2SVGIcons.Readable.push (/usr/lib/node_modules/svgfont2svgicons/node_modules/plexer/node_modules/readable-stream/lib/_stream_readable.js:162:10)
    at SVGFont2SVGIcons.Duplexer._pushAll (/usr/lib/node_modules/svgfont2svgicons/node_modules/plexer/src/index.js:123:31)
    at PassThrough.<anonymous> (/usr/lib/node_modules/svgfont2svgicons/node_modules/plexer/src/index.js:102:13)
    at emitNone (events.js:105:13)

Make this module reentrant with the svgicons2svgfont 2.0.0 API

Should be able to do:

fs.createReadStream('myfont.svg')
  .pipe(svgfont2svgicons())
  .pipe(svgicons2svgfont())
  .pipe(svgfont2svgicons())
  .pipe(fs.createReadStream('myfont.svg'))