mirror of
https://github.com/akveo/eva-icons.git
synced 2025-08-31 17:42:11 +02:00
committed by
Dmitry Nehaychik
parent
cc48a6bc81
commit
d907505e06
5905
package-lock.json
generated
5905
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -65,6 +65,7 @@
|
||||
"cross-env": "^5.2.0",
|
||||
"css-loader": "^1.0.0",
|
||||
"fs-extra": "^7.0.0",
|
||||
"globby": "^8.0.1",
|
||||
"gm": "^1.23.1",
|
||||
"html-minifier": "^3.5.20",
|
||||
"jasmine-core": "~2.99.1",
|
||||
|
@@ -9,16 +9,19 @@ const path = require('path');
|
||||
const fs = require('fs-extra');
|
||||
|
||||
const processScss = require('./process-scss');
|
||||
const prepareSVGsForFonts = require('./web-font-process-svgs');
|
||||
const config = require('../config');
|
||||
const fileSystemHelper = require('../helpers/fs-helper');
|
||||
|
||||
const webFontOptions = {
|
||||
files: path.resolve(config.srcPath, '**/*.svg'),
|
||||
files: path.resolve(config.desPath, '**/icons/svg/*.svg'),
|
||||
fontName: 'Eva-Icons',
|
||||
template: 'css',
|
||||
templateFontName: 'Eva-Icons',
|
||||
templateClassName: 'eva',
|
||||
templateFontPath: './fonts'
|
||||
templateFontPath: './fonts',
|
||||
normalize: true,
|
||||
fontHeight: 600,
|
||||
};
|
||||
|
||||
const buildFont = () => {
|
||||
@@ -27,33 +30,37 @@ const buildFont = () => {
|
||||
|
||||
fileSystemHelper.mkDirByPathSync(dest);
|
||||
|
||||
return webfont(webFontOptions)
|
||||
.then((result) => {
|
||||
const { fontName, template } = result.config;
|
||||
return prepareSVGsForFonts()
|
||||
.then(() => {
|
||||
return webfont(webFontOptions)
|
||||
.then((result) => {
|
||||
const { fontName, template } = result.config;
|
||||
|
||||
return Promise.all(
|
||||
Object.keys(result).map(type => {
|
||||
if (
|
||||
type === 'config' ||
|
||||
type === 'usedBuildInTemplate' ||
|
||||
type === 'glyphsData'
|
||||
) {
|
||||
return Promise.resolve();
|
||||
}
|
||||
return Promise.all(
|
||||
Object.keys(result).map(type => {
|
||||
if (
|
||||
type === 'config' ||
|
||||
type === 'usedBuildInTemplate' ||
|
||||
type === 'glyphsData'
|
||||
) {
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
const content = result[type];
|
||||
let file = null;
|
||||
const content = result[type];
|
||||
let file = null;
|
||||
|
||||
if (type !== 'template') {
|
||||
file = path.resolve(dest, `${fontName}.${type}`);
|
||||
} else {
|
||||
file = path.resolve(destTemplate, `${fontName.toLowerCase()}.${template}`);
|
||||
}
|
||||
if (type !== 'template') {
|
||||
file = path.resolve(dest, `${fontName}.${type}`);
|
||||
} else {
|
||||
file = path.resolve(destTemplate, `${fontName.toLowerCase()}.${template}`);
|
||||
}
|
||||
|
||||
return fs.outputFile(file, content);
|
||||
}))
|
||||
.then(() => processScss());
|
||||
});
|
||||
return fs.outputFile(file, content);
|
||||
}))
|
||||
.then(() => processScss())
|
||||
.then(() => fileSystemHelper.remove(path.join(config.desPath, '/style/icons')));
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
module.exports = buildFont;
|
||||
|
@@ -6,16 +6,17 @@
|
||||
|
||||
const Svgo = require('svgo');
|
||||
|
||||
const optimizeSvg = (svg) => {
|
||||
const defaultOptions = [
|
||||
{ convertShapeToPath: false },
|
||||
{ mergePaths: false },
|
||||
{ inlineStyles: { onlyMatchedOnce: false } },
|
||||
{ removeAttrs: { attrs: '(fill|stroke.*)' } },
|
||||
{ removeTitle: true },
|
||||
];
|
||||
|
||||
const optimizeSvg = (svg, options = []) => {
|
||||
const svgo = new Svgo({
|
||||
plugins: [
|
||||
{ removeHiddenElems: false },
|
||||
{ convertShapeToPath: false },
|
||||
{ mergePaths: false },
|
||||
{ inlineStyles: { onlyMatchedOnce: false } },
|
||||
{ removeAttrs: { attrs: '(fill|stroke.*)' } },
|
||||
{ removeTitle: true },
|
||||
],
|
||||
plugins: defaultOptions.concat(options),
|
||||
});
|
||||
|
||||
return svgo.optimize(svg)
|
||||
|
@@ -18,7 +18,7 @@ const processSvgs = (svgFiles, srcPath, desPath) => {
|
||||
const desSvgPath = path.join(desPath, svgFile);
|
||||
const svg = fs.readFileSync(svgPath);
|
||||
|
||||
return optimizeSvg(svg)
|
||||
return optimizeSvg(svg, [ { removeHiddenElems: false } ])
|
||||
.then((processedSvg) => {
|
||||
fs.writeFileSync(desSvgPath, processedSvg);
|
||||
});
|
||||
|
36
scripts/services/web-font-process-svgs.js
Normal file
36
scripts/services/web-font-process-svgs.js
Normal 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;
|
@@ -1,12 +1,15 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<title></title>
|
||||
<link rel="stylesheet" href="package-build/style/eva-icons.css">
|
||||
<script src="https://unpkg.com/eva-icons"></script>
|
||||
<body>
|
||||
|
||||
<i data-eva="github"></i>
|
||||
<i data-eva="github" data-eva-fill="blue" data-eva-hover="true"></i>
|
||||
|
||||
<i class="eva eva-5x eva-github"></i>
|
||||
|
||||
<script>
|
||||
eva.replace({ animation: { type: 'pulse', infinite: true, hover: false }, fill: 'red', width: '100px', height: '100px' })
|
||||
</script>
|
||||
|
Reference in New Issue
Block a user