Error parsing glyph

[inwardmovement]

I've got this error, how can I fix it? I'd rather not modify the SVGs source code because they come from an external library.

Error: Got an error parsing the glyph "alarm-fill": Expected a flag, got "018" at index "19".

[X-Tender]

I don't know if it helps you but in our case the problem was not the icon-font-generator, it was svgo which was part of our build task. With the latest Version of svgo the svgs were 'overoptimized' it removed spaces from digitsequenze like 0 1 4 and made it to 014. With the svgo version 1.1.1 the problem didn't appeared.

[inwardmovement]

I don't know if it helps you but in our case the problem was not the icon-font-generator, it was svgo which was part of our build task. With the latest Version of svgo the svgs were 'overoptimized' it removed spaces from digitsequenze like 0 1 4 and made it to 014. With the svgo version 1.1.1 the problem didn't appeared.

Thanks for the tip! I've got this error while using icon-font-generator locally and manually, not inside an automated build task.

[X-Tender]

Could you share the svg here ?

[inwardmovement]

Yes, here is the repo: inwardmovement/test-icons-to-font

[X-Tender]

Yes that's the problem I mentioned before. And I think the issue lies in the svgicons2svgfont module. It looks like that he can't work with this kind of svg syntax. For example when you cahnge the number sequence 018 to 0 1 8 he didn't complain there. (But at the next sequence) Do you know if the icons were minfied by someone?

I think the issue is in the webfonts-generator package which is used in icon-font-generator. They use the Version 5 of webfonts-generator which is already @ v9

[inwardmovement]

They are Bootstrap Icons so I guess @mdo minified them?

I wanted to reference this issue in sunflowerdeath/webfonts-generator but the package seems not maintained anymore...

Do you know how I can fix this? How can I force the use of svgo 1.1.1?

[X-Tender]

you could try to install the newest version of svgicons2svgfont and delete the one used in webfonts-generator Maybe the maintainer of icon-font-geenrator can say someting / have an idea

[inwardmovement]

I bumped svgicons2svgfont to ^9.1.1 in icon-font-generator\node_modules\webfonts-generator\package.json, but I've got a lot of errors when installing/updating the package, and still the error for icon-font-generator.

[inwardmovement]

I think it's worth noting that I've got errors when installing icon-font-generator:

gyp ERR! build error
gyp ERR! stack Error: `...\Microsoft Visual Studio\2017\BuildTools\MSBuild\15.0\Bin\MSBuild.exe` failed with 
exit code: 1
gyp ERR! stack     at ChildProcess.onExit (...\AppData\Roaming\nvm\v12.14.0\node_modules\npm\node_modules\node-gyp\lib\build.js:194:23)
gyp ERR! stack     at ChildProcess.emit (events.js:210:5)       
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:272:12)
gyp ERR! System Windows_NT 10.0.18362
gyp ERR! command "...\\nodejs\\node.exe" "...\\AppData\\Roaming\\nvm\\v12.14.0\\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild"
gyp ERR! cwd ...\nodejs\node_modules\icon-font-generator\node_modules\ttf2woff2
gyp ERR! node -v v12.14.0
gyp ERR! node-gyp -v v5.0.5
gyp ERR! not ok
+ icon-font-generator@2.1.10
added 139 packages from 139 contributors and updated 2 packages 
in 29.017s

[evandiamond]

@inwardmovement I think I have a solve for this. I was equally frustrated but did a little digging... From what I understand, this error is due to a spacing issue. For some reason the .svg has incorrect spaces somewhere and icon-font-generator does not like it.

So here's what you can do:

1. npm install svgo --save-dev - this will grab SVGO, which is an optimizer for .svg files.
2. If you are using Webpack you'll need an .svgo.yml file in your root. This goes next to files like .gitignore. This file will override the default config for svgo.
3. You'll need to make two modifications to the .svgo.yml file, which you can copy from mine below. The two items that change are convertPathData: and mergePaths: - we will set them both to false.
4. Now, in your package.json file, add a new script to help with optimization of your .svg files. Basically, you can set this up to optimize a particular path. In my case, I run this anytime I add a new icon to my set. I run this command: "svgo": "svgo -f ./src/images/svg/icons/ --config .svgo.yml" and then in Terminal I use npm run svgo
5. Lastly, I run my command to generate the fonts using npm run fonts, which runs the icon-font-generator.

It would be great if these items were built into icon-font-generator but for now this will have to do.

Hope this helps!

.svgo.yml file below:

# replace default config

# multipass: true
# full: true

plugins:
    - removeDoctype
    - removeXMLProcInst
    - removeComments
    - removeMetadata
    - removeXMLNS
    - removeEditorsNSData
    - cleanupAttrs
    - inlineStyles
    - minifyStyles
    - convertStyleToAttrs
    - cleanupIDs
    - prefixIds
    - removeRasterImages
    - removeUselessDefs
    - cleanupNumericValues
    - cleanupListOfValues
    - convertColors
    - removeUnknownsAndDefaults
    - removeNonInheritableGroupAttrs
    - removeUselessStrokeAndFill
    - removeViewBox
    - cleanupEnableBackground
    - removeHiddenElems
    - removeEmptyText
    - convertShapeToPath
    - convertEllipseToCircle
    - moveElemsAttrsToGroup
    - moveGroupAttrsToElems
    - collapseGroups
    - convertPathData:
        noSpaceAfterFlags: false
    - convertTransform
    - removeEmptyAttrs
    - removeEmptyContainers
    - mergePaths:
        noSpaceAfterFlags: false
    - removeUnusedNS
    - sortAttrs
    - sortDefsChildren
    - removeTitle
    - removeDesc
    - removeDimensions
    - removeAttrs
    - removeAttributesBySelector
    - removeElementsByAttr
    - addClassesToSVGElement
    - removeStyleElement
    - removeScriptElement
    - addAttributesToSVGElement
    - removeOffCanvasPaths
    - reusePaths

[inwardmovement]

@evandiamond thanks! I managed to make it work with Gulp:

function svg() {
  return src('icons/*.svg')
  .pipe(svgmin({
    plugins: [{
      mergePaths: {
        noSpaceAfterFlags: false
      }
    }, {
      convertPathData: {
        noSpaceAfterFlags: false
      }
    }]
  }))
  .pipe(dest('icons/svgo'))
}

Only convertPathData prevents the error, but to be sure I included mergePaths too.

[inwardmovement]

Do you have any idea why the generated icons.html doesn't show the icons properly? repo