webfont 8.2.1 → 9.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/README.md +1 -2
  3. package/dist/cli.js +5 -3
  4. package/dist/standalone.js +109 -106
  5. package/package.json +36 -35
  6. package/templates/template.css.njk +112 -54
  7. package/templates/template.html.njk +132 -64
  8. package/templates/template.scss.njk +115 -56
package/CHANGELOG.md CHANGED
@@ -4,6 +4,12 @@ All notable changes to this project will be documented in this file.
4
4
 
5
5
  This project adheres to [Semantic Versioning](http://semver.org).
6
6
 
7
+ ## 9.0.0 - 2019-04-19
8
+
9
+ - Changed: drops support for Node.js 6.
10
+ - Feat: improve basic templates (see [templates](templates)).
11
+ - Feat: use wasm package for generate woff2
12
+
7
13
  ## 8.2.1 - 2018-12-28
8
14
 
9
15
  - Chore: update dependencies.
package/README.md CHANGED
@@ -5,7 +5,6 @@
5
5
  [![Build status](https://ci.appveyor.com/api/projects/status/a8absovr2r44w1oc?svg=true)](https://ci.appveyor.com/project/evilebottnawi/webfont)
6
6
  [![dependencies Status](https://david-dm.org/itgalaxy/webfont/status.svg)](https://david-dm.org/itgalaxy/webfont)
7
7
  [![devDependencies Status](https://david-dm.org/itgalaxy/webfont/dev-status.svg)](https://david-dm.org/itgalaxy/webfont?type=dev)
8
- [![Greenkeeper badge](https://badges.greenkeeper.io/itgalaxy/webfont.svg)](https://greenkeeper.io)
9
8
 
10
9
  Generator of fonts from SVG icons.
11
10
 
@@ -207,7 +206,7 @@ The CLI can exit the process with the following exit codes:
207
206
  - [svg2ttf](https://github.com/fontello/svg2ttf) - Converts SVG fonts to TTF format.
208
207
  - [ttf2eot](https://github.com/fontello/ttf2eot) - Converts TTF fonts to EOT format.
209
208
  - [ttf2woff](https://github.com/fontello/ttf2woff) - Converts TTF fonts to WOFF format.
210
- - [ttf2woff2](https://github.com/nfroidure/ttf2woff2) - Converts TTF fonts to WOFF2.
209
+ - [wawoff2](https://github.com/fontello/wawoff2) - Converts TTF fonts to WOFF2 and versa vice.
211
210
 
212
211
  ## Roadmap
213
212
 
package/dist/cli.js CHANGED
@@ -342,9 +342,11 @@ if (cli.flags.version || cli.flags.v) {
342
342
  cli.showVersion();
343
343
  }
344
344
 
345
- Promise.resolve().then(() => Object.assign({}, optionsBase, {
346
- files: cli.input
347
- })).then(options => {
345
+ Promise.resolve().then(() => {
346
+ const options = Object.assign({}, optionsBase, {
347
+ files: cli.input
348
+ });
349
+
348
350
  if (options.files.length === 0) {
349
351
  cli.showHelp();
350
352
  }
package/dist/standalone.js CHANGED
@@ -23,7 +23,7 @@ var _filesorter = _interopRequireDefault(require("svgicons2svgfont/src/filesorte
23
23
 
24
24
  var _globby = _interopRequireDefault(require("globby"));
25
25
 
26
- var _lodash = _interopRequireDefault(require("lodash.merge"));
26
+ var _deepmerge = _interopRequireDefault(require("deepmerge"));
27
27
 
28
28
  var _nunjucks = _interopRequireDefault(require("nunjucks"));
29
29
 
@@ -33,12 +33,31 @@ var _ttf2eot = _interopRequireDefault(require("ttf2eot"));
33
33
 
34
34
  var _ttf2woff = _interopRequireDefault(require("ttf2woff"));
35
35
 
36
- var _ttf2woff2 = _interopRequireDefault(require("ttf2woff2"));
36
+ var _wawoff = _interopRequireDefault(require("wawoff2"));
37
37
 
38
38
  var _xml2js = _interopRequireDefault(require("xml2js"));
39
39
 
40
40
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
41
41
 
42
+ async function buildConfig(options) {
43
+ let searchPath = process.cwd();
44
+ let configPath = null;
45
+
46
+ if (options.configFile) {
47
+ searchPath = null;
48
+ configPath = _path.default.resolve(process.cwd(), options.configFile);
49
+ }
50
+
51
+ const configExplorer = (0, _cosmiconfig.default)("webfont");
52
+ const config = await (configPath ? configExplorer.load(configPath) : configExplorer.search(searchPath));
53
+
54
+ if (!config) {
55
+ return {};
56
+ }
57
+
58
+ return config;
59
+ }
60
+
42
61
  function getGlyphsData(files, options) {
43
62
  const metadataProvider = options.metadataProvider || (0, _metadata.default)({
44
63
  prependUnicode: options.prependUnicode,
@@ -85,7 +104,7 @@ function getGlyphsData(files, options) {
85
104
  });
86
105
  }
87
106
 
88
- function svgIcons2svgFont(glyphsData, options) {
107
+ function toSvg(glyphsData, options) {
89
108
  let result = "";
90
109
  return new Promise((resolve, reject) => {
91
110
  const fontStream = new _svgicons2svgfont.default({
@@ -117,27 +136,23 @@ function svgIcons2svgFont(glyphsData, options) {
117
136
  });
118
137
  }
119
138
 
120
- function buildConfig(options) {
121
- let searchPath = process.cwd();
122
- let configPath = null;
139
+ function toTtf(buffer, options) {
140
+ return Buffer.from((0, _svg2ttf.default)(buffer, options).buffer);
141
+ }
123
142
 
124
- if (options.configFile) {
125
- searchPath = null;
126
- configPath = _path.default.resolve(process.cwd(), options.configFile);
127
- }
143
+ function toEot(buffer) {
144
+ return Buffer.from((0, _ttf2eot.default)(buffer).buffer);
145
+ }
128
146
 
129
- const configExplorer = (0, _cosmiconfig.default)("webfont");
130
- const searchForConfig = configPath ? configExplorer.load(configPath) : configExplorer.search(searchPath);
131
- return searchForConfig.then(result => {
132
- if (!result) {
133
- return {};
134
- }
147
+ function toWoff(buffer, options) {
148
+ return Buffer.from((0, _ttf2woff.default)(buffer, options).buffer);
149
+ }
135
150
 
136
- return result;
137
- });
151
+ function toWoff2(buffer) {
152
+ return _wawoff.default.compress(buffer);
138
153
  }
139
154
 
140
- function _default(initialOptions) {
155
+ async function _default(initialOptions) {
141
156
  if (!initialOptions || !initialOptions.files) {
142
157
  throw new Error("You must pass webfont a `files` glob");
143
158
  }
@@ -178,108 +193,96 @@ function _default(initialOptions) {
178
193
  templateFontPath: "./",
179
194
  verbose: false
180
195
  }, initialOptions);
181
- let glyphsData = [];
182
- return buildConfig({
196
+ const config = await buildConfig({
183
197
  configFile: options.configFile
184
- }).then(loadedConfig => {
185
- if (Object.keys(loadedConfig).length > 0) {
186
- options = (0, _lodash.default)({}, options, loadedConfig.config);
187
- options.filePath = loadedConfig.filepath;
188
- }
198
+ });
189
199
 
190
- return (0, _globby.default)([].concat(options.files)).then(foundFiles => {
191
- const filteredFiles = foundFiles.filter(foundFile => _path.default.extname(foundFile) === ".svg");
200
+ if (Object.keys(config).length > 0) {
201
+ options = (0, _deepmerge.default)(options, config.config);
202
+ options.filePath = config.filepath;
203
+ }
192
204
 
193
- if (filteredFiles.length === 0) {
194
- throw new Error("Files glob patterns specified did not match any files");
195
- }
205
+ const foundFiles = await (0, _globby.default)([].concat(options.files));
206
+ const filteredFiles = foundFiles.filter(foundFile => _path.default.extname(foundFile) === ".svg");
196
207
 
197
- return filteredFiles;
198
- }).then(files => Promise.resolve().then(() => getGlyphsData(files, options)).then(generatedDataInternal => {
199
- glyphsData = generatedDataInternal;
200
- return svgIcons2svgFont(generatedDataInternal, options);
201
- })) // Maybe add ttfautohint
202
- .then(svgFont => {
203
- const result = {};
204
- result.svg = svgFont;
205
- result.glyphsData = glyphsData;
206
- result.ttf = Buffer.from((0, _svg2ttf.default)(result.svg.toString(), options.formatsOptions && options.formatsOptions.ttf ? options.formatsOptions.ttf : {}).buffer);
207
-
208
- if (options.formats.indexOf("eot") !== -1) {
209
- result.eot = Buffer.from((0, _ttf2eot.default)(result.ttf).buffer);
210
- }
208
+ if (filteredFiles.length === 0) {
209
+ throw new Error("Files glob patterns specified did not match any files");
210
+ }
211
211
 
212
- if (options.formats.indexOf("woff") !== -1) {
213
- result.woff = Buffer.from((0, _ttf2woff.default)(result.ttf, {
214
- metadata: options.metadata
215
- }).buffer);
216
- }
212
+ const result = {};
213
+ result.glyphsData = await getGlyphsData(filteredFiles, options);
214
+ result.svg = await toSvg(result.glyphsData, options);
215
+ result.ttf = toTtf(result.svg, options.formatsOptions && options.formatsOptions.ttf ? options.formatsOptions.ttf : {});
217
216
 
218
- if (options.formats.indexOf("woff2") !== -1) {
219
- result.woff2 = (0, _ttf2woff2.default)(result.ttf);
220
- }
217
+ if (options.formats.includes("eot")) {
218
+ result.eot = toEot(result.ttf);
219
+ }
220
+
221
+ if (options.formats.includes("woff")) {
222
+ result.woff = toWoff(result.ttf, {
223
+ metadata: options.metadata
224
+ });
225
+ }
221
226
 
222
- return result;
223
- }).then(result => {
224
- if (!options.template) {
225
- return result;
227
+ if (options.formats.includes("woff2")) {
228
+ result.woff2 = await toWoff2(result.ttf);
229
+ }
230
+
231
+ if (options.template) {
232
+ const templateDirectory = _path.default.resolve(__dirname, "../templates");
233
+
234
+ const buildInTemplates = {
235
+ css: {
236
+ path: _path.default.join(templateDirectory, "template.css.njk")
237
+ },
238
+ html: {
239
+ path: _path.default.join(templateDirectory, "template.html.njk")
240
+ },
241
+ scss: {
242
+ path: _path.default.join(templateDirectory, "template.scss.njk")
226
243
  }
244
+ };
245
+ let templateFilePath = null;
227
246
 
228
- const buildInTemplateDirectory = _path.default.join(__dirname, "../templates");
229
-
230
- const buildInTemplates = {
231
- css: {
232
- path: _path.default.join(buildInTemplateDirectory, "template.css.njk")
233
- },
234
- html: {
235
- path: _path.default.join(buildInTemplateDirectory, "template.preview-html.njk")
236
- },
237
- scss: {
238
- path: _path.default.join(buildInTemplateDirectory, "template.scss.njk")
239
- }
240
- };
241
- let templateFilePath = null;
247
+ if (Object.keys(buildInTemplates).includes(options.template)) {
248
+ result.usedBuildInTemplate = true;
242
249
 
243
- if (Object.keys(buildInTemplates).includes(options.template)) {
244
- result.usedBuildInTemplate = true;
250
+ _nunjucks.default.configure(_path.default.resolve(__dirname, "../"));
245
251
 
246
- _nunjucks.default.configure(_path.default.join(__dirname, "../"));
252
+ templateFilePath = `${templateDirectory}/template.${options.template}.njk`;
253
+ } else {
254
+ const resolvedTemplateFilePath = _path.default.resolve(options.template);
247
255
 
248
- templateFilePath = `${buildInTemplateDirectory}/template.${options.template}.njk`;
249
- } else {
250
- const resolvedTemplateFilePath = _path.default.resolve(options.template);
256
+ _nunjucks.default.configure(_path.default.dirname(resolvedTemplateFilePath));
251
257
 
252
- _nunjucks.default.configure(_path.default.dirname(resolvedTemplateFilePath));
258
+ templateFilePath = _path.default.resolve(resolvedTemplateFilePath);
259
+ }
253
260
 
254
- templateFilePath = _path.default.resolve(resolvedTemplateFilePath);
255
- }
261
+ const nunjucksOptions = _deepmerge.default.all([{
262
+ glyphs: result.glyphsData.map(glyphData => {
263
+ if (typeof options.glyphTransformFn === "function") {
264
+ glyphData.metadata = options.glyphTransformFn(glyphData.metadata);
265
+ }
256
266
 
257
- const nunjucksOptions = (0, _lodash.default)({}, {
258
- glyphs: glyphsData.map(glyphData => {
259
- if (typeof options.glyphTransformFn === "function") {
260
- glyphData.metadata = options.glyphTransformFn(glyphData.metadata);
261
- }
262
-
263
- return glyphData.metadata;
264
- })
265
- }, options, {
266
- className: options.templateClassName ? options.templateClassName : options.fontName,
267
- fontName: options.templateFontName ? options.templateFontName : options.fontName,
268
- fontPath: options.templateFontPath.replace(/\/?$/, "/")
269
- });
270
- result.template = _nunjucks.default.render(templateFilePath, nunjucksOptions);
271
- return result;
272
- }).then(result => {
273
- if (options.formats.indexOf("svg") === -1) {
274
- delete result.svg;
275
- }
267
+ return glyphData.metadata;
268
+ })
269
+ }, options, {
270
+ className: options.templateClassName || options.fontName,
271
+ fontName: options.templateFontName || options.fontName,
272
+ fontPath: options.templateFontPath.replace(/\/?$/, "/")
273
+ }]);
276
274
 
277
- if (options.formats.indexOf("ttf") === -1) {
278
- delete result.ttf;
279
- }
275
+ result.template = _nunjucks.default.render(templateFilePath, nunjucksOptions);
276
+ }
280
277
 
281
- result.config = options;
282
- return result;
283
- });
284
- });
278
+ if (!options.formats.includes("svg")) {
279
+ delete result.svg;
280
+ }
281
+
282
+ if (!options.formats.includes("ttf")) {
283
+ delete result.ttf;
284
+ }
285
+
286
+ result.config = options;
287
+ return result;
285
288
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "webfont",
3
- "version": "8.2.1",
3
+ "version": "9.0.0",
4
4
  "description": "Generator of fonts from svg icons, svg icons to svg font, svg font to ttf, ttf to eot, ttf to woff, ttf to woff2",
5
5
  "license": "MIT",
6
6
  "author": "itgalaxy <development@itgalaxy.company>",
@@ -50,57 +50,55 @@
50
50
  "!**/__tests__"
51
51
  ],
52
52
  "dependencies": {
53
- "cosmiconfig": "^5.0.3",
53
+ "cosmiconfig": "^5.2.0",
54
+ "deepmerge": "^3.2.0",
54
55
  "xml2js": "^0.4.17",
55
- "globby": "^8.0.1",
56
+ "globby": "^9.2.0",
56
57
  "meow": "^5.0.0",
57
58
  "fs-extra": "^7.0.1",
58
- "lodash.merge": "^4.6.1",
59
- "nunjucks": "^3.1.6",
60
- "p-limit": "^2.1.0",
61
- "resolve-from": "^4.0.0",
59
+ "nunjucks": "^3.2.0",
60
+ "p-limit": "^2.2.0",
61
+ "resolve-from": "^5.0.0",
62
62
  "svg2ttf": "^4.0.0",
63
63
  "svgicons2svgfont": "^9.0.3",
64
64
  "ttf2eot": "^2.0.0",
65
65
  "ttf2woff": "^2.0.0",
66
- "ttf2woff2": "^2.0.0"
66
+ "wawoff2": "^1.0.2"
67
67
  },
68
68
  "devDependencies": {
69
69
  "@babel/core": "^7.1.5",
70
70
  "@babel/cli": "^7.1.5",
71
71
  "@babel/preset-env": "^7.1.5",
72
- "@babel/register": "^7.0.0",
73
- "babel-core": "7.0.0-bridge.0",
74
72
  "babel-eslint": "^10.0.1",
75
- "babel-jest": "23.6.0",
73
+ "babel-jest": "24.7.1",
76
74
  "coveralls": "^3.0.0",
77
75
  "cross-env": "^5.0.0",
78
76
  "execa": "^1.0.0",
79
- "eslint": "^5.9.0",
80
- "eslint-plugin-ava": "^5.1.1",
81
- "eslint-plugin-html": "^5.0.0",
82
- "eslint-plugin-import": "^2.6.0",
83
- "eslint-plugin-itgalaxy": "^95.0.0",
84
- "eslint-plugin-jest": "^22.0.0",
77
+ "eslint": "^5.16.0",
78
+ "eslint-plugin-ava": "^6.0.0",
79
+ "eslint-plugin-html": "^5.0.3",
80
+ "eslint-plugin-import": "^2.17.2",
81
+ "eslint-plugin-itgalaxy": "^100.0.0",
82
+ "eslint-plugin-jest": "^22.4.1",
85
83
  "eslint-plugin-jsx-a11y": "^6.0.0",
86
84
  "eslint-plugin-lodash": "^5.1.0",
87
- "eslint-plugin-markdown": "^1.0.0-rc.1",
88
- "eslint-plugin-node": "^8.0.0",
89
- "eslint-plugin-promise": "^4.0.1",
85
+ "eslint-plugin-markdown": "^1.0.0",
86
+ "eslint-plugin-node": "^8.0.1",
87
+ "eslint-plugin-promise": "^4.1.1",
90
88
  "eslint-plugin-react": "^7.1.0",
91
- "eslint-plugin-unicorn": "^6.0.1",
89
+ "eslint-plugin-unicorn": "^8.0.2",
92
90
  "is-eot": "^1.0.0",
93
- "is-svg": "^3.0.0",
91
+ "is-svg": "^4.1.0",
94
92
  "is-ttf": "^0.2.0",
95
93
  "is-woff": "^1.0.0",
96
94
  "is-woff2": "^1.0.0",
97
- "jest": "23.6.0",
98
- "npmpub": "^4.1.0",
95
+ "jest": "^24.7.1",
96
+ "standard-version": "^5.0.2",
99
97
  "npm-run-all": "^4.0.0",
100
- "nyc": "^13.1.0",
101
- "prettier": "^1.7.4",
98
+ "nyc": "^14.0.0",
99
+ "prettier": "^1.17.0",
102
100
  "remark-cli": "^6.0.0",
103
- "remark-preset-lint-itgalaxy": "^13.0.0",
101
+ "remark-preset-lint-itgalaxy": "^14.0.0",
104
102
  "rimraf": "^2.5.2",
105
103
  "husky": "^1.1.3",
106
104
  "lint-staged": "^8.0.4"
@@ -114,13 +112,13 @@
114
112
  "fix:js": "npm run lint:js -- --fix",
115
113
  "fix": "npm-run-all -l prettify -p 'fix:**'",
116
114
  "pretest": "npm run lint",
117
- "test-only": "jest",
118
- "test": "npm run test-only -- --coverage",
115
+ "test:only": "jest src",
116
+ "test": "npm run test:only -- --coverage",
119
117
  "prebuild": "rimraf dist",
120
- "demo": "node dist/cli.js './src/__tests__/fixtures/svg-icons/*.svg' -d demo -t html --normalize --center-horizontally",
121
- "build": "babel src --out-dir dist --ignore '**/__tests__/**'",
122
- "prepublish": "npm-run-all build",
123
- "release": "npmpub"
118
+ "demo": "npm run build && node dist/cli.js './src/__tests__/fixtures/svg-icons/*.svg' -d demo -t html --normalize --center-horizontally",
119
+ "build": "babel src -d dist --ignore '**/__tests__/**'",
120
+ "prepare": "npm run build",
121
+ "release": "standard-version"
124
122
  },
125
123
  "babel": {
126
124
  "presets": [
@@ -128,7 +126,7 @@
128
126
  "@babel/preset-env",
129
127
  {
130
128
  "targets": {
131
- "node": "6.9.5"
129
+ "node": "8.9.0"
132
130
  }
133
131
  }
134
132
  ]
@@ -187,7 +185,10 @@
187
185
  "remark-preset-lint-itgalaxy"
188
186
  ]
189
187
  },
188
+ "jest": {
189
+ "testEnvironment": "node"
190
+ },
190
191
  "engines": {
191
- "node": ">= 6.9.5 || >= 8.9.0"
192
+ "node": ">= 8.9.0"
192
193
  }
193
194
  }
package/templates/template.css.njk CHANGED
@@ -1,78 +1,136 @@
1
1
  @font-face {
2
- font-family: {{ fontName }};
3
- {% if formats.indexOf('eot')>-1 -%}
4
- src: url("{{ fontPath }}{{ fontName }}.eot");
5
- {%- endif %}
6
- {%- set eotIndex = formats.indexOf('eot') -%}
7
- {%- set woff2Index = formats.indexOf('woff2') -%}
8
- {%- set woffIndex = formats.indexOf('woff') -%}
9
- {%- set ttfIndex = formats.indexOf('ttf') -%}
10
- {%- set svgIndex = formats.indexOf('svg') %}
11
- src: {% if eotIndex != -1 -%}
12
- url("{{ fontPath }}{{ fontName }}.eot?#iefix") format("embedded-opentype")
13
- {%- set nothing = formats.splice(eotIndex, 1) -%}
14
- {%- if formats.length != 0 -%}, {% else -%}; {% endif -%}
15
- {%- endif -%}
16
- {%- if woff2Index != -1 -%}
17
- url("{{ fontPath }}{{ fontName }}.woff2") format("woff2")
18
- {%- set nothing = formats.splice(woff2Index, 1) -%}
19
- {%- if formats.length != 0 -%}, {% else -%}; {% endif -%}
20
- {%- endif -%}
21
- {%- if woffIndex != -1 -%}
22
- url("{{ fontPath }}{{ fontName }}.woff") format("woff")
23
- {%- set nothing = formats.splice(woffIndex, 1) -%}
24
- {%- if formats.length != 0 -%}, {% else -%}; {% endif -%}
25
- {%- endif -%}
26
- {%- if ttfIndex != -1 -%}
27
- url("{{ fontPath }}{{ fontName }}.ttf") format("truetype")
28
- {%- set nothing = formats.splice(ttfIndex, 1) -%}
29
- {%- if formats.length != 0 -%}, {% else -%}; {% endif -%}
30
- {%- endif -%}
31
- {%- if svgIndex != -1 -%}
32
- url("{{ fontPath }}{{ fontName }}.svg#{{ fontName }}") format("svg");
33
- {%- endif %}
34
- font-style: normal;
35
- font-weight: 400;
2
+ font-family: "{{ fontName }}";
3
+ font-style: normal;
4
+ font-weight: 400;
5
+ font-display: auto;
6
+ {% if formats.indexOf('eot')>-1 -%}
7
+ src: url("{{ fontPath }}{{ fontName }}.eot");
8
+ {%- endif %}
9
+ {%- set eotIndex = formats.indexOf('eot') -%}
10
+ {%- set woff2Index = formats.indexOf('woff2') -%}
11
+ {%- set woffIndex = formats.indexOf('woff') -%}
12
+ {%- set ttfIndex = formats.indexOf('ttf') -%}
13
+ {%- set svgIndex = formats.indexOf('svg') %}
14
+ src: {% if eotIndex != -1 -%}
15
+ url("{{ fontPath }}{{ fontName }}.eot?#iefix") format("embedded-opentype")
16
+ {%- set nothing = formats.splice(eotIndex, 1) -%}
17
+ {%- if formats.length != 0 -%}, {% else -%}; {% endif -%}
18
+ {%- endif -%}
19
+ {%- if woff2Index != -1 -%}
20
+ url("{{ fontPath }}{{ fontName }}.woff2") format("woff2")
21
+ {%- set nothing = formats.splice(woff2Index, 1) -%}
22
+ {%- if formats.length != 0 -%}, {% else -%}; {% endif -%}
23
+ {%- endif -%}
24
+ {%- if woffIndex != -1 -%}
25
+ url("{{ fontPath }}{{ fontName }}.woff") format("woff")
26
+ {%- set nothing = formats.splice(woffIndex, 1) -%}
27
+ {%- if formats.length != 0 -%}, {% else -%}; {% endif -%}
28
+ {%- endif -%}
29
+ {%- if ttfIndex != -1 -%}
30
+ url("{{ fontPath }}{{ fontName }}.ttf") format("truetype")
31
+ {%- set nothing = formats.splice(ttfIndex, 1) -%}
32
+ {%- if formats.length != 0 -%}, {% else -%}; {% endif -%}
33
+ {%- endif -%}
34
+ {%- if svgIndex != -1 -%}
35
+ url("{{ fontPath }}{{ fontName }}.svg#{{ fontName }}") format("svg");
36
+ {%- endif %}
36
37
  }
37
38
 
38
39
  .{{ className }} {
39
- display: inline-block;
40
- transform: translate(0, 0);
41
- text-rendering: auto;
42
- font: normal normal 400 14px/1 {{ fontName }};
43
- font-size: inherit;
44
- -moz-osx-font-smoothing: grayscale;
45
- -webkit-font-smoothing: antialiased;
40
+ display: inline-block;
41
+ font-family: "{{ fontName }}";
42
+ font-weight: 400;
43
+ font-style: normal;
44
+ font-variant: normal;
45
+ text-rendering: auto;
46
+ line-height: 1;
47
+ -moz-osx-font-smoothing: grayscale;
48
+ -webkit-font-smoothing: antialiased;
46
49
  }
47
50
 
48
51
  .{{ className }}-lg {
49
- vertical-align: -15%;
50
- line-height: 0.75em;
51
- font-size: 1.33333333em;
52
+ font-size: 1.33333em;
53
+ line-height: 0.75em;
54
+ vertical-align: -0.0667em;
55
+ }
56
+
57
+ .{{ className }}-xs {
58
+ font-size: 0.75em;
59
+ }
60
+
61
+ .{{ className }}-sm {
62
+ font-size: 0.875em;
63
+ }
64
+
65
+ .{{ className }}-1x {
66
+ font-size: 1em;
52
67
  }
53
68
 
54
69
  .{{ className }}-2x {
55
- font-size: 2em;
70
+ font-size: 2em;
56
71
  }
57
72
 
58
73
  .{{ className }}-3x {
59
- font-size: 3em;
74
+ font-size: 3em;
60
75
  }
61
76
 
62
77
  .{{ className }}-4x {
63
- font-size: 4em;
78
+ font-size: 4em;
64
79
  }
65
80
 
66
81
  .{{ className }}-5x {
67
- font-size: 5em;
82
+ font-size: 5em;
83
+ }
84
+
85
+ .{{ className }}-6x {
86
+ font-size: 6em;
87
+ }
88
+
89
+ .{{ className }}-7x {
90
+ font-size: 7em;
91
+ }
92
+
93
+ .{{ className }}-8x {
94
+ font-size: 8em;
95
+ }
96
+
97
+ .{{ className }}-9x {
98
+ font-size: 9em;
99
+ }
100
+
101
+ .{{ className }}-10x {
102
+ font-size: 10em;
68
103
  }
69
104
 
70
105
  .{{ className }}-fw {
71
- width: 1.28571429em;
72
- text-align: center;
73
- }{% for glyph in glyphs
74
- %}
106
+ text-align: center;
107
+ width: 1.25em;
108
+ }
109
+
110
+ .{{ className }}-border {
111
+ border: solid 0.08em #eee;
112
+ border-radius: 0.1em;
113
+ padding: 0.2em 0.25em 0.15em;
114
+ }
115
+
116
+ .{{ className }}-pull-left {
117
+ float: left;
118
+ }
75
119
 
120
+ .{{ className }}-pull-right {
121
+ float: right;
122
+ }
123
+
124
+ .{{ className }}.{{ className }}-pull-left {
125
+ margin-right: 0.3em;
126
+ }
127
+
128
+ .{{ className }}.{{ className }}-pull-right {
129
+ margin-left: 0.3em;
130
+ }
131
+
132
+ {% for glyph in glyphs %}
76
133
  .{{ className }}-{{ glyph.name }}::before {
77
- content: "\{{ glyph.unicode[0].charCodeAt(0).toString(16) }}";
78
- }{% endfor %}
134
+ content: "\{{ glyph.unicode[0].charCodeAt(0).toString(16) }}";
135
+ }
136
+ {% endfor %}
package/templates/template.html.njk CHANGED
@@ -11,118 +11,186 @@
11
11
  color: #222;
12
12
  font-family:"Helvetica Neue", Arial, sans-serif;
13
13
  }
14
+
14
15
  h1 {
15
16
  margin:0 0 20px;
16
17
  font-size: 32px;
17
18
  font-weight: normal;
18
19
  }
20
+
19
21
  .icons {
20
22
  margin-bottom: 40px;
21
23
  -webkit-column-count: 5;
22
24
  -moz-column-count: 5;
23
25
  column-count: 5;
24
26
  }
27
+
25
28
  .icons__item {
26
- padding: 4px 0;
29
+ padding: 4px 0;
27
30
  }
31
+
28
32
  .icons__item,
29
33
  .icons__item i {
30
- cursor:pointer;
31
- }
32
- .icons__item i {
33
- font-size: 36px;
34
+ cursor: pointer;
35
+ vertical-align: middle;
34
36
  }
37
+
35
38
  .icons__item:hover {
36
- color:#3c90be;
39
+ color: #3c90be;
37
40
  }
41
+
42
+ .icons__item span {
43
+ display: inline-block;
44
+ line-height: 3em;
45
+ margin-left: 5px;
46
+ }
47
+
38
48
  @font-face {
39
- font-family: {{ fontName }};
40
- {% if formats.indexOf('eot')>-1 -%}
41
- src: url("{{ fontPath }}{{ fontName }}.eot");
42
- {%- endif %}
43
- {%- set eotIndex = formats.indexOf('eot') -%}
44
- {%- set woff2Index = formats.indexOf('woff2') -%}
45
- {%- set woffIndex = formats.indexOf('woff') -%}
46
- {%- set ttfIndex = formats.indexOf('ttf') -%}
47
- {%- set svgIndex = formats.indexOf('svg') %}
48
- src: {% if eotIndex != -1 -%}
49
- url("{{ fontPath }}{{ fontName }}.eot?#iefix") format("embedded-opentype")
50
- {%- set nothing = formats.splice(eotIndex, 1) -%}
51
- {%- if formats.length != 0 -%}, {% else -%}; {% endif -%}
52
- {%- endif -%}
53
- {%- if woff2Index != -1 -%}
54
- url("{{ fontPath }}{{ fontName }}.woff2") format("woff2")
55
- {%- set nothing = formats.splice(woff2Index, 1) -%}
56
- {%- if formats.length != 0 -%}, {% else -%}; {% endif -%}
57
- {%- endif -%}
58
- {%- if woffIndex != -1 -%}
59
- url("{{ fontPath }}{{ fontName }}.woff") format("woff")
60
- {%- set nothing = formats.splice(woffIndex, 1) -%}
61
- {%- if formats.length != 0 -%}, {% else -%}; {% endif -%}
62
- {%- endif -%}
63
- {%- if ttfIndex != -1 -%}
64
- url("{{ fontPath }}{{ fontName }}.ttf") format("truetype")
65
- {%- set nothing = formats.splice(ttfIndex, 1) -%}
66
- {%- if formats.length != 0 -%}, {% else -%}; {% endif -%}
67
- {%- endif -%}
68
- {%- if svgIndex != -1 -%}
69
- url("{{ fontPath }}{{ fontName }}.svg#{{ fontName }}") format("svg");
70
- {%- endif %}
71
- font-style: normal;
72
- font-weight: 400;
49
+ font-family: "{{ fontName }}";
50
+ font-style: normal;
51
+ font-weight: 400;
52
+ font-display: auto;
53
+ {% if formats.indexOf('eot')>-1 -%}
54
+ src: url("{{ fontPath }}{{ fontName }}.eot");
55
+ {%- endif %}
56
+ {%- set eotIndex = formats.indexOf('eot') -%}
57
+ {%- set woff2Index = formats.indexOf('woff2') -%}
58
+ {%- set woffIndex = formats.indexOf('woff') -%}
59
+ {%- set ttfIndex = formats.indexOf('ttf') -%}
60
+ {%- set svgIndex = formats.indexOf('svg') %}
61
+ src: {% if eotIndex != -1 -%}
62
+ url("{{ fontPath }}{{ fontName }}.eot?#iefix") format("embedded-opentype")
63
+ {%- set nothing = formats.splice(eotIndex, 1) -%}
64
+ {%- if formats.length != 0 -%}, {% else -%}; {% endif -%}
65
+ {%- endif -%}
66
+ {%- if woff2Index != -1 -%}
67
+ url("{{ fontPath }}{{ fontName }}.woff2") format("woff2")
68
+ {%- set nothing = formats.splice(woff2Index, 1) -%}
69
+ {%- if formats.length != 0 -%}, {% else -%}; {% endif -%}
70
+ {%- endif -%}
71
+ {%- if woffIndex != -1 -%}
72
+ url("{{ fontPath }}{{ fontName }}.woff") format("woff")
73
+ {%- set nothing = formats.splice(woffIndex, 1) -%}
74
+ {%- if formats.length != 0 -%}, {% else -%}; {% endif -%}
75
+ {%- endif -%}
76
+ {%- if ttfIndex != -1 -%}
77
+ url("{{ fontPath }}{{ fontName }}.ttf") format("truetype")
78
+ {%- set nothing = formats.splice(ttfIndex, 1) -%}
79
+ {%- if formats.length != 0 -%}, {% else -%}; {% endif -%}
80
+ {%- endif -%}
81
+ {%- if svgIndex != -1 -%}
82
+ url("{{ fontPath }}{{ fontName }}.svg#{{ fontName }}") format("svg");
83
+ {%- endif %}
73
84
  }
74
85
 
75
86
  .{{ className }} {
76
- display: inline-block;
77
- transform: translate(0, 0);
78
- text-rendering: auto;
79
- font: normal normal 400 14px/1 {{ fontName }};
80
- font-size: inherit;
81
- -moz-osx-font-smoothing: grayscale;
82
- -webkit-font-smoothing: antialiased;
87
+ display: inline-block;
88
+ font-family: "{{ fontName }}";
89
+ font-weight: 400;
90
+ font-style: normal;
91
+ font-variant: normal;
92
+ text-rendering: auto;
93
+ line-height: 1;
94
+ -moz-osx-font-smoothing: grayscale;
95
+ -webkit-font-smoothing: antialiased;
83
96
  }
84
97
 
85
98
  .{{ className }}-lg {
86
- vertical-align: -15%;
87
- line-height: 0.75em;
88
- font-size: 1.33333333em;
99
+ font-size: 1.33333em;
100
+ line-height: 0.75em;
101
+ vertical-align: -0.0667em;
102
+ }
103
+
104
+ .{{ className }}-xs {
105
+ font-size: 0.75em;
106
+ }
107
+
108
+ .{{ className }}-sm {
109
+ font-size: 0.875em;
110
+ }
111
+
112
+ .{{ className }}-1x {
113
+ font-size: 1em;
89
114
  }
90
115
 
91
116
  .{{ className }}-2x {
92
- font-size: 2em;
117
+ font-size: 2em;
93
118
  }
94
119
 
95
120
  .{{ className }}-3x {
96
- font-size: 3em;
121
+ font-size: 3em;
97
122
  }
98
123
 
99
124
  .{{ className }}-4x {
100
- font-size: 4em;
125
+ font-size: 4em;
101
126
  }
102
127
 
103
128
  .{{ className }}-5x {
104
- font-size: 5em;
129
+ font-size: 5em;
130
+ }
131
+
132
+ .{{ className }}-6x {
133
+ font-size: 6em;
134
+ }
135
+
136
+ .{{ className }}-7x {
137
+ font-size: 7em;
138
+ }
139
+
140
+ .{{ className }}-8x {
141
+ font-size: 8em;
142
+ }
143
+
144
+ .{{ className }}-9x {
145
+ font-size: 9em;
146
+ }
147
+
148
+ .{{ className }}-10x {
149
+ font-size: 10em;
105
150
  }
106
151
 
107
152
  .{{ className }}-fw {
108
- width: 1.28571429em;
109
- text-align: center;
110
- }{% for glyph in glyphs
111
- %}
153
+ text-align: center;
154
+ width: 1.25em;
155
+ }
156
+
157
+ .{{ className }}-border {
158
+ border: solid 0.08em #eee;
159
+ border-radius: 0.1em;
160
+ padding: 0.2em 0.25em 0.15em;
161
+ }
112
162
 
163
+ .{{ className }}-pull-left {
164
+ float: left;
165
+ }
166
+
167
+ .{{ className }}-pull-right {
168
+ float: right;
169
+ }
170
+
171
+ .{{ className }}.{{ className }}-pull-left {
172
+ margin-right: 0.3em;
173
+ }
174
+
175
+ .{{ className }}.{{ className }}-pull-right {
176
+ margin-left: 0.3em;
177
+ }
178
+
179
+ {% for glyph in glyphs %}
113
180
  .{{ className }}-{{ glyph.name }}::before {
114
- content: "\{{ glyph.unicode[0].charCodeAt(0).toString(16) }}";
115
- }{% endfor %}
181
+ content: "\{{ glyph.unicode[0].charCodeAt(0).toString(16) }}";
182
+ }
183
+ {% endfor %}
116
184
  </style>
117
185
  </head>
118
186
  <body>
119
187
  <h1>List Icons</h1>
120
188
  <div class="icons" id="icons">
121
189
  {% for glyph in glyphs %}
122
- <div class="icons__item">
123
- <i class="{{ className }} {{ className }}-{{ glyph.name }}"></i>
124
- <span>{{ className }}-{{ glyph.name }}</span>
125
- </div>
190
+ <div class="icons__item">
191
+ <i class="{{ className }} {{ className }}-3x {{ className }}-{{ glyph.name }}"></i>
192
+ <span>{{ className }}-{{ glyph.name }}</span>
193
+ </div>
126
194
  {% endfor %}
127
195
  </div>
128
196
  </body>
package/templates/template.scss.njk CHANGED
@@ -1,85 +1,144 @@
1
- {% for glyph in glyphs
2
- %}${{ className }}-{{ glyph.name }}: "\{{ glyph.unicode[0].charCodeAt(0).toString(16) }}";
1
+ {% for glyph in glyphs%}
2
+ ${{ className }}-{{ glyph.name }}: "\{{ glyph.unicode[0].charCodeAt(0).toString(16) }}";
3
3
  {% endfor %}
4
+
4
5
  @font-face {
5
- font-family: {{ fontName }};
6
- {% if formats.indexOf('eot')>-1 -%}
7
- src: url("{{ fontPath }}{{ fontName }}.eot");
8
- {%- endif -%}
9
- {%- set eotIndex = formats.indexOf('eot') -%}
10
- {%- set woff2Index = formats.indexOf('woff2') -%}
11
- {%- set woffIndex = formats.indexOf('woff') -%}
12
- {%- set ttfIndex = formats.indexOf('ttf') -%}
13
- {%- set svgIndex = formats.indexOf('svg') %}
14
- src: {% if eotIndex != -1 -%}
15
- url("{{ fontPath }}{{ fontName }}.eot?#iefix") format("embedded-opentype")
16
- {%- set nothing = formats.splice(eotIndex, 1) -%}
17
- {%- if formats.length != 0 -%}, {% else -%}; {% endif -%}
18
- {%- endif -%}
19
- {%- if woff2Index != -1 -%}
20
- url("{{ fontPath }}{{ fontName }}.woff2") format("woff2")
21
- {%- set nothing = formats.splice(woff2Index, 1) -%}
22
- {%- if formats.length != 0 -%}, {% else -%}; {% endif -%}
23
- {%- endif -%}
24
- {%- if woffIndex != -1 -%}
25
- url("{{ fontPath }}{{ fontName }}.woff") format("woff")
26
- {%- set nothing = formats.splice(woffIndex, 1) -%}
27
- {%- if formats.length != 0 -%}, {% else -%}; {% endif -%}
28
- {%- endif -%}
29
- {%- if ttfIndex != -1 -%}
30
- url("{{ fontPath }}{{ fontName }}.ttf") format("truetype")
31
- {%- set nothing = formats.splice(ttfIndex, 1) -%}
32
- {%- if formats.length != 0 -%}, {% else -%}; {% endif -%}
33
- {%- endif -%}
34
- {%- if svgIndex != -1 -%}
35
- url("{{ fontPath }}{{ fontName }}.svg#{{ fontName }}") format("svg");
36
- {%- endif %}
37
- font-style: normal;
38
- font-weight: 400;
6
+ font-family: "{{ fontName }}";
7
+ font-style: normal;
8
+ font-weight: 400;
9
+ font-display: auto;
10
+ {% if formats.indexOf('eot')>-1 -%}
11
+ src: url("{{ fontPath }}{{ fontName }}.eot");
12
+ {%- endif -%}
13
+ {%- set eotIndex = formats.indexOf('eot') -%}
14
+ {%- set woff2Index = formats.indexOf('woff2') -%}
15
+ {%- set woffIndex = formats.indexOf('woff') -%}
16
+ {%- set ttfIndex = formats.indexOf('ttf') -%}
17
+ {%- set svgIndex = formats.indexOf('svg') %}
18
+ src: {% if eotIndex != -1 -%}
19
+ url("{{ fontPath }}{{ fontName }}.eot?#iefix") format("embedded-opentype")
20
+ {%- set nothing = formats.splice(eotIndex, 1) -%}
21
+ {%- if formats.length != 0 -%}, {% else -%}; {% endif -%}
22
+ {%- endif -%}
23
+ {%- if woff2Index != -1 -%}
24
+ url("{{ fontPath }}{{ fontName }}.woff2") format("woff2")
25
+ {%- set nothing = formats.splice(woff2Index, 1) -%}
26
+ {%- if formats.length != 0 -%}, {% else -%}; {% endif -%}
27
+ {%- endif -%}
28
+ {%- if woffIndex != -1 -%}
29
+ url("{{ fontPath }}{{ fontName }}.woff") format("woff")
30
+ {%- set nothing = formats.splice(woffIndex, 1) -%}
31
+ {%- if formats.length != 0 -%}, {% else -%}; {% endif -%}
32
+ {%- endif -%}
33
+ {%- if ttfIndex != -1 -%}
34
+ url("{{ fontPath }}{{ fontName }}.ttf") format("truetype")
35
+ {%- set nothing = formats.splice(ttfIndex, 1) -%}
36
+ {%- if formats.length != 0 -%}, {% else -%}; {% endif -%}
37
+ {%- endif -%}
38
+ {%- if svgIndex != -1 -%}
39
+ url("{{ fontPath }}{{ fontName }}.svg#{{ fontName }}") format("svg");
40
+ {%- endif %}
39
41
  }
40
42
 
41
43
  %{{ className }} {
42
- display: inline-block;
43
- transform: translate(0, 0);
44
- text-rendering: auto;
45
- font: normal normal 400 14px/1 {{ fontName }};
46
- font-size: inherit;
47
- -moz-osx-font-smoothing: grayscale;
48
- -webkit-font-smoothing: antialiased;
44
+ display: inline-block;
45
+ font-family: "{{ fontName }}";
46
+ font-weight: 400;
47
+ font-style: normal;
48
+ font-variant: normal;
49
+ text-rendering: auto;
50
+ line-height: 1;
51
+ -moz-osx-font-smoothing: grayscale;
52
+ -webkit-font-smoothing: antialiased;
49
53
  }
50
54
 
51
55
  .{{ className }} {
52
- @extend %{{ className }};
56
+ @extend %{{ className }};
53
57
  }
54
58
 
55
59
  .{{ className }}-lg {
56
- vertical-align: -15%;
57
- line-height: 0.75em;
58
- font-size: 1.33333333em;
60
+ font-size: 1.33333em;
61
+ line-height: 0.75em;
62
+ vertical-align: -0.0667em;
63
+ }
64
+
65
+ .{{ className }}-xs {
66
+ font-size: 0.75em;
67
+ }
68
+
69
+ .{{ className }}-sm {
70
+ font-size: 0.875em;
71
+ }
72
+
73
+ .{{ className }}-1x {
74
+ font-size: 1em;
59
75
  }
60
76
 
61
77
  .{{ className }}-2x {
62
- font-size: 2em;
78
+ font-size: 2em;
63
79
  }
64
80
 
65
81
  .{{ className }}-3x {
66
- font-size: 3em;
82
+ font-size: 3em;
67
83
  }
68
84
 
69
85
  .{{ className }}-4x {
70
- font-size: 4em;
86
+ font-size: 4em;
71
87
  }
72
88
 
73
89
  .{{ className }}-5x {
74
- font-size: 5em;
90
+ font-size: 5em;
91
+ }
92
+
93
+ .{{ className }}-6x {
94
+ font-size: 6em;
95
+ }
96
+
97
+ .{{ className }}-7x {
98
+ font-size: 7em;
99
+ }
100
+
101
+ .{{ className }}-8x {
102
+ font-size: 8em;
103
+ }
104
+
105
+ .{{ className }}-9x {
106
+ font-size: 9em;
107
+ }
108
+
109
+ .{{ className }}-10x {
110
+ font-size: 10em;
75
111
  }
76
112
 
77
113
  .{{ className }}-fw {
78
- width: 1.28571429em;
79
- text-align: center;
80
- }{% for glyph in glyphs
81
- %}
114
+ text-align: center;
115
+ width: 1.25em;
116
+ }
117
+
118
+ .{{ className }}-border {
119
+ border: solid 0.08em #eee;
120
+ border-radius: 0.1em;
121
+ padding: 0.2em 0.25em 0.15em;
122
+ }
123
+
124
+ .{{ className }}-pull-left {
125
+ float: left;
126
+ }
82
127
 
128
+ .{{ className }}-pull-right {
129
+ float: right;
130
+ }
131
+
132
+ .{{ className }}.{{ className }}-pull-left {
133
+ margin-right: 0.3em;
134
+ }
135
+
136
+ .{{ className }}.{{ className }}-pull-right {
137
+ margin-left: 0.3em;
138
+ }
139
+
140
+ {% for glyph in glyphs %}
83
141
  .{{ className }}-{{ glyph.name }}::before {
84
142
  content: "\{{ glyph.unicode[0].charCodeAt(0).toString(16) }}";
85
- }{% endfor %}
143
+ }
144
+ {% endfor %}