mirror/eva-icons
1
0
Fork 0
mirror of https://github.com/akveo/eva-icons.git synced 2025-09-02 02:12:42 +02:00
Code Issues Releases Wiki Activity

fix(builder): fix web fonts building (#27)

Browse Source 
Closes #26
This commit is contained in:
Denis Strigo
2018-11-12 15:40:17 +02:00
committed by Dmitry Nehaychik
parent cc48a6bc81
commit d907505e06
7 changed files with 3044 additions and 2979 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5905
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
package.json
View File

@@ -65,6 +65,7 @@
"cross-env": "^5.2.0", "cross-env": "^5.2.0",
"css-loader": "^1.0.0", "css-loader": "^1.0.0",
"fs-extra": "^7.0.0", "fs-extra": "^7.0.0",
"globby": "^8.0.1",
"gm": "^1.23.1", "gm": "^1.23.1",
"html-minifier": "^3.5.20", "html-minifier": "^3.5.20",
"jasmine-core": "~2.99.1", "jasmine-core": "~2.99.1",

13
scripts/services/build-web-font.js
View File

@@ -9,16 +9,19 @@ const path = require('path');
const fs = require('fs-extra'); const fs = require('fs-extra');
const processScss = require('./process-scss'); const processScss = require('./process-scss');
const prepareSVGsForFonts = require('./web-font-process-svgs');
const config = require('../config'); const config = require('../config');
const fileSystemHelper = require('../helpers/fs-helper'); const fileSystemHelper = require('../helpers/fs-helper');
const webFontOptions = { const webFontOptions = {
files: path.resolve(config.srcPath, '**/*.svg'), files: path.resolve(config.desPath, '**/icons/svg/*.svg'),
fontName: 'Eva-Icons', fontName: 'Eva-Icons',
template: 'css', template: 'css',
templateFontName: 'Eva-Icons', templateFontName: 'Eva-Icons',
templateClassName: 'eva', templateClassName: 'eva',
templateFontPath: './fonts' templateFontPath: './fonts',
normalize: true,
fontHeight: 600,
}; };
const buildFont = () => { const buildFont = () => {
@@ -27,6 +30,8 @@ const buildFont = () => {
fileSystemHelper.mkDirByPathSync(dest); fileSystemHelper.mkDirByPathSync(dest);
return prepareSVGsForFonts()
.then(() => {
return webfont(webFontOptions) return webfont(webFontOptions)
.then((result) => { .then((result) => {
const { fontName, template } = result.config; const { fontName, template } = result.config;
@@ -52,7 +57,9 @@ const buildFont = () => {
return fs.outputFile(file, content); return fs.outputFile(file, content);
})) }))
.then(() => processScss()); .then(() => processScss())
.then(() => fileSystemHelper.remove(path.join(config.desPath, '/style/icons')));
});
}); });
}; };

11
scripts/services/oprimize-svg.js
View File

@@ -6,16 +6,17 @@
const Svgo = require('svgo'); const Svgo = require('svgo');
const optimizeSvg = (svg) => { const defaultOptions = [
const svgo = new Svgo({
plugins: [
{ removeHiddenElems: false },
{ convertShapeToPath: false }, { convertShapeToPath: false },
{ mergePaths: false }, { mergePaths: false },
{ inlineStyles: { onlyMatchedOnce: false } }, { inlineStyles: { onlyMatchedOnce: false } },
{ removeAttrs: { attrs: '(fill|stroke.*)' } }, { removeAttrs: { attrs: '(fill|stroke.*)' } },
{ removeTitle: true }, { removeTitle: true },
], ];
const optimizeSvg = (svg, options = []) => {
const svgo = new Svgo({
plugins: defaultOptions.concat(options),
}); });
return svgo.optimize(svg) return svgo.optimize(svg)

2
scripts/services/process-svgs.js
View File

@@ -18,7 +18,7 @@ const processSvgs = (svgFiles, srcPath, desPath) => {
const desSvgPath = path.join(desPath, svgFile); const desSvgPath = path.join(desPath, svgFile);
const svg = fs.readFileSync(svgPath); const svg = fs.readFileSync(svgPath);
return optimizeSvg(svg) return optimizeSvg(svg, [ { removeHiddenElems: false } ])
.then((processedSvg) => { .then((processedSvg) => {
fs.writeFileSync(desSvgPath, processedSvg); fs.writeFileSync(desSvgPath, processedSvg);
}); });

36
scripts/services/web-font-process-svgs.js Normal file
View File

@@ -0,0 +1,36 @@
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
const fs = require('fs-extra');
const globby = require('globby');
const path = require('path');
const config = require('../config');
const fileSystemHelper = require('../helpers/fs-helper');
const optimizeSvg = require('./oprimize-svg');
const prepareSVGsForFonts = () => {
const srcPath = path.resolve(config.desPath, '**/svg/*.svg');
const destPath = path.join(config.desPath, '/style/icons/svg');
fileSystemHelper.mkDirByPathSync(destPath);
return globby([srcPath])
.then(foundFiles => {
return Promise.all(foundFiles.map((svgFile) => {
const filesName = path.basename(svgFile);
const desSvgPath = path.join(destPath, filesName);
const svg = fs.readFileSync(svgFile);
return optimizeSvg(svg)
.then((processedSvg) => {
fs.writeFileSync(desSvgPath, processedSvg);
});
}));
});
};
module.exports = prepareSVGsForFonts;

3
test.html
View File

@@ -1,12 +1,15 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<title></title> <title></title>
<link rel="stylesheet" href="package-build/style/eva-icons.css">
<script src="https://unpkg.com/eva-icons"></script> <script src="https://unpkg.com/eva-icons"></script>
<body> <body>
<i data-eva="github"></i> <i data-eva="github"></i>
<i data-eva="github" data-eva-fill="blue" data-eva-hover="true"></i> <i data-eva="github" data-eva-fill="blue" data-eva-hover="true"></i>
<i class="eva eva-5x eva-github"></i>
<script> <script>
eva.replace({ animation: { type: 'pulse', infinite: true, hover: false }, fill: 'red', width: '100px', height: '100px' }) eva.replace({ animation: { type: 'pulse', infinite: true, hover: false }, fill: 'red', width: '100px', height: '100px' })
</script> </script>