Avoid reserved Codepoints U+FE00...U+FE0F and U+FE20...U+FE2F

[stephenquan]

The following codepoints are reserved and should be avoided:

• U+FE00...U+FE0F are Variation Selectors - see https://codepoints.net/variation_selectors
• U+FE20...U+FE2F are Combining Half Marks - see https://codepoints.net/combining_half_marks

In my project I have 3380 SVGs icons. I am not explicitly setting codepoints. Codepoints U+F101 (DEFAULT_START_CODEPOINT) ... U+FE3F are automatically allocated by fantasticon. However, these codepoints collide with the reserved codepoints and create rendering issues.

Here's a repro makeicons.sh script:

#!/bin/bash

# Generate 3380 SVG icons (solid triangle)
mkdir -p icons
((DEFAULT_START_CODEPOINT=16#f101))
for ((i=0;i<3380;i++))
do
  echo '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M16 8L24 24 L 8 24z"/></svg>' > $(printf 'icons/icon-%x.svg' $((DEFAULT_START_CODEPOINT+i)))
  if ((i % 100 == 0)); then echo "$((i+1)) icons created ..."; fi
done
echo "$i total icons created"

# Generate my-icons.js
cat > my-icons.js <<EOF
module.exports = {
  name: 'my-icons',
  fontHeight: 500,
  normalize: true,
  inputDir: './icons',
  outputDir: './dist',
  fontTypes: ['ttf'],
  assetTypes: ['css', 'json', 'html'],
  formatOptions: {
    json: {
      indent: 2
    }
  },
  getIconId: ({
    basename,
    relativeDirPath,
    absoluteFilePath,
    relativeFilePath,
    index
  }) => {
    return basename;
  }
};
EOF

# Generate my-icons.ttf
mkdir -p dist
fantasticon --config ./my-icons.js

dist/my-icons.html below shows that icons in U+FE00...U+FE0F are blank and icons in the U+FE20...U+FE2F` are not centered but left jusitifed.

If #527 was implemented, it could help dodge the problematic codepoints.

[stephenquan]

Workaround, insert into the codepoints dictionary object reservation for the affected codepoints, e.g.

module.exports = {
  name: 'my-icons',
  fontHeight: 500,
  normalize: true,
  inputDir: './icons',
  outputDir: './dist',
  fontTypes: ['ttf'],
  assetTypes: ['css', 'json', 'html'],
  formatOptions: {
    json: {
      indent: 2
    }
  },
  codepoints: {
    // U+FE00...U+FE0F Variation Selectors - see https://codepoints.net/variation_selectors
    'variable-selector-00': 0xfe00,
    'variable-selector-01': 0xfe01,
    'variable-selector-02': 0xfe02,
    'variable-selector-03': 0xfe03,
    'variable-selector-04': 0xfe04,
    'variable-selector-05': 0xfe05,
    'variable-selector-06': 0xfe06,
    'variable-selector-07': 0xfe07,
    'variable-selector-08': 0xfe08,
    'variable-selector-09': 0xfe09,
    'variable-selector-0a': 0xfe0a,
    'variable-selector-0b': 0xfe0b,
    'variable-selector-0c': 0xfe0c,
    'variable-selector-0d': 0xfe0d,
    'variable-selector-0e': 0xfe0e,
    'variable-selector-0f': 0xfe0f,

    // U+FE20...U+FE2F Combining Half Marks - see https://codepoints.net/combining_half_marks
    'combining-half-marks-00': 0xfe20,
    'combining-half-marks-01': 0xfe21,
    'combining-half-marks-02': 0xfe22,
    'combining-half-marks-03': 0xfe23,
    'combining-half-marks-04': 0xfe24,
    'combining-half-marks-05': 0xfe25,
    'combining-half-marks-06': 0xfe26,
    'combining-half-marks-07': 0xfe27,
    'combining-half-marks-08': 0xfe28,
    'combining-half-marks-09': 0xfe29,
    'combining-half-marks-0a': 0xfe2a,
    'combining-half-marks-0b': 0xfe2b,
    'combining-half-marks-0c': 0xfe2c,
    'combining-half-marks-0d': 0xfe2d,
    'combining-half-marks-0e': 0xfe2e,
    'combining-half-marks-0f': 0xfe2f,
  },
  getIconId: ({
    basename,
    relativeDirPath,
    absoluteFilePath,
    relativeFilePath,
    index
  }) => {
    return basename;
  }
};