first commit.
This commit is contained in:
jaywcjlove
commit
ed11c42934
|
|
@ -0,0 +1,12 @@
|
|||
node_modules
|
||||
test/dist
|
||||
.cache
|
||||
.DS_Store
|
||||
|
||||
*.bak
|
||||
*.tem
|
||||
*.log
|
||||
*.temp
|
||||
#.swp
|
||||
*.*~
|
||||
~*.*
|
||||
|
|
@ -0,0 +1 @@
|
|||
test
|
||||
|
|
@ -0,0 +1,304 @@
|
|||
svg to font
|
||||
---
|
||||
|
||||
Converts SVG to TTF/EOT/WOFF/WOFF2/SVG format fonts.
|
||||
|
||||
## Install
|
||||
|
||||
```bash
|
||||
npm i svgtofont
|
||||
```
|
||||
|
||||
Usage svgtofont
|
||||
|
||||
```js
|
||||
const svgtofont = require("svgtofont");
|
||||
const path = require("path");
|
||||
|
||||
svgtofont({
|
||||
src: path.resolve(__dirname, "svg"), // svg path
|
||||
dist: path.resolve(__dirname, "dist"), // output path
|
||||
fontName: "svgtofont", // font name
|
||||
css: true, // Create CSS files.
|
||||
startNumber: 20000, // unicode start number
|
||||
nodemo: true, // no demo html files
|
||||
svgicons2svgfont: {
|
||||
fontHeight: 1000,
|
||||
normalize: true
|
||||
},
|
||||
website: {
|
||||
title: "svgtofont",
|
||||
// Must be a .svg format image.
|
||||
logo: path.resolve(rootPath, "svg", "git.svg"),
|
||||
version: pkg.version,
|
||||
meta: {
|
||||
description: "Converts SVG fonts to TTF/EOT/WOFF/WOFF2/SVG format.",
|
||||
keywords: "svgtofont,TTF,EOT,WOFF,WOFF2,SVG"
|
||||
},
|
||||
description: ``,
|
||||
links: [
|
||||
{
|
||||
title: "GitHub",
|
||||
url: "https://github.com/jaywcjlove/svgtofont"
|
||||
},
|
||||
{
|
||||
title: "Feedback",
|
||||
url: "https://github.com/jaywcjlove/svgtofont/issues"
|
||||
},
|
||||
{
|
||||
title: "Font Class",
|
||||
url: "index.html"
|
||||
},
|
||||
{
|
||||
title: "Unicode",
|
||||
url: "unicode.html"
|
||||
}
|
||||
],
|
||||
footerInfo: `Licensed under MIT. (Yes it's free and <a href="https://github.com/jaywcjlove/svgtofont">open-sourced</a>`
|
||||
}
|
||||
}).then(() => {
|
||||
console.log('done!');
|
||||
});;
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
```js
|
||||
const { createSVG, createTTF, createEOT, createWOFF, createWOFF2 } = require("svgtofont/src/utils");
|
||||
const options = { ... };
|
||||
|
||||
createSVG(options)
|
||||
.then(UnicodeObjChar => {
|
||||
return createTTF(options);
|
||||
})
|
||||
.then(() => {
|
||||
return createEOT(options);
|
||||
})
|
||||
.then(() => {
|
||||
return createWOFF(options);
|
||||
})
|
||||
.then(() => {
|
||||
return createWOFF2(options);
|
||||
})
|
||||
```
|
||||
|
||||
## options
|
||||
|
||||
> svgtofont(options)
|
||||
|
||||
### dist
|
||||
|
||||
Type: `String`
|
||||
Default value: `dist`
|
||||
|
||||
### src
|
||||
|
||||
Type: `String`
|
||||
Default value: `svg`
|
||||
|
||||
### fontName
|
||||
|
||||
Type: `String`
|
||||
Default value: `iconfont`
|
||||
|
||||
The font family name you want.
|
||||
|
||||
### unicodeStart
|
||||
|
||||
Type: `Number`
|
||||
Default value: `10000`
|
||||
|
||||
unicode start number
|
||||
|
||||
### clssaNamePrefix
|
||||
|
||||
Type: `String`
|
||||
Default value: font name
|
||||
|
||||
Create font class name prefix, default value font name.
|
||||
|
||||
### css
|
||||
|
||||
Type: `Boolean`
|
||||
Default value: `false`
|
||||
|
||||
Create CSS/LESS files, default `true`.
|
||||
|
||||
### svgicons2svgfont
|
||||
|
||||
This is the setting for [svgicons2svgfont](https://github.com/nfroidure/svgicons2svgfont/tree/dd713bea4f97afa59f7dba6a21ff7f22db565bcf#api)
|
||||
|
||||
|
||||
#### svgicons2svgfont.fontName
|
||||
|
||||
Type: `String`
|
||||
Default value: `'iconfont'`
|
||||
|
||||
The font family name you want.
|
||||
|
||||
#### svgicons2svgfont.fontId
|
||||
|
||||
Type: `String`
|
||||
Default value: the options.fontName value
|
||||
|
||||
The font id you want.
|
||||
|
||||
#### svgicons2svgfont.fontStyle
|
||||
|
||||
Type: `String`
|
||||
Default value: `''`
|
||||
|
||||
The font style you want.
|
||||
|
||||
#### svgicons2svgfont.fontWeight
|
||||
|
||||
Type: `String`
|
||||
Default value: `''`
|
||||
|
||||
The font weight you want.
|
||||
|
||||
#### svgicons2svgfont.fixedWidth
|
||||
|
||||
Type: `Boolean`
|
||||
Default value: `false`
|
||||
|
||||
Creates a monospace font of the width of the largest input icon.
|
||||
|
||||
#### svgicons2svgfont.centerHorizontally
|
||||
|
||||
Type: `Boolean`
|
||||
Default value: `false`
|
||||
|
||||
Calculate the bounds of a glyph and center it horizontally.
|
||||
|
||||
#### svgicons2svgfont.normalize
|
||||
|
||||
Type: `Boolean`
|
||||
Default value: `false`
|
||||
|
||||
Normalize icons by scaling them to the height of the highest icon.
|
||||
|
||||
#### svgicons2svgfont.fontHeight
|
||||
|
||||
Type: `Number`
|
||||
Default value: `MAX(icons.height)`
|
||||
The outputted font height (defaults to the height of the highest input icon).
|
||||
|
||||
#### svgicons2svgfont.round
|
||||
|
||||
Type: `Number`
|
||||
Default value: `10e12`
|
||||
Setup SVG path rounding.
|
||||
|
||||
#### svgicons2svgfont.descent
|
||||
|
||||
Type: `Number`
|
||||
Default value: `0`
|
||||
|
||||
The font descent. It is usefull to fix the font baseline yourself.
|
||||
|
||||
**Warning:** The descent is a positive value!
|
||||
|
||||
#### svgicons2svgfont.ascent
|
||||
|
||||
Type: `Number`
|
||||
Default value: `fontHeight - descent`
|
||||
|
||||
The font ascent. Use this options only if you know what you're doing. A suitable
|
||||
value for this is computed for you.
|
||||
|
||||
#### svgicons2svgfont.metadata
|
||||
|
||||
Type: `String`
|
||||
Default value: `undefined`
|
||||
|
||||
The font [metadata](http://www.w3.org/TR/SVG/metadata.html). You can set any
|
||||
character data in but it is the be suited place for a copyright mention.
|
||||
|
||||
#### svgicons2svgfont.log
|
||||
|
||||
Type: `Function`
|
||||
Default value: `console.log`
|
||||
|
||||
Allows you to provide your own logging function. Set to `function(){}` to
|
||||
disable logging.
|
||||
|
||||
### svg2ttf
|
||||
|
||||
This is the setting for [svg2ttf](https://github.com/fontello/svg2ttf/tree/c33a126920f46b030e8ce960cc7a0e38a6946bbc#svg2ttfsvgfontstring-options---buf)
|
||||
|
||||
#### svg2ttf.copyright
|
||||
|
||||
Type: `String`
|
||||
|
||||
copyright string
|
||||
|
||||
#### svg2ttf.ts
|
||||
|
||||
Type: `String`
|
||||
|
||||
Unix timestamp (in seconds) to override creation time
|
||||
|
||||
#### svg2ttf.version
|
||||
|
||||
Type: `Number`
|
||||
|
||||
font version string, can be Version `x.y` or `x.y`.
|
||||
|
||||
### website
|
||||
|
||||
Define preview web content. Example:
|
||||
|
||||
```js
|
||||
{
|
||||
website: {
|
||||
title: "svgtofont",
|
||||
logo: path.resolve(rootPath, "svg", "git.svg"),
|
||||
version: pkg.version,
|
||||
meta: {
|
||||
description: "Converts SVG fonts to TTF/EOT/WOFF/WOFF2/SVG format.",
|
||||
keywords: "svgtofont,TTF,EOT,WOFF,WOFF2,SVG",
|
||||
favicon: "./favicon.png"
|
||||
},
|
||||
footerLinks: [
|
||||
{
|
||||
title: "GitHub",
|
||||
url: "https://github.com/jaywcjlove/svgtofont"
|
||||
},
|
||||
{
|
||||
title: "Feedback",
|
||||
url: "https://github.com/jaywcjlove/svgtofont/issues"
|
||||
},
|
||||
{
|
||||
title: "Font Class",
|
||||
url: "index.html"
|
||||
},
|
||||
{
|
||||
title: "Unicode",
|
||||
url: "unicode.html"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### website.template
|
||||
|
||||
Type: `String`
|
||||
Default value: [index.ejs](src/website/index.ejs)
|
||||
|
||||
> Custom template can customize parameters.
|
||||
|
||||
You can define your own template based on the [default template](src/website/index.ejs).
|
||||
|
||||
```js
|
||||
{
|
||||
website: {
|
||||
template: path.join(__dirname, "my-template.ejs")
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## License
|
||||
|
||||
Licensed under the [MIT License](https://opensource.org/licenses/MIT).
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,46 @@
|
|||
{
|
||||
"name": "svgtofont",
|
||||
"version": "1.1.0",
|
||||
"description": "Converts SVG to TTF/EOT/WOFF/WOFF2/SVG format fonts.",
|
||||
"main": "src/index.js",
|
||||
"scripts": {
|
||||
"test": "node test/index.js"
|
||||
},
|
||||
"author": "Kenny <wowohoo@qq.com>",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/jaywcjlove/svgtofont.git"
|
||||
},
|
||||
"keywords": [
|
||||
"webfont",
|
||||
"icon",
|
||||
"iconfont",
|
||||
"font-face",
|
||||
"compress",
|
||||
"minify",
|
||||
"font-cli",
|
||||
"otf",
|
||||
"ttf",
|
||||
"woff",
|
||||
"eot",
|
||||
"svg",
|
||||
"ttf2eot",
|
||||
"ttf2woff",
|
||||
"ttf2svg",
|
||||
"svg2ttf",
|
||||
"css",
|
||||
"base64"
|
||||
],
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"colors-cli": "^1.0.18",
|
||||
"copy-template-dir": "^1.4.0",
|
||||
"ejs": "^2.6.1",
|
||||
"fs-extra": "^7.0.0",
|
||||
"svg2ttf": "^4.1.0",
|
||||
"svgicons2svgfont": "^9.0.3",
|
||||
"ttf2eot": "^2.0.0",
|
||||
"ttf2woff": "^2.0.1",
|
||||
"ttf2woff2": "^2.0.3"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
|
||||
|
||||
const fs = require("fs-extra");
|
||||
const path = require("path");
|
||||
require("colors-cli/toxic");
|
||||
const {
|
||||
createSVG,
|
||||
createTTF,
|
||||
createEOT,
|
||||
createWOFF,
|
||||
createWOFF2,
|
||||
createHTML,
|
||||
copyTemplate
|
||||
} = require("./utils");
|
||||
|
||||
module.exports = function create(options) {
|
||||
if (!options) options = {};
|
||||
options.dist = options.dist || "dist";
|
||||
options.src = options.src || "svg";
|
||||
options.unicodeStart = options.unicodeStart || 10000;
|
||||
options.svg2ttf = options.svg2ttf || {};
|
||||
options.svgicons2svgfont = options.svgicons2svgfont || {};
|
||||
options.svgicons2svgfont.fontName = options.fontName || "iconfont";
|
||||
options.clssaNamePrefix = options.clssaNamePrefix || options.svgicons2svgfont.fontName;
|
||||
let dist = options.dist;
|
||||
|
||||
fs.emptyDirSync(dist);
|
||||
let cssString = [];
|
||||
let cssIconHtml = [];
|
||||
let unicodeHtml = [];
|
||||
const htmlPath = path.join(options.dist, "index.html");
|
||||
const unicodeHtmlPath = path.join(options.dist, "unicode.html");
|
||||
|
||||
return createSVG(options)
|
||||
.then(UnicodeObject => {
|
||||
Object.keys(UnicodeObject).forEach(name => {
|
||||
let _code = UnicodeObject[name];
|
||||
let _num = _code.charCodeAt(0).toString(16);
|
||||
cssIconHtml.push(`<li class="class-icon"><i class="${options.clssaNamePrefix}-${name}"></i><p class="name">${name}</p></li>`);
|
||||
unicodeHtml.push(`<li class="unicode-icon"><span class="iconfont">${_code}</span><h4>${name}</h4><span class="unicode">&#${_code.charCodeAt(0)};</span></li>`);
|
||||
cssString.push(`.${options.clssaNamePrefix}-${name}:before { content: "\\${_num}"; }\n`);
|
||||
});
|
||||
return createTTF(options);
|
||||
})
|
||||
.then(() => {
|
||||
return createEOT(options);
|
||||
})
|
||||
.then(() => {
|
||||
return createWOFF(options);
|
||||
})
|
||||
.then(() => {
|
||||
return createWOFF2(options);
|
||||
})
|
||||
.then(() => {
|
||||
// If you generate a font you need to generate a style.
|
||||
if (options.website) options.css = true;
|
||||
if (options.css) {
|
||||
const font_temp = path.resolve(__dirname, "styles");
|
||||
return copyTemplate(font_temp, options.dist, {
|
||||
fontname: options.fontName,
|
||||
cssString: cssString.join(""),
|
||||
timestamp: new Date().getTime(),
|
||||
prefix: options.clssaNamePrefix || options.fontName
|
||||
});
|
||||
}
|
||||
})
|
||||
.then(filePaths => {
|
||||
// output log
|
||||
filePaths && filePaths.length > 0 && filePaths.forEach(filePath =>
|
||||
console.log(`${'SUCCESS'.green} Created ${filePath} `)
|
||||
);
|
||||
})
|
||||
.then(() => {
|
||||
if (options.website) {
|
||||
options.website.template = options.website.template || path.join(__dirname, "website", "index.ejs");
|
||||
this.tempData = { ...options.website, _fontname: options.fontName, _unicode: false, _logo: options.website.logo, _link: `${options.fontName}.css`, _IconHtml: cssIconHtml.join(), _title: options.website.title || options.fontName };
|
||||
// website logo
|
||||
if (options.website.logo && fs.pathExistsSync(options.website.logo) && path.extname(options.website.logo) === ".svg") {
|
||||
this.tempData._logo = fs.readFileSync(options.website.logo);
|
||||
}
|
||||
return createHTML({
|
||||
outPath: options.website.template,
|
||||
data: this.tempData
|
||||
});
|
||||
}
|
||||
})
|
||||
.then(str => str && fs.outputFileSync(htmlPath, str))
|
||||
.then(str => console.log(`${'SUCCESS'.green} Created ${htmlPath} `))
|
||||
.then(str => {
|
||||
if (options.website) {
|
||||
this.tempData._IconHtml = unicodeHtml.join();
|
||||
this.tempData._unicode = true;
|
||||
return createHTML({
|
||||
outPath: options.website.template,
|
||||
data: this.tempData
|
||||
});
|
||||
}
|
||||
})
|
||||
.then(str => str && fs.outputFileSync(unicodeHtmlPath, str))
|
||||
.then(str => console.log(`${'SUCCESS'.green} Created ${unicodeHtmlPath} `));
|
||||
}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
@font-face {
|
||||
font-family: "{{fontname}}";
|
||||
src: url('{{fontname}}.eot?t={{timestamp}}'); /* IE9*/
|
||||
src: url('{{fontname}}.eot?t={{timestamp}}#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||
url('{{fontname}}.ttf?t={{timestamp}}') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
|
||||
url('{{fontname}}.svg?t={{timestamp}}#{{fontname}}') format('svg'); /* iOS 4.1- */
|
||||
}
|
||||
|
||||
[class^="{{prefix}}-"], [class*=" {{prefix}}-"] {
|
||||
font-family: '{{fontname}}' !important;
|
||||
font-size:16px;
|
||||
font-style:normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
|
||||
{{cssString}}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
@font-face {font-family: "{{fontname}}";
|
||||
src: url('{{fontname}}.eot?t={{timestamp}}'); /* IE9*/
|
||||
src: url('{{fontname}}.eot?t={{timestamp}}#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||
url('{{fontname}}.ttf?t={{timestamp}}') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
|
||||
url('{{fontname}}.svg?t={{timestamp}}#{{fontname}}') format('svg'); /* iOS 4.1- */
|
||||
}
|
||||
|
||||
[class^="{{prefix}}-"], [class*=" {{prefix}}-"] {
|
||||
font-family: '{{fontname}}' !important;
|
||||
font-size:16px;
|
||||
font-style:normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
:global {
|
||||
{{cssString}}
|
||||
}
|
||||
|
|
@ -0,0 +1,177 @@
|
|||
const fs = require("fs");
|
||||
const path = require("path");
|
||||
const ejs = require("ejs");
|
||||
const SVGIcons2SVGFont = require("svgicons2svgfont");
|
||||
const copy = require("copy-template-dir");
|
||||
const ttf2eot = require('ttf2eot');
|
||||
const svg2ttf = require("svg2ttf");
|
||||
const ttf2woff = require("ttf2woff");
|
||||
const ttf2woff2 = require("ttf2woff2");
|
||||
require("colors-cli/toxic");
|
||||
|
||||
let UnicodeObj = {};
|
||||
// Unicode Private Use Area start.
|
||||
// https://en.wikipedia.org/wiki/Private_Use_Areas
|
||||
let startUnicode = 0xea01;
|
||||
|
||||
/*
|
||||
* Get icon unicode
|
||||
* @return {Array} unicode array
|
||||
*/
|
||||
function getIconUnicode(name) {
|
||||
let unicode = String.fromCharCode(startUnicode++);
|
||||
UnicodeObj[name] = unicode;
|
||||
return [unicode];
|
||||
}
|
||||
/*
|
||||
* Filter svg files
|
||||
* @return {Array} svg files
|
||||
*/
|
||||
function filterSvgFiles(svgFolderPath) {
|
||||
let files = fs.readdirSync(svgFolderPath, 'utf-8');
|
||||
let svgArr = [];
|
||||
if (!files) {
|
||||
throw new Error(`Error! Svg folder is empty.${svgFolderPath}`);
|
||||
}
|
||||
|
||||
for (let i in files) {
|
||||
if (typeof files[i] !== 'string' || path.extname(files[i]) !== '.svg') continue;
|
||||
if (!~svgArr.indexOf(files[i])) {
|
||||
svgArr.push(path.join(svgFolderPath, files[i]));
|
||||
}
|
||||
}
|
||||
return svgArr;
|
||||
}
|
||||
/**
|
||||
* SVG to SVG font
|
||||
*/
|
||||
exports.createSVG = OPTIONS => {
|
||||
number = OPTIONS.unicodeStart;
|
||||
return new Promise((resolve, reject) => {
|
||||
// init
|
||||
const fontStream = new SVGIcons2SVGFont({
|
||||
...OPTIONS.svgicons2svgfont
|
||||
});
|
||||
function writeFontStream(svgPath) {
|
||||
// file name
|
||||
let _name = path.basename(svgPath, ".svg");
|
||||
const glyph = fs.createReadStream(svgPath);
|
||||
glyph.metadata = { unicode: getIconUnicode(_name), name: _name };
|
||||
fontStream.write(glyph);
|
||||
}
|
||||
|
||||
const DIST_PATH = path.join(OPTIONS.dist, OPTIONS.fontName + ".svg");
|
||||
// Setting the font destination
|
||||
fontStream.pipe(fs.createWriteStream(DIST_PATH)).on("finish", () => {
|
||||
console.log(`${"SUCCESS".green} ${'SVG'.blue_bt} font successfully created! (${DIST_PATH})`);
|
||||
resolve(UnicodeObj);
|
||||
}).on("error", (err) => {
|
||||
if (err) {
|
||||
console.log(err);
|
||||
reject(err);
|
||||
}
|
||||
});
|
||||
filterSvgFiles(OPTIONS.src).forEach(svg => {
|
||||
if (typeof svg !== "string") return false;
|
||||
writeFontStream(svg);
|
||||
});
|
||||
|
||||
// Do not forget to end the stream
|
||||
fontStream.end();
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* SVG font to TTF
|
||||
*/
|
||||
exports.createTTF = OPTIONS => {
|
||||
return new Promise((resolve, reject) => {
|
||||
OPTIONS.svg2ttf = OPTIONS.svg2ttf || {};
|
||||
const DIST_PATH = path.join(OPTIONS.dist, OPTIONS.fontName + ".ttf");
|
||||
let ttf = svg2ttf(fs.readFileSync(path.join(OPTIONS.dist, OPTIONS.fontName + ".svg"), "utf8"), OPTIONS.svg2ttf);
|
||||
ttf = this.ttf = new Buffer(ttf.buffer);
|
||||
fs.writeFile(DIST_PATH, ttf, (err, data) => {
|
||||
if (err) {
|
||||
return reject(err);
|
||||
}
|
||||
console.log(`${"SUCCESS".green} ${"TTF".blue_bt} font successfully created! (${DIST_PATH})`);
|
||||
resolve(data);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* TTF font to EOT
|
||||
*/
|
||||
exports.createEOT = OPTIONS => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const DIST_PATH = path.join(OPTIONS.dist, OPTIONS.fontName + '.eot');
|
||||
const eot = new Buffer(ttf2eot(this.ttf).buffer);
|
||||
|
||||
fs.writeFile(DIST_PATH, eot, (err, data) => {
|
||||
if (err) {
|
||||
return reject(err);
|
||||
}
|
||||
console.log(`${"SUCCESS".green} ${"EOT".blue_bt} font successfully created! (${DIST_PATH})`);
|
||||
resolve(data);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* TTF font to WOFF
|
||||
*/
|
||||
exports.createWOFF = OPTIONS => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const DIST_PATH = path.join(OPTIONS.dist, OPTIONS.fontName + ".woff");
|
||||
const woff = new Buffer(ttf2woff(this.ttf).buffer);
|
||||
fs.writeFile(DIST_PATH, woff, (err, data) => {
|
||||
if (err) {
|
||||
return reject(err);
|
||||
}
|
||||
console.log(`${"SUCCESS".green} ${"WOFF".blue_bt} font successfully created! (${DIST_PATH})`);
|
||||
resolve(data);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* TTF font to WOFF2
|
||||
*/
|
||||
exports.createWOFF2 = OPTIONS => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const DIST_PATH = path.join(OPTIONS.dist, OPTIONS.fontName + ".woff2");
|
||||
const woff2 = new Buffer(ttf2woff2(this.ttf).buffer);
|
||||
fs.writeFile(DIST_PATH, woff2, (err, data) => {
|
||||
if (err) {
|
||||
return reject(err);
|
||||
}
|
||||
console.log(`${"SUCCESS".green} ${"WOFF2".blue_bt} font successfully created! (${DIST_PATH})`);
|
||||
resolve(data);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Copy template files
|
||||
*/
|
||||
exports.copyTemplate = (inDir, outDir, vars) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
copy(inDir, outDir, vars, (err, createdFiles) => {
|
||||
if (err) reject(err);
|
||||
resolve(createdFiles);
|
||||
})
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Create HTML
|
||||
*/
|
||||
exports.createHTML = ({ outPath, data = {}, options = {} }) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
ejs.renderFile(outPath, data, options, (err, str) => {
|
||||
if (err) reject(err);
|
||||
resolve(str);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
|
@ -0,0 +1,124 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title><%=_title%></title>
|
||||
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
|
||||
<%if (meta && Object.keys(meta).length > 0) { Object.keys(meta).forEach((metaName) => { %>
|
||||
<meta name="<%=metaName%>" content="<%=meta[metaName]%>">
|
||||
<%})}%>
|
||||
<%if(!_unicode && _link) {%>
|
||||
<link rel="stylesheet" href="<%=_link%>" />
|
||||
<%}%>
|
||||
<style>
|
||||
*{margin: 0;padding: 0;list-style: none;}
|
||||
body { color: #696969; font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif; }
|
||||
a { color: #333; text-decoration: underline; }
|
||||
a:hover { color: rgb(9, 73, 209); }
|
||||
.header { color: #333; text-align: center; padding: 80px 0 60px 0; min-height: 153px; font-size: 14px; }
|
||||
.header .logo svg { height: 120px; width: 120px; }
|
||||
.header h1 { font-size: 42px; padding: 26px 0 10px 0; }
|
||||
.header sup {font-size: 14px; margin: 8px 0 0 8px; position: absolute; color: #7b7b7b; }
|
||||
.info {
|
||||
color: #999;
|
||||
font-weight: normal;
|
||||
max-width: 346px;
|
||||
margin: 0 auto;
|
||||
padding: 20px 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.icons { max-width: 1190px; margin: 0 auto; }
|
||||
.icons ul { text-align: center; }
|
||||
.icons ul li {
|
||||
vertical-align: top;
|
||||
width: 120px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
background-color: rgba(0,0,0,.02);
|
||||
border-radius: 3px;
|
||||
padding: 29px 0 10px 0;
|
||||
margin-right: 10px;
|
||||
margin-top: 10px;
|
||||
transition: all 0.6s ease;
|
||||
}
|
||||
.icons ul li:hover { background-color: rgba(0,0,0,.06); }
|
||||
.icons ul li .unicode { color: #8c8c8c; opacity: 0.3; }
|
||||
.icons ul li h4 {
|
||||
font-weight: normal;
|
||||
padding: 10px 0 5px 0;
|
||||
display: block;
|
||||
color: #8c8c8c;
|
||||
font-size: 14px;
|
||||
line-height: 12px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.icons ul li:hover h4 { opacity: 1; }
|
||||
.icons ul li svg { width: 24px; height: 24px; }
|
||||
.icons ul li:hover { color: #3c75e4; }
|
||||
.icons ul .unicode-icon span { display: block; }
|
||||
.icons ul .unicode-icon h4 { font-size: 12px; }
|
||||
.icons ul li.class-icon { font-size: 21px; line-height: 21px; padding-bottom: 20px; }
|
||||
.icons ul li.class-icon p{ font-size: 12px; }
|
||||
.footer { text-align: center; padding: 10px 0 90px 0; }
|
||||
.links { text-align: center; padding: 50px 0 0 0; font-size: 14px; }
|
||||
<%if(_unicode) {%>
|
||||
@font-face {
|
||||
font-family: "<%-_fontname%>";
|
||||
src: url("<%-_fontname%>.eot");
|
||||
/* IE9*/
|
||||
src: url("<%-_fontname%>.eot#iefix") format("embedded-opentype"),
|
||||
/* IE6-IE8 */
|
||||
url("<%-_fontname%>.woff") format("woff"),
|
||||
/* chrome, firefox */
|
||||
url("<%-_fontname%>.ttf") format("truetype"),
|
||||
/* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
|
||||
url("<%-_fontname%>.svg#<%-_fontname%>") format("svg");
|
||||
/* iOS 4.1- */
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-family: "<%-_fontname%>" !important;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-webkit-text-stroke-width: 0.2px;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
<%}%>
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="header">
|
||||
<%if(_logo) {%>
|
||||
<div class="logo">
|
||||
<a href="./"><%-_logo%></a>
|
||||
</div>
|
||||
<%}%>
|
||||
<h1><%=_title%><sup><%-version%></sup></h1>
|
||||
<div class="info">
|
||||
<%-description || (meta && meta.description)%>
|
||||
</div>
|
||||
<p>
|
||||
<%if(links && links.length > 0) { links.forEach((linkItem) => {%>
|
||||
<a href="<%-linkItem.url%>"><%-linkItem.title%></a> ·
|
||||
<%})}%>
|
||||
</p>
|
||||
</div>
|
||||
<div class="icons">
|
||||
<ul>
|
||||
<%-_IconHtml%>
|
||||
</ul>
|
||||
</div>
|
||||
<p class="links">
|
||||
<%if(links && links.length > 0) { links.forEach((linkItem, index) => {%>
|
||||
<a href="<%-linkItem.url%>"><%-linkItem.title%></a><%if(links.length-1 !== index){%> · <%}%>
|
||||
<%})}%>
|
||||
</p>
|
||||
<div class="footer">
|
||||
<%-footerInfo%>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
const svgtofont = require("../src");
|
||||
const path = require("path");
|
||||
const pkg = require('../package.json')
|
||||
|
||||
const rootPath = path.resolve(process.cwd(), "test");
|
||||
|
||||
svgtofont({
|
||||
src: path.resolve(rootPath, "svg"), // svg path
|
||||
dist: path.resolve(rootPath, "dist"), // output path
|
||||
fontName: "svgtofont", // font name
|
||||
css: true, // Create CSS files.
|
||||
startNumber: 20000, // unicode start number
|
||||
nodemo: true, // no demo html files
|
||||
svgicons2svgfont: {
|
||||
fontHeight: 1000,
|
||||
normalize: true
|
||||
},
|
||||
website: {
|
||||
title: "svgtofont",
|
||||
// Must be a .svg format image.
|
||||
logo: path.resolve(rootPath, "svg", "git.svg"),
|
||||
version: pkg.version,
|
||||
meta: {
|
||||
description: "Converts SVG fonts to TTF/EOT/WOFF/WOFF2/SVG format.",
|
||||
keywords: "svgtofont,TTF,EOT,WOFF,WOFF2,SVG"
|
||||
},
|
||||
description: ``,
|
||||
links: [
|
||||
{
|
||||
title: "GitHub",
|
||||
url: "https://github.com/jaywcjlove/svgtofont"
|
||||
},
|
||||
{
|
||||
title: "Feedback",
|
||||
url: "https://github.com/jaywcjlove/svgtofont/issues"
|
||||
},
|
||||
{
|
||||
title: "Font Class",
|
||||
url: "index.html"
|
||||
},
|
||||
{
|
||||
title: "Unicode",
|
||||
url: "unicode.html"
|
||||
}
|
||||
],
|
||||
footerInfo: `Licensed under MIT. (Yes it's free and <a href="https://github.com/jaywcjlove/svgtofont">open-sourced</a>)`
|
||||
}
|
||||
}).then(() => {
|
||||
console.log("done!!!!");
|
||||
});
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="24" height="24" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="m2.6 10.59l5.78-5.79 1.69 1.7c-0.24 0.85 0.15 1.78 0.93 2.23v5.54c-0.6 0.34-1 0.99-1 1.73a2 2 0 0 0 2 2 2 2 0 0 0 2 -2c0-0.74-0.4-1.39-1-1.73v-4.86l2.07 2.09c-0.07 0.15-0.07 0.32-0.07 0.5a2 2 0 0 0 2 2 2 2 0 0 0 2 -2 2 2 0 0 0 -2 -2c-0.18 0-0.35 0-0.5 0.07l-2.57-2.57c0.26-0.93-0.22-1.95-1.15-2.34-0.43-0.16-0.88-0.2-1.28-0.09l-1.7-1.69 0.79-0.78c0.78-0.79 2.04-0.79 2.82 0l7.99 7.99c0.79 0.78 0.79 2.04 0 2.82l-7.99 7.99c-0.78 0.79-2.04 0.79-2.82 0l-7.99-7.99c-0.79-0.78-0.79-2.04 0-2.82z" fill="#e64a19"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 623 B |
Loading…
Reference in New Issue