Empty JSON output

[yairEO]

Version

"icon-font-generator": "^2.1.8"

package.json script:

icon-font-generator ./src/icons/*.svg -o public/fonts -f /fonts --csspath ./src/styles/scss/autogenerated/_iconfont.scss --types ttf --html false --jsonpath ./src/styles/icons.json --csstp ./src/styles/scss/autogenerated/scss.hbs

Shell:

Generating font kit from 4 SVG icons
Generated C:\xampp\htdocs\spikli-admin\public\fonts\icons.ttf
Generated C:\xampp\htdocs\spikli-admin\public\fonts\src\styles\scss\autogenerated\_iconfont.scss
Generated C:\xampp\htdocs\spikli-admin\public\fonts\src\styles\icons.json

The generated SCSS is fine, with the correct icons, but the JSON file is generated with empty brackets:

{}

Happen to know why..?

[yairEO]

Ok this is a bug that can be easily fixed,

when passing both csstp with custom template, the generateJson will try to use CSS_PARSE_REGEX to parse the file, but it shouldn't try it on a custom file but generate the normal CSS file and parse it instead (only for JSON-generating purposes)

Another, less robust fix, is to try to make the regex more flexible

[yairEO]

This is the output of my custom SCSS template which the hsb file outputs:

@font-face {
    font-family: "icons";
    src: url("/fonts/icons.ttf?8746ee39f2964b86c52641d9d0a61b61") format("truetype");
}

@if not variable-exists('webfont-icons') {
    $webfont-icons: () !global;
}

$webfont-icons: map-merge($webfont-icons, (
    'checkmark': ('icons' '\f101'),
    'search': ('icons' '\f102'),
    'sort-asc': ('icons' '\f103'),
    'sort-desc': ('icons' '\f104'),
));

@mixin styles{
    font-family: "icons";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    // speak: none; // only necessary if not using the private unicode range (firstGlyph option)
    text-decoration: none;
    text-transform: none;
    display: inline-block;
}

@mixin icon($name) {
    @include styles;

    $icon: map-get($webfont-icons, $name);
    &:before {
        font-family: nth($icon, 1) !important;
        font-style: normal;
        font-weight: normal !important;
        vertical-align: top;
        content: nth($icon, 2);
    }
}

[miguelsolorio]

Did you happen to figure out a workaround? Can't tell from your comments whether you found one or not.

[yairEO]

@misolori - No, I gave up and simply imported the SVG files directly to my React JSX files, hoping Webpack will put them inline while bundling (didn't)

Technically you can set up 2 NPM scripts and have each run its own thing - SCSS / JSON

[tancredi]

Hi @yairEO - the current approach of parsing the output CSS using regex is clearly not very good, so since I couldn't find a neat solution for you in this case (and for the general purpose of improving the tool) I've submitted a PR to webfonts-generator which would allow me to access the codepoints directly without doing any parsing at all. https://github.com/sunflowerdeath/webfonts-generator/pull/61

Sorry for the slow responses on the issues (I do realise you probably ended up using a completely different approach) but I do struggle with time and have no other maintainers.

[gearsandcode]

@tancredi - Looks like webfonts-generator is archived, so I doubt that your PR (or the 10 others) will be accepted. Would you consider publishing a clone of it with your PR applied?