New option: emitCodepoints #56

ferdinando-ferreira · 2018-08-08T10:17:45Z

The purpose of this change is to add a new option: emitCodepoints, as described in the changed README.md

It allows for the person using the loader to generate one of more codepoint files, containing both the user set and the auto generated codepoints. It is handy for use both on html pages or required directly in the webpacked source code, in both cases in order to be able to generate icons programatically without the need to set up the codepoints in advance.

Here is a working example, based on the example available at the "test" folder

entry.js

require('./myfont.font');
require('./myfont2.font');

myfont.font.js

module.exports = {
  'files': [
    './test-svg/*.svg'
  ],
  'fontName': 'myfonticons',
  'classPrefix': 'myfonticon-', 
  'baseSelector': '.myfonticon',
  'types': ['eot', 'woff', 'woff2', 'ttf', 'svg'],
  'fixedWidth': true,
  'embed': true,
  'fileName': 'app.[fontname].[chunkhash].[ext]',
  'emitCodepoints': [ { 'fileName': '[fontname].codepoints.js', 'type': 'web' }, { 'fileName': '[fontname].codepoints.json', 'type': 'json' }, { 'fileName': '[fontname].codepoints.import.js', 'type': 'commonjs' }, { 'fileName': 'codepoints.myfonticons.return.json', 'type': 'json'  } ]
};

myfont2.js

module.exports = {
  'files': [
    './test-svg/*.svg'
  ],
  'fontName': 'secondfonticons',
  'classPrefix': 'secondfonticon-',
  'baseSelector': '.secondfonticon',
  'types': ['eot', 'woff', 'woff2', 'ttf', 'svg'],
  'fixedWidth': true,
  'embed': true,
  'fileName': 'app.[fontname].[chunkhash].[ext]',
  'emitCodepoints': [ { 'fileName': '[fontname].codepoints.js', 'type': 'web' }, { 'fileName': '[fontname].codepoints.json', 'type': 'json' }, { 'fileName': '[fontname].codepoints.import.js', 'type': 'commonjs' }, { 'fileName': 'codepoints.myfonticons.return.json', 'type': 'json'  } ]
};

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <script type="application/javascript" src="app.bundle.js"></script>
    <script type="application/javascript" src="myfonticons.codepoints.js"></script>
    <script type="application/javascript" src="secondfonticons.codepoints.js"></script>
    <script type="application/javascript">
      window.onload = function() {
      console.log((String.fromCharCode(webfontIconCodepoints['myfonticons']['alert'])).length);
        document.getElementById('hello').setAttribute('data-icon-codepoints', 
          String.fromCharCode(webfontIconCodepoints['myfonticons']['plus']) + ' ' + 
          String.fromCharCode(webfontIconCodepoints['myfonticons']['briefcase'])
        );
      }
    </script>
    <style>
      p {
        display: inline-block;
      }
      p:before {
        display: block;
        font-size: 16px;
        color: red;
        font-style: normal;
        font-weight: normal;
        font-family: "myfonticons";
        content: attr(data-icon-codepoints);
        line-height: 1;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <p id="hello">Hello World</p>
  </body>
</html>

With the resulting page being the following:

The code change is very limited:

In the index.js it is checked for the existence of the emitCodepoints option in either the fontConfig and the loader options
if it exists, the helper emit-codepoints.js module is loaded and its emitFiles method called

The emit-codepoints.js module exports two methods:

createArrayCodepointFiles(codepointFiles, elem): takes an Array as first parameter to which it appends the option received as second parameter, normalized.
emitFiles(loaderContext, emitCodepointsOptions, generatorOptions): it takes the loader context (the thisvariable in the loader), the option received either in the font configuration file or the loader option and the generator Options (after it already generated the codepoints), generates the normalized array of codepoint files (with the appropriated names and types), transverses it and emit the files as requested.

Hoping this is a valuable addition worthy of inclusion

Best regards

Adds new option (both for the font configuration file and the loader itself): emitCodepoints, which, if set, will instruct the loader to generate one or more files containing the codepoint array used by webfonts-generator with both the user set codepoints and the auto generated ones. Its format can be: emitCodepoints: true emitCodepoints: 'filename' emitCodepoints: { filename: 'filename', type: [web|commonjs|json] } emitCodepoints: [{ filename: 'filename', type: [web|commonjs|json] }, { filename: 'filename', type: [web|commonjs|json] }, { filename: 'filename', type: [web|commonjs|json] }]

jeerbl · 2018-08-28T15:53:32Z

Neat. Merging this.

evandiamond · 2019-01-25T02:52:15Z

@jeerbl @ferdinando-ferreira One issue I'm seeing with this, hopefully you can help me.

Let's say I have a list of svg's

apple.svg - F101
carrot.svg - F102
elephant.svg - F103

The current code assigns them codepoints as show above. I start using these codes in my css.

.carrot {
    content: "\F102"
}

Now, I need to add another svg, named bird.svg, since the codepoints are based off alphabetical assignment my list now has changed and carrot.svg becomes F103. Now, I've used this .carrot class throughout my site, but instead of seeing carrots, I see birds showing up.

apple.svg - F101
bird.svg - F102
carrot.svg - F103
elephant.svg - F104

Is there a way to fix this? I noticed grunt-webfont has a property called codepointsFile which saves the mapping based on filename. Does webfonts-loader do something similar? All my icons keep changing based on the order they are in, which is no bueno. :(

grunt-webfont
https://github.com/sapegin/grunt-webfont

Can either one of you provide a solution for this? I would be very fortunate. Thank you!

ferdinando-ferreira added 2 commits August 8, 2018 10:21

Update README.md

3639bcd

ferdinando-ferreira mentioned this pull request Aug 8, 2018

Proposed new option: emitCodepoints #57

Closed

jeerbl merged commit 8141cf6 into jeerbl:master Aug 28, 2018

evandiamond mentioned this pull request Jan 25, 2019

Save codepoints based on filename not sort order to prevent overwrite #64

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

New option: emitCodepoints #56

New option: emitCodepoints #56

ferdinando-ferreira commented Aug 8, 2018

jeerbl commented Aug 28, 2018

evandiamond commented Jan 25, 2019 •

edited

New option: emitCodepoints #56

New option: emitCodepoints #56

Conversation

ferdinando-ferreira commented Aug 8, 2018

jeerbl commented Aug 28, 2018

evandiamond commented Jan 25, 2019 • edited

evandiamond commented Jan 25, 2019 •

edited