From b159087ea60804caf7468ab5ba4861d68af1926d Mon Sep 17 00:00:00 2001 From: codecalm Date: Mon, 7 Sep 2020 12:29:44 +0200 Subject: svgr icons build --- gulpfile.js | 77 +++++++++++++++++++++++++++++++++++++++++++++++++++---------- 1 file changed, 65 insertions(+), 12 deletions(-) (limited to 'gulpfile.js') diff --git a/gulpfile.js b/gulpfile.js index de440fcc..a3a29026 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -11,7 +11,8 @@ const gulp = require('gulp'), template = require('lodash.template'), sass = require('node-sass'), cleanCSS = require('clean-css'), - argv = require('minimist')(process.argv.slice(2)); + argv = require('minimist')(process.argv.slice(2)), + svgr = require('@svgr/core').default; async function asyncForEach(array, callback) { for (let index = 0; index < array.length; index++) { @@ -194,7 +195,7 @@ gulp.task('iconfont-svg-outline', function (cb) { let iconfontUnicode = {}; - if(fs.existsSync('./iconfont-unicode.json')) { + if (fs.existsSync('./iconfont-unicode.json')) { iconfontUnicode = require('./iconfont-unicode'); } @@ -218,7 +219,7 @@ gulp.task('iconfont-svg-outline', function (cb) { fixedWidth: true, color: 'black' }).then(outlined => { - if(unicode) { + if (unicode) { fs.writeFileSync(`icons-outlined/u${unicode.toUpperCase()}-${name}.svg`, outlined); } else { fs.writeFileSync(`icons-outlined/${name}.svg`, outlined); @@ -233,10 +234,10 @@ gulp.task('iconfont-svg-outline', function (cb) { gulp.task('iconfont', function () { let maxUnicode = 59905; - if(fs.existsSync('./iconfont-unicode.json')) { + if (fs.existsSync('./iconfont-unicode.json')) { const iconfontUnicode = require('./iconfont-unicode'); - for(const name in iconfontUnicode) { + for (const name in iconfontUnicode) { const unicode = parseInt(iconfontUnicode[name], 16); maxUnicode = Math.max(maxUnicode, unicode); @@ -258,7 +259,7 @@ gulp.task('iconfont', function () { let glyphsObject = {}; //sort glypht - glyphs = glyphs.sort(function(a, b){ + glyphs = glyphs.sort(function (a, b) { return ('' + a.name).localeCompare(b.name) }); @@ -399,7 +400,7 @@ gulp.task('icons-stroke', gulp.series('build-jekyll', function (cb) { })); gulp.task('optimize', function (cb) { - const addFloats = function(n1, n2) { + const addFloats = function (n1, n2) { return Math.round((parseFloat(n1) + parseFloat(n2)) * 1000) / 1000 }; @@ -418,20 +419,20 @@ gulp.task('optimize', function (cb) { .replace(/([Aa])\s?([0-9.]+)\s([0-9.]+)\s([0-9.]+)\s?([0-1])\s?([0-1])\s?(-?[0-9.]+)\s?(-?[0-9.]+)/gi, '$1$2 $3 $4 $5 $6 $7 $8') .replace(/\n\n+/g, "\n") - .replace(/ { let files = glob.sync("./icons/*.svg"); @@ -541,4 +541,57 @@ gulp.task('svg-to-png', gulp.series('build-jekyll', 'clean-png', async (cb) => { cb(); })); +gulp.task('clean-react', function (cb) { + cp.exec('rm -fd ./icons-react/* && mkdir icons-react/icons-js', function () { + cb(); + }); +}); + +gulp.task('svg-to-react', gulp.series('clean-react', async function (cb) { + let files = glob.sync("./icons/*.svg"); + + const camelize = function (str) { + str = str.replace(/-/g, ' '); + + return str.replace(/(?:^\w|[A-Z]|\b\w)/g, function (word, index) { + return word.toUpperCase(); + }).replace(/\s+/g, ''); + }; + + const componentName = function (file) { + file = path.basename(file, '.svg'); + file = camelize(`Icon ${file}`); + + return file; + }; + + const optimizeSvgCode = function(svgCode) { + return svgCode.replace('', ''); + }; + + let indexCode = '', + indexDCode = `import { FC, SVGAttributes } from 'react';\n\ninterface TablerIconProps extends SVGAttributes { color?: string; size?: string | number; }\n\ntype TablerIcon = FC;\n\n`; + + await asyncForEach(files, async function (file) { + const svgCode = optimizeSvgCode(fs.readFileSync(file).toString()), + fileName = path.basename(file, '.svg') + '.js', + iconComponentName = componentName(file); + + svgr(svgCode, { + icon: false, + svgProps: { width: '{size}', height: '{size}', strokeWidth: '{stroke}', stroke: '{color}' }, + template: require('./.build/svgr-template') + }, { componentName: iconComponentName }).then(jsCode => { + fs.writeFileSync('icons-react/icons-js/' + fileName, jsCode); + indexCode += `export { default as ${iconComponentName} } from './icons-js/${fileName}';\n`; + indexDCode += `export const ${iconComponentName}: TablerIcon;\n`; + }); + + fs.writeFileSync('icons-react/index.js', indexCode); + fs.writeFileSync('icons-react/index.d.js', indexDCode); + }); + + cb(); +})); + gulp.task('build', gulp.series('optimize', 'build-jekyll', 'build-copy', 'icons-sprite', 'icons-preview', 'svg-to-png', 'build-iconfont', 'changelog-image', 'build-zip')); -- cgit v1.2.1 From e0648781073ddb5a8b25d0444162c5ea8017a0a4 Mon Sep 17 00:00:00 2001 From: codecalm Date: Mon, 7 Sep 2020 12:48:25 +0200 Subject: stroke props --- gulpfile.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'gulpfile.js') diff --git a/gulpfile.js b/gulpfile.js index a3a29026..18a63d29 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -570,7 +570,7 @@ gulp.task('svg-to-react', gulp.series('clean-react', async function (cb) { }; let indexCode = '', - indexDCode = `import { FC, SVGAttributes } from 'react';\n\ninterface TablerIconProps extends SVGAttributes { color?: string; size?: string | number; }\n\ntype TablerIcon = FC;\n\n`; + indexDCode = `import { FC, SVGAttributes } from 'react';\n\ninterface TablerIconProps extends SVGAttributes { color?: string; size?: string | number; stroke?: string | number; }\n\ntype TablerIcon = FC;\n\n`; await asyncForEach(files, async function (file) { const svgCode = optimizeSvgCode(fs.readFileSync(file).toString()), -- cgit v1.2.1 From 97b92139c2c6997100840f1ef2dd2e3a7ebaa764 Mon Sep 17 00:00:00 2001 From: codecalm Date: Thu, 17 Sep 2020 21:50:04 +0200 Subject: icons react --- gulpfile.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'gulpfile.js') diff --git a/gulpfile.js b/gulpfile.js index 18a63d29..c0e673b8 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -594,4 +594,4 @@ gulp.task('svg-to-react', gulp.series('clean-react', async function (cb) { cb(); })); -gulp.task('build', gulp.series('optimize', 'build-jekyll', 'build-copy', 'icons-sprite', 'icons-preview', 'svg-to-png', 'build-iconfont', 'changelog-image', 'build-zip')); +gulp.task('build', gulp.series('optimize', 'build-jekyll', 'build-copy', 'icons-sprite', 'icons-react', 'icons-preview', 'svg-to-png', 'build-iconfont', 'changelog-image', 'build-zip')); -- cgit v1.2.1