jaywcjlove / svgtofont

Read a set of SVG icons and ouput a TTF/EOT/WOFF/WOFF2/SVG font.
https://jaywcjlove.github.io/svgtofont
MIT License
520 stars 82 forks source link

downloadable font: rejected by sanitizer #140

Closed ghost closed 2 years ago

ghost commented 2 years ago

Hi

I'm generating with the following config:

const svgtofont = require('svgtofont');
const path = require('path');

svgtofont({
  src: path.resolve(__dirname, './icons'), // svg path
  dist: path.resolve(__dirname, './font'), // output path
  fontName: 'PIcon',
  classNamePrefix: 'PIcon-',
  css: true,
  emptyDist: true,
  styleTemplates: path.resolve(__dirname, './style-templates')
}).then(() => {
  console.log('PIcon font generated!');
});

Then I'm getting following errors in browser:

11:52:36.509 downloadable font: head: unitsPerEm on in the range [16, 16384]: 12 (font-family: "PIcon" style:normal weight:400 stretch:100 src index:1) source: http://localhost:6006/static/media/PIcon.a04f8760.woff2
11:52:36.509 downloadable font: head: Failed to parse table (font-family: "PIcon" style:normal weight:400 stretch:100 src index:1) source: http://localhost:6006/static/media/PIcon.a04f8760.woff2
11:52:36.509 downloadable font: rejected by sanitizer (font-family: "PIcon" style:normal weight:400 stretch:100 src index:1) source: http://localhost:6006/static/media/PIcon.a04f8760.woff2
11:52:36.561 downloadable font: head: unitsPerEm on in the range [16, 16384]: 12 (font-family: "PIcon" style:normal weight:400 stretch:100 src index:2) source: http://localhost:6006/static/media/PIcon.435b5d56.woff
11:52:36.561 downloadable font: head: Failed to parse table (font-family: "PIcon" style:normal weight:400 stretch:100 src index:2) source: http://localhost:6006/static/media/PIcon.435b5d56.woff
11:52:36.561 downloadable font: rejected by sanitizer (font-family: "PIcon" style:normal weight:400 stretch:100 src index:2) source: http://localhost:6006/static/media/PIcon.435b5d56.woff
11:52:36.642 downloadable font: head: unitsPerEm on in the range [16, 16384]: 12 (font-family: "PIcon" style:normal weight:400 stretch:100 src index:3) source: http://localhost:6006/static/media/PIcon.d6a54511.ttf
11:52:36.642 downloadable font: head: Failed to parse table (font-family: "PIcon" style:normal weight:400 stretch:100 src index:3) source: http://localhost:6006/static/media/PIcon.d6a54511.ttf
11:52:36.642 downloadable font: rejected by sanitizer (font-family: "PIcon" style:normal weight:400 stretch:100 src index:3) source: http://localhost:6006/static/media/PIcon.d6a54511.ttf

my only template

// src\libs\ui-lib\components\PIcon\style-templates\_{{filename}}.scss.template

@font-face {font-family: "{{fontname}}";
  src: url('{{cssPath}}{{fontname}}.eot?t={{timestamp}}'); /* IE9*/
  src: url('{{cssPath}}{{fontname}}.eot?t={{timestamp}}#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url("{{cssPath}}{{fontname}}.woff2?t={{timestamp}}") format("woff2"),
  url("{{cssPath}}{{fontname}}.woff?t={{timestamp}}") format("woff"),
  url('{{cssPath}}{{fontname}}.ttf?t={{timestamp}}') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('{{cssPath}}{{fontname}}.svg?t={{timestamp}}#{{fontname}}') format('svg'); /* iOS 4.1- */
}

[class^="{{prefix}}-"], [class*=" {{prefix}}-"] {
  font-family: '{{fontname}}' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  @apply relative text-center inline-block;
  @apply min-w-max;
}

{{cssString}}
{{cssToVars}}
ghost commented 2 years ago

It's due to export. Exported svg needs to be at least 16 units wide

11:52:36.509 downloadable font: head: unitsPerEm on in the range [16, 16384]: 12 (font-family: "PIcon" style:normal weight:400 stretch:100 src index:1) source: http://localhost:6006/static/media/PIcon.a04f8760.woff2

then rest of the error is gone