Preserve order when updating font

[m-weeks]

Currently the characters will be generated in alphabetical order of the file names, but if an icon is added that isn't at the bottom of the list, it will be inserted and the character codes will be thrown off. This is fine for when you are using the class names for icons, but not when the character codes matter.

A workaround would be to prefix all your icons with a number: ex: 01.close.svg, 02.arrow.svg, etc. But it would ideally be nicer to keep the order without worrying about file names.

[TheBrainTeam]

I realized it too late as it went to prod :weary: then I was keeping the file names prefix as zz1, zz2.... to get the new files to the end but later realized after zz9 it takes zz10 before zz1 :rage: like a weird dictionary then I had to name it Zzz1a zzz1b now the classnames are a mess. I couldn't do anything as it all went to prod and uses both classnames & content codes

[gearsandcode]

It looks like that's what the --codepoints option is for, I can't get it to work though.

Here's what I'm trying:

icon-font-generator icons/*.svg -o dist --codepoints icon-codepoints.json

My codepoints file looks like this: icon-codepoints.json { "icon1": "\\e939", "icon2": "\\e90a" }

The codepoints file seems to get ignored though.

===

I am able to get it working using webfonts-generator though using this gulp script, but that project is no longer maintained and this one looks to be much better.

const webfontsGenerator = require('webfonts-generator');

gulp.task('iconfont', function() {
  webfontsGenerator({
    codepoints: {
      'icon1': '\e90a',
      'icon2': '\e939'
    },
    files: [
      '../assets/icons/icon1.svg',
      '../assets/icons/icon2.svg',
    ],
    dest: 'dest/',
  }, function(error) {
    if (error) {
      console.log('Fail!', error);
    } else {
      console.log('Done!');
    }
  })
});

[Hammie]

Had the same problem and managed to solve it using the --codepoints parameter. It takes just a simple icon name => character number as input json:

{
    "icon": "0xf100",
    "icon2": "0xf101",
    "icon3": "0xf102"
}

[gargiguy]

Had the same problem and managed to solve it using the --codepoints parameter. It takes just a simple icon name => character number as input json:

{
  "icon": "0xf100",
  "icon2": "0xf101",
  "icon3": "0xf102"
}

Can you please share your full function string / settings? For some reason I can't get it to get it to work...

[Hammie]

Can you please share your full function string / settings? For some reason I can't get it to get it to work...

I don't have the code with me right now but if I remember correctly:

I have a file called codepoints.json that contains

{
    "folder": "0xf100",
    "folder_open": "0xf101",
    "folder_closed": "0xf102"
}

and a folder containing 3 icons icons/folder.svg, icons/folder_open.svg and icons/folder_closed.svg

Then I generate the font using icon-font-generator icons/*.svg --codepoints codepoints.json

[demiro]

this is still an issue... if you provide the codepoints they just get overwritten anyways.... when debugging log(options, JSON.stringify(options.codepointsMap).green);

after line 40 in index.js

options.codepointsMap = await getCodepointsMap(options.codepoints)

https://github.com/Workshape/icon-font-generator/blob/a9ac3b34c7343ee6157176a6a2af00e29939b41c/lib/index.js#L40

I get

something in the lines like this:

{ icon1: null icon2: null, icon3: null }

this, after I created it the first time and the second time I passed the json creted as codepoints:

{ "icon1": "\\f101", "icon2": "\\f102", "icon3": "\\f103", }

can someone shed some light on this? I think it get's messed up on line #160

https://github.com/Workshape/icon-font-generator/blob/a9ac3b34c7343ee6157176a6a2af00e29939b41c/lib/index.js#L160

[Hammie]

this is still an issue... if you provide the codepoints they just get overwritten anyways.... when debugging log(options, JSON.stringify(options.codepointsMap).green);

after line 40 in index.js

options.codepointsMap = await getCodepointsMap(options.codepoints)

https://github.com/Workshape/icon-font-generator/blob/a9ac3b34c7343ee6157176a6a2af00e29939b41c/lib/index.js#L40

I get

something in the lines like this:

{ icon1: null icon2: null, icon3: null }

this, after I created it the first time and the second time I passed the json creted as codepoints:

{ "icon1": "\\f101", "icon2": "\\f102", "icon3": "\\f103", }

can someone shed some light on this? I think it get's messed up on line #160

https://github.com/Workshape/icon-font-generator/blob/a9ac3b34c7343ee6157176a6a2af00e29939b41c/lib/index.js#L160

You should use the hexadecimal notation for the unicode codepoints: { "icon1": "0xf101", "icon2": "0xf102", "icon3": "0xf103", }

If you need to use unicode literals, use the correct javascript notation ("\uf101", "\uf102") and update the code to get the character code:

const codePoint = codepointsMap[propName];
codepointsMap[propName] = Number.parseInt(codePoint) || codePoint.charCodeAt(0);

[migacz1125]

@Hammie @tancredi do You plan add code: const codePoint = codepointsMap[propName]; codepointsMap[propName] = Number.parseInt(codePoint) || codePoint.charCodeAt(0); to some PR and merge to new version of icon-font-generator ?

[Hammie]

@Hammie @tancredi do You plan add code: const codePoint = codepointsMap[propName]; codepointsMap[propName] = Number.parseInt(codePoint) || codePoint.charCodeAt(0); to some PR and merge to new version of icon-font-generator ?

I've updated the code to support unicode entries and added a sanity check so you get an error message if it does not understand the input.

PR should be linked to this issue.