diff options
| -rw-r--r-- | .github/icons.png | bin | 953644 -> 1121834 bytes | |||
| -rw-r--r-- | gulpfile.js | 663 | ||||
| -rw-r--r-- | package.json | 2 |
3 files changed, 309 insertions, 356 deletions
diff --git a/.github/icons.png b/.github/icons.png Binary files differindex 7a1f6e65..c0f163a0 100644 --- a/.github/icons.png +++ b/.github/icons.png diff --git a/gulpfile.js b/gulpfile.js index 5f501dc8..fddb1d94 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -16,67 +16,67 @@ const gulp = require('gulp'), argv = require('minimist')(process.argv.slice(2)), svgParse = require('parse-svg-path'), svgpath = require('svgpath'), - svgr = require('@svgr/core').default; + svgr = require('@svgr/core').default const compileOptions = { includeIcons: [], strokeWidth: null, fontForge: "fontforge" -}; +} if (fs.existsSync('./compile-options.json')) { try { - const tempOptions = require('./compile-options.json'); + const tempOptions = require('./compile-options.json') if (typeof tempOptions !== "object") { - throw "Compile options file does not contain an json object"; + throw "Compile options file does not contain an json object" } if (typeof tempOptions.includeIcons !== "undefined") { if (!Array.isArray(tempOptions.includeIcons)) { - throw "property inludeIcons is not an array"; + throw "property inludeIcons is not an array" } - compileOptions.includeIcons = tempOptions.includeIcons; + compileOptions.includeIcons = tempOptions.includeIcons } if (typeof tempOptions.includeCategories !== "undefined") { if (typeof tempOptions.includeCategories === "string") { - tempOptions.includeCategories = tempOptions.includeCategories.split(' '); + tempOptions.includeCategories = tempOptions.includeCategories.split(' ') } - if (!Array.isArray(tempOptions.includeCategories)) { - throw "property includeCategories is not an array or string"; + if (!Array.isArray(tempOptions.includeCategories)) { + throw "property includeCategories is not an array or string" } - const tags = Object.entries(require('./tags.json')); - tempOptions.includeCategories.forEach(function (category) { - category = category.charAt(0).toUpperCase() + category.slice(1); + const tags = Object.entries(require('./tags.json')) + tempOptions.includeCategories.forEach(function (category) { + category = category.charAt(0).toUpperCase() + category.slice(1) for (const [icon, data] of tags) { - if (data.category === category && compileOptions.includeIcons.indexOf(icon) === -1) { - compileOptions.includeIcons.push(icon); - } - } - }); + if (data.category === category && compileOptions.includeIcons.indexOf(icon) === -1) { + compileOptions.includeIcons.push(icon) + } + } + }) } if (typeof tempOptions.excludeIcons !== "undefined") { - if (!Array.isArray(tempOptions.excludeIcons)) { - throw "property excludeIcons is not an array"; + if (!Array.isArray(tempOptions.excludeIcons)) { + throw "property excludeIcons is not an array" } - compileOptions.includeIcons = compileOptions.includeIcons.filter(function (icon) { - return tempOptions.excludeIcons.indexOf(icon) === -1; - }); - } + compileOptions.includeIcons = compileOptions.includeIcons.filter(function (icon) { + return tempOptions.excludeIcons.indexOf(icon) === -1 + }) + } if (typeof tempOptions.strokeWidth !== "undefined") { if (typeof tempOptions.strokeWidth !== "string" && typeof tempOptions.strokeWidth !== "number") { - throw "property strokeWidth is not a string or number"; + throw "property strokeWidth is not a string or number" } - compileOptions.strokeWidth = tempOptions.strokeWidth.toString(); + compileOptions.strokeWidth = tempOptions.strokeWidth.toString() } if (typeof tempOptions.fontForge !== "undefined") { if (typeof tempOptions.fontForge !== "string") { - throw "property fontForge is not a string"; + throw "property fontForge is not a string" } - compileOptions.fontForge = tempOptions.fontForge; + compileOptions.fontForge = tempOptions.fontForge } } catch (error) { @@ -85,208 +85,163 @@ if (fs.existsSync('./compile-options.json')) { } -async function asyncForEach(array, callback) { +async function asyncForEach (array, callback) { for (let index = 0; index < array.length; index++) { - await callback(array[index], index, array); + await callback(array[index], index, array) } } const svgToPng = async (filePath, destination) => { - filePath = path.join(__dirname, filePath); - - const htmlFilePath = path.join("file:", filePath); - const browser = await puppeteer.launch(); - const page = await browser.newPage(); - - await page.setViewport({ - height: 24, - width: 24, - deviceScaleFactor: 10 - }); + filePath = path.join(__dirname, filePath) - await page.goto(htmlFilePath); - - await page.screenshot({ - path: path.join(__dirname, destination), - omitBackground: true, - fullPage: true - }); - - await browser.close(); - - return page; -}; + await cp.exec(`rsvg-convert -h 240 ${filePath} > ${destination}`) +} const createScreenshot = async (filePath) => { - try { - filePath = path.join(__dirname, filePath); - - const fileName = filePath.replace('.svg', ''); - const htmlFilePath = path.join("file:", filePath); - const browser = await puppeteer.launch(); - const page = await browser.newPage(); - - await page.setViewport({ - height: 10, - width: 10, - deviceScaleFactor: 2 - }); - - await page.goto(htmlFilePath); - - await page.screenshot({ - path: `${fileName}.png`, - omitBackground: false, - fullPage: true - }); - - await browser.close(); - } catch (error) { - console.error(error); - throw Error(error); - } -}; - + await cp.exec(`rsvg-convert -x 2 -y 2 ${filePath} > ${filePath.replace('.svg', '.png')}`) + await cp.exec(`rsvg-convert -x 4 -y 4 ${filePath} > ${filePath.replace('.svg', '@2x.png')}`) +} const printChangelog = function (newIcons, modifiedIcons, renamedIcons, pretty = false) { if (newIcons.length > 0) { if (pretty) { - console.log(`### ${newIcons.length} new icons:`); + console.log(`### ${newIcons.length} new icons:`) newIcons.forEach(function (icon, i) { - console.log(`- \`${icon}\``); - }); + console.log(`- \`${icon}\``) + }) } else { - let str = ''; - str += `${newIcons.length} new icons: `; + let str = '' + str += `${newIcons.length} new icons: ` newIcons.forEach(function (icon, i) { - str += `\`${icon}\``; + str += `\`${icon}\`` if ((i + 1) <= newIcons.length - 1) { str += ', ' } - }); + }) - console.log(str); + console.log(str) } - console.log(''); + console.log('') } if (modifiedIcons.length > 0) { - let str = ''; - str += `Fixed icons: `; + let str = '' + str += `Fixed icons: ` modifiedIcons.forEach(function (icon, i) { - str += `\`${icon}\``; + str += `\`${icon}\`` if ((i + 1) <= modifiedIcons.length - 1) { str += ', ' } - }); + }) - console.log(str); - console.log(''); + console.log(str) + console.log('') } if (renamedIcons.length > 0) { - console.log(`Renamed icons: `); + console.log(`Renamed icons: `) renamedIcons.forEach(function (icon, i) { - console.log(`- \`${icon[0]}\` renamed to \`${icon[1]}\``); - }); + console.log(`- \`${icon[0]}\` renamed to \`${icon[1]}\``) + }) } -}; +} const generateIconsPreview = function (files, destFile, cb, columnsCount = 19, paddingOuter = 7) { const padding = 20, - iconSize = 24; + iconSize = 24 const iconsCount = files.length, rowsCount = Math.ceil(iconsCount / columnsCount), width = columnsCount * (iconSize + padding) + 2 * paddingOuter - padding, - height = rowsCount * (iconSize + padding) + 2 * paddingOuter - padding; + height = rowsCount * (iconSize + padding) + 2 * paddingOuter - padding let svgContentSymbols = '', svgContentIcons = '', x = paddingOuter, - y = paddingOuter; + y = paddingOuter files.forEach(function (file, i) { - let name = path.basename(file, '.svg'); + let name = path.basename(file, '.svg') let svgFile = fs.readFileSync(file), - svgFileContent = svgFile.toString(); + svgFileContent = svgFile.toString() svgFileContent = svgFileContent .replace('<svg xmlns="http://www.w3.org/2000/svg"', `<symbol id="${name}"`) .replace(' width="24" height="24"', '') .replace('</svg>', '</symbol>') - .replace(/\n\s+/g, ''); + .replace(/\n\s+/g, '') - svgContentSymbols += `\t${svgFileContent}\n`; - svgContentIcons += `\t<use xlink:href="#${name}" x="${x}" y="${y}" width="${iconSize}" height="${iconSize}" />\n`; + svgContentSymbols += `\t${svgFileContent}\n` + svgContentIcons += `\t<use xlink:href="#${name}" x="${x}" y="${y}" width="${iconSize}" height="${iconSize}" />\n` - x += padding + iconSize; + x += padding + iconSize if (i % columnsCount === columnsCount - 1) { - x = paddingOuter; - y += padding + iconSize; + x = paddingOuter + y += padding + iconSize } - }); + }) - const svgContent = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 ${width} ${height}" width="${width}" height="${height}" style="color: #354052"><rect x="0" y="0" width="${width}" height="${height}" fill="#fff"></rect>\n${svgContentSymbols}\n${svgContentIcons}\n</svg>`; + const svgContent = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 ${width} ${height}" width="${width}" height="${height}" style="color: #354052"><rect x="0" y="0" width="${width}" height="${height}" fill="#fff"></rect>\n${svgContentSymbols}\n${svgContentIcons}\n</svg>` - fs.writeFileSync(destFile, svgContent); - createScreenshot(destFile); + fs.writeFileSync(destFile, svgContent) + createScreenshot(destFile) - cb(); -}; + cb() +} //********************************************************************************************* gulp.task('iconfont-prepare', function (cb) { cp.exec('mkdir -p icons-outlined/ && rm -fd ./icons-outlined/* && mkdir -p && rm -fd ./iconfont/*', function () { - cb(); - }); -}); + cb() + }) +}) gulp.task('iconfont-clean', function (cb) { cp.exec('rm -rf ./icons-outlined', function () { - cb(); - }); -}); + cb() + }) +}) gulp.task('iconfont-svg-outline', function (cb) { cp.exec('mkdir -p icons-outlined/ && rm -fd ./icons-outlined/*', async () => { - let files = glob.sync("./icons/*.svg"); + let files = glob.sync("./icons/*.svg") - let iconfontUnicode = {}; + let iconfontUnicode = {} if (fs.existsSync('./.build/iconfont-unicode.json')) { - iconfontUnicode = require('./.build/iconfont-unicode'); + iconfontUnicode = require('./.build/iconfont-unicode') } await asyncForEach(files, async function (file) { - const name = path.basename(file, '.svg'); + const name = path.basename(file, '.svg') - if (compileOptions.includeIcons.length==0 || compileOptions.includeIcons.indexOf(name)>=0) { + if (compileOptions.includeIcons.length === 0 || compileOptions.includeIcons.indexOf(name) >= 0) { - unicode = iconfontUnicode[name]; + unicode = iconfontUnicode[name] - await console.log('Stroke for:', file, unicode); + await console.log('Stroke for:', file, unicode) - let strokedSVG = fs.readFileSync(file).toString(); + let strokedSVG = fs.readFileSync(file).toString() strokedSVG = strokedSVG .replace('width="24"', 'width="1000"') - .replace('height="24"', 'height="1000"'); + .replace('height="24"', 'height="1000"') + if (compileOptions.strokeWidth) { - strokedSVG = strokedSVG.replace('stroke-width="2"', `stroke-width="${compileOptions.strokeWidth}"`); + strokedSVG = strokedSVG.replace('stroke-width="2"', `stroke-width="${compileOptions.strokeWidth}"`) } await outlineStroke(strokedSVG, { @@ -298,52 +253,52 @@ gulp.task('iconfont-svg-outline', function (cb) { color: 'black' }).then(outlined => { if (unicode) { - fs.writeFileSync(`icons-outlined/u${unicode.toUpperCase()}-${name}.svg`, outlined); + fs.writeFileSync(`icons-outlined/u${unicode.toUpperCase()}-${name}.svg`, outlined) } else { - fs.writeFileSync(`icons-outlined/${name}.svg`, outlined); + fs.writeFileSync(`icons-outlined/${name}.svg`, outlined) } - }).catch(error => console.log(error)); + }).catch(error => console.log(error)) } - }); + }) - cb(); - }); -}); + cb() + }) +}) -gulp.task('iconfont-optimize', function() { +gulp.task('iconfont-optimize', function () { return gulp.src('icons-outlined/*') .pipe(svgo()) - .pipe(gulp.dest('icons-outlined')); -}); + .pipe(gulp.dest('icons-outlined')) +}) -gulp.task('iconfont-fix-outline', function(cb) { - var fontForge= compileOptions.fontForge; +gulp.task('iconfont-fix-outline', function (cb) { + var fontForge = compileOptions.fontForge // correct svg outline directions in a child process using fontforge - const generate = cp.spawn(fontForge, ["-lang=py", "-script", "./fix-outline.py"], { stdio: 'inherit' }); + const generate = cp.spawn(fontForge, ["-lang=py", "-script", "./fix-outline.py"], { stdio: 'inherit' }) generate.on("close", function (code) { - console.log(`Correcting svg outline directions exited with code ${code}`); + console.log(`Correcting svg outline directions exited with code ${code}`) if (!code) { - cb(); + cb() } - }); -}); + }) +}) gulp.task('iconfont', function () { - let maxUnicode = 59905; + let maxUnicode = 59905 if (fs.existsSync('./.build/iconfont-unicode.json')) { - const iconfontUnicode = require('./.build/iconfont-unicode'); + const iconfontUnicode = require('./.build/iconfont-unicode') for (const name in iconfontUnicode) { - const unicode = parseInt(iconfontUnicode[name], 16); + const unicode = parseInt(iconfontUnicode[name], 16) - maxUnicode = Math.max(maxUnicode, unicode); + maxUnicode = Math.max(maxUnicode, unicode) } } - maxUnicode = maxUnicode + 1; + maxUnicode = maxUnicode + 1 return gulp.src(['icons-outlined/*.svg']) .pipe(iconfont({ @@ -358,134 +313,134 @@ gulp.task('iconfont', function () { })) .on('glyphs', function (glyphs, options) { //glyphs json - let glyphsObject = {}; + let glyphsObject = {} //sort glypht glyphs = glyphs.sort(function (a, b) { return ('' + a.name).localeCompare(b.name) - }); + }) glyphs.forEach(function (glyph) { - glyphsObject[glyph.name] = glyph.unicode[0].codePointAt(0).toString(16); - }); + glyphsObject[glyph.name] = glyph.unicode[0].codePointAt(0).toString(16) + }) - fs.writeFileSync(`./.build/iconfont-unicode.json`, JSON.stringify(glyphsObject)); + fs.writeFileSync(`./.build/iconfont-unicode.json`, JSON.stringify(glyphsObject)) //css - options['glyphs'] = glyphs; - options['v'] = p.version; + options['glyphs'] = glyphs + options['v'] = p.version - const compiled = template(fs.readFileSync('.build/iconfont.scss').toString()); - const result = compiled(options); + const compiled = template(fs.readFileSync('.build/iconfont.scss').toString()) + const result = compiled(options) - fs.writeFileSync('iconfont/tabler-icons.scss', result); + fs.writeFileSync('iconfont/tabler-icons.scss', result) //html - const compiledHtml = template(fs.readFileSync('.build/iconfont.html').toString()); - const resultHtml = compiledHtml(options); + const compiledHtml = template(fs.readFileSync('.build/iconfont.html').toString()) + const resultHtml = compiledHtml(options) - fs.writeFileSync('iconfont/tabler-icons.html', resultHtml); + fs.writeFileSync('iconfont/tabler-icons.html', resultHtml) }) - .pipe(gulp.dest('iconfont/fonts')); -}); + .pipe(gulp.dest('iconfont/fonts')) +}) gulp.task('iconfont-css', function (cb) { sass.render({ file: 'iconfont/tabler-icons.scss', outputStyle: 'expanded' }, function (err, result) { - fs.writeFileSync('iconfont/tabler-icons.css', result.css); + fs.writeFileSync('iconfont/tabler-icons.css', result.css) - const cleanOutput = new cleanCSS({}).minify(result.css); - fs.writeFileSync('iconfont/tabler-icons.min.css', cleanOutput.styles); + const cleanOutput = new cleanCSS({}).minify(result.css) + fs.writeFileSync('iconfont/tabler-icons.min.css', cleanOutput.styles) - cb(); - }); -}); + cb() + }) +}) -gulp.task('update-tags-unicode', function(cb) { +gulp.task('update-tags-unicode', function (cb) { let tags = require('./tags.json'), - unicodes = require('./.build/iconfont-unicode.json'); + unicodes = require('./.build/iconfont-unicode.json') - for(let i in tags) { + for (let i in tags) { tags[i] = { ...tags[i], unicode: unicodes[i], } } - console.log('tags', tags); + console.log('tags', tags) - fs.writeFileSync(`tags.json`, JSON.stringify(tags, null, 2)); + fs.writeFileSync(`tags.json`, JSON.stringify(tags, null, 2)) - cb(); -}); + cb() +}) -gulp.task('build-iconfont', gulp.series('iconfont-prepare', 'iconfont-svg-outline', 'iconfont-fix-outline', 'iconfont-optimize', 'iconfont', 'iconfont-css', 'iconfont-clean', 'update-tags-unicode')); +gulp.task('build-iconfont', gulp.series('iconfont-prepare', 'iconfont-svg-outline', 'iconfont-fix-outline', 'iconfont-optimize', 'iconfont', 'iconfont-css', 'iconfont-clean', 'update-tags-unicode')) gulp.task('build-zip', function () { - const version = p.version; + const version = p.version return gulp.src('{icons/**/*,icons-png/**/*,icons-react/**/*,iconfont/**/*,tabler-sprite.svg,tabler-sprite-nostroke.svg}') .pipe(zip(`tabler-icons-${version}.zip`)) .pipe(gulp.dest('packages')) -}); +}) gulp.task('build-jekyll', function (cb) { - const jekyll = cp.spawn("bundle", ["exec", "jekyll", "build"], { stdio: 'inherit' }); + const jekyll = cp.spawn("bundle", ["exec", "jekyll", "build"], { stdio: 'inherit' }) jekyll.on("close", function (code) { - console.log(`Jekyll build exited with code ${code}`); + console.log(`Jekyll build exited with code ${code}`) if (!code) { - cb(); + cb() } - }); -}); + }) +}) gulp.task('build-copy', function (cb) { cp.exec('mkdir -p icons/ && rm -fd ./icons/* && cp ./_site/icons/* ./icons && cp ./_site/tags.json .', function () { - cb(); - }); -}); + cb() + }) +}) gulp.task('clean-png', function (cb) { cp.exec('rm -fd ./icons-png/*', function () { - cb(); - }); -}); + cb() + }) +}) gulp.task('icons-sprite', function (cb) { glob("_site/icons/*.svg", {}, function (er, files) { - let svgContent = ''; + let svgContent = '' files.forEach(function (file, i) { let name = path.basename(file, '.svg'), svgFile = fs.readFileSync(file), - svgFileContent = svgFile.toString(); + svgFileContent = svgFile.toString() svgFileContent = svgFileContent .replace(/<svg[^>]+>/g, '') .replace(/<\/svg>/g, '') .replace(/\n+/g, '') .replace(/>\s+</g, '><') - .trim(); + .trim() svgContent += `<symbol id="tabler-${name}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${svgFileContent}</symbol>` - }); + }) - let svg = `<svg xmlns="http://www.w3.org/2000/svg"><defs>${svgContent}</defs></svg>`; + let svg = `<svg xmlns="http://www.w3.org/2000/svg"><defs>${svgContent}</defs></svg>` - fs.writeFileSync('tabler-sprite.svg', svg); - fs.writeFileSync('tabler-sprite-nostroke.svg', svg.replace(/stroke-width="2"\s/g, '')); - cb(); - }); -}); + fs.writeFileSync('tabler-sprite.svg', svg) + fs.writeFileSync('tabler-sprite-nostroke.svg', svg.replace(/stroke-width="2"\s/g, '')) + cb() + }) +}) gulp.task('icons-preview', function (cb) { glob("icons/*.svg", {}, function (er, files) { - generateIconsPreview(files, '.github/icons.svg', cb); - }); -}); + generateIconsPreview(files, '.github/icons.svg', cb) + }) +}) gulp.task('icons-stroke', gulp.series('build-jekyll', function (cb) { @@ -496,11 +451,11 @@ gulp.task('icons-stroke', gulp.series('build-jekyll', function (cb) { paddingOuter = 3, iconSize = 32, width = 914, - height = iconSize + paddingOuter * 2; + height = iconSize + paddingOuter * 2 let svgContentSymbols = '', svgContentIcons = '', - x = paddingOuter; + x = paddingOuter strokes.forEach(function (stroke) { let svgFileContentStroked = svgFileContent @@ -508,42 +463,42 @@ gulp.task('icons-stroke', gulp.series('build-jekyll', function (cb) { .replace(' width="24" height="24"', '') .replace(' stroke-width="2"', ` stroke-width="${stroke}"`) .replace('</svg>', '</symbol>') - .replace(/\n\s+/g, ''); + .replace(/\n\s+/g, '') - svgContentSymbols += `\t${svgFileContentStroked}\n`; - svgContentIcons += `\t<use xlink:href="#icon-${stroke}" x="${x}" y="${paddingOuter}" width="${iconSize}" height="${iconSize}" />\n`; + svgContentSymbols += `\t${svgFileContentStroked}\n` + svgContentIcons += `\t<use xlink:href="#icon-${stroke}" x="${x}" y="${paddingOuter}" width="${iconSize}" height="${iconSize}" />\n` - x += padding + iconSize; - }); + x += padding + iconSize + }) - const svgContent = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 ${width} ${height}" width="${width}" height="${height}" style="color: #354052"><rect x="0" y="0" width="${width}" height="${height}" fill="#fff"></rect>\n${svgContentSymbols}\n${svgContentIcons}\n</svg>`; + const svgContent = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 ${width} ${height}" width="${width}" height="${height}" style="color: #354052"><rect x="0" y="0" width="${width}" height="${height}" fill="#fff"></rect>\n${svgContentSymbols}\n${svgContentIcons}\n</svg>` - fs.writeFileSync('.github/icons-stroke.svg', svgContent); - createScreenshot('.github/icons-stroke.svg'); - cb(); -})); + fs.writeFileSync('.github/icons-stroke.svg', svgContent) + createScreenshot('.github/icons-stroke.svg') + cb() +})) gulp.task('optimize', function (cb) { const addFloats = function (n1, n2) { return Math.round((parseFloat(n1) + parseFloat(n2)) * 1000) / 1000 - }; + } - const optimizePath = function(path) { + const optimizePath = function (path) { let transformed = svgpath(path) .rel() .round(3) - .toString(); + .toString() - return svgParse(transformed).map(function(a){ - return a.join(' '); - }).join(' '); - }; + return svgParse(transformed).map(function (a) { + return a.join(' ') + }).join(' ') + } glob("src/_icons/*.svg", {}, function (er, files) { files.forEach(function (file, i) { let svgFile = fs.readFileSync(file), - svgFileContent = svgFile.toString(); + svgFileContent = svgFile.toString() svgFileContent = svgFileContent .replace(/><\/(polyline|line|rect|circle|path)>/g, '/>') @@ -551,275 +506,273 @@ gulp.task('optimize', function (cb) { .replace(/\s?\/>/g, ' />') .replace(/\n\s*<(line|circle|path|polyline|rect)/g, "\n <$1") .replace(/polyline points="([0-9.]+)\s([0-9.]+)\s([0-9.]+)\s([0-9.]+)"/g, 'line x1="$1" y1="$2" x2="$3" y2="$4"') - .replace(/<path d="([^"]+)"/g, function(f, r1) { - r1 = optimizePath(r1); + .replace(/<path d="([^"]+)"/g, function (f, r1) { + r1 = optimizePath(r1) - return `<path d="${r1}"`; + return `<path d="${r1}"` }) .replace(/d="m/g, 'd="M') .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(/<path d="M([0-9.]*) ([0-9.]*)l\s?([-0-9.]*) ([-0-9.]*)"/g, function (f, r1, r2, r3, r4) { - return `<line x1="${r1}" y1="${r2}" x2="${addFloats(r1, r3)}" y2="${addFloats(r2, r4)}"`; + return `<line x1="${r1}" y1="${r2}" x2="${addFloats(r1, r3)}" y2="${addFloats(r2, r4)}"` }) .replace(/<path d="M([0-9.]*) ([0-9.]*)v\s?([-0-9.]*)"/g, function (f, r1, r2, r3) { - return `<line x1="${r1}" y1="${r2}" x2="${r1}" y2="${addFloats(r2, r3)}"`; + return `<line x1="${r1}" y1="${r2}" x2="${r1}" y2="${addFloats(r2, r3)}"` }) .replace(/<path d="M([0-9.]*) ([0-9.]*)h\s?([-0-9.]*)"/g, function (f, r1, r2, r3) { - return `<line x1="${r1}" y1="${r2}" x2="${addFloats(r1, r3)}" y2="${r2}"`; + return `<line x1="${r1}" y1="${r2}" x2="${addFloats(r1, r3)}" y2="${r2}"` }) .replace(/<path d="([^"]+)"/g, function (f, r1) { r1 = r1 .replace(/ -0\./g, " -.") .replace(/ 0\./g, " .") .replace(/\s([a-z])/gi, "$1") - .replace(/([a-z])\s/gi, "$1"); - return `<path d="${r1}"`; + .replace(/([a-z])\s/gi, "$1") + return `<path d="${r1}"` }) - ; if (svgFile.toString() !== svgFileContent) { - fs.writeFileSync(file, svgFileContent); + fs.writeFileSync(file, svgFileContent) } - }); - - cb(); - }); -}); + }) + cb() + }) +}) gulp.task('changelog-commit', function (cb) { cp.exec('git status', function (err, ret) { - let newIcons = [], modifiedIcons = [], renamedIcons = []; + let newIcons = [], modifiedIcons = [], renamedIcons = [] ret.replace(/new file:\s+src\/_icons\/([a-z0-9-]+)\.svg/g, function (m, fileName) { - newIcons.push(fileName); - }); + newIcons.push(fileName) + }) ret.replace(/modified:\s+src\/_icons\/([a-z0-9-]+)\.svg/g, function (m, fileName) { - modifiedIcons.push(fileName); - }); + modifiedIcons.push(fileName) + }) ret.replace(/renamed:\s+src\/_icons\/([a-z0-9-]+).svg -> src\/_icons\/([a-z0-9-]+).svg/g, function (m, fileNameBefore, fileNameAfter) { - renamedIcons.push([fileNameBefore, fileNameAfter]); - }); + renamedIcons.push([fileNameBefore, fileNameAfter]) + }) modifiedIcons = modifiedIcons.filter(function (el) { - return newIcons.indexOf(el) < 0; - }); + return newIcons.indexOf(el) < 0 + }) - printChangelog(newIcons, modifiedIcons, renamedIcons); + printChangelog(newIcons, modifiedIcons, renamedIcons) - cb(); - }); -}); + cb() + }) +}) gulp.task('changelog', function (cb) { - const version = argv['latest-tag'] || `v${p.version}`; + const version = argv['latest-tag'] || `v${p.version}` if (version) { cp.exec(`git diff ${version} HEAD --name-status`, function (err, ret) { - let newIcons = [], modifiedIcons = [], renamedIcons = []; + let newIcons = [], modifiedIcons = [], renamedIcons = [] ret.replace(/A\s+src\/_icons\/([a-z0-9-]+)\.svg/g, function (m, fileName) { - newIcons.push(fileName); - }); + newIcons.push(fileName) + }) ret.replace(/M\s+src\/_icons\/([a-z0-9-]+)\.svg/g, function (m, fileName) { - modifiedIcons.push(fileName); - }); + modifiedIcons.push(fileName) + }) ret.replace(/R[0-9]+\s+src\/_icons\/([a-z0-9-]+)\.svg\s+src\/_icons\/([a-z0-9-]+).svg/g, function (m, fileNameBefore, fileNameAfter) { - renamedIcons.push([fileNameBefore, fileNameAfter]); - }); + renamedIcons.push([fileNameBefore, fileNameAfter]) + }) modifiedIcons = modifiedIcons.filter(function (el) { - return newIcons.indexOf(el) < 0; - }); + return newIcons.indexOf(el) < 0 + }) - printChangelog(newIcons, modifiedIcons, renamedIcons, true); + printChangelog(newIcons, modifiedIcons, renamedIcons, true) - cb(); - }); + cb() + }) } -}); +}) gulp.task('changelog-image', function (cb) { const version = argv['latest-version'] || `${p.version}`, - newVersion = argv['new-version'] || `${p.version}`; + newVersion = argv['new-version'] || `${p.version}` if (version) { cp.exec(`git diff v${version} HEAD --name-status`, function (err, ret) { - let newIcons = []; + let newIcons = [] ret.replace(/[A]\s+src\/_icons\/([a-z0-9-]+)\.svg/g, function (m, fileName) { - newIcons.push(fileName); - }); + newIcons.push(fileName) + }) newIcons = newIcons.map(function (icon) { - return `./icons/${icon}.svg`; - }); + return `./icons/${icon}.svg` + }) if (newIcons.length > 0) { - generateIconsPreview(newIcons, `.github/tabler-icons-${newVersion}.svg`, cb, 6, 24); + generateIconsPreview(newIcons, `.github/tabler-icons-${newVersion}.svg`, cb, 6, 24) } else { - cb(); + cb() } - }); + }) } else { - cb(); + cb() } -}); +}) gulp.task('svg-to-png', gulp.series('build-jekyll', 'clean-png', async (cb) => { - let files = glob.sync("./icons/*.svg"); + let files = glob.sync("./icons/*.svg") await asyncForEach(files, async function (file, i) { - let name = path.basename(file, '.svg'); + let name = path.basename(file, '.svg') - console.log('name', name); + console.log('name', name) - await svgToPng(file, `icons-png/${name}.png`); - }); + await svgToPng(file, `icons-png/${name}.png`) + }) - cb(); -})); + cb() +})) gulp.task('clean-react', function (cb) { cp.exec('rm -fd ./icons-react/* && mkdir icons-react/icons-js', function () { - cb(); - }); -}); + cb() + }) +}) gulp.task('svg-to-react', gulp.series('clean-react', async function (cb) { - let files = glob.sync("./icons/*.svg"); + let files = glob.sync("./icons/*.svg") const camelize = function (str) { - str = str.replace(/-/g, ' '); + str = str.replace(/-/g, ' ') return str.replace(/(?:^\w|[A-Z]|\b\w)/g, function (word, index) { - return word.toUpperCase(); - }).replace(/\s+/g, ''); - }; + return word.toUpperCase() + }).replace(/\s+/g, '') + } const componentName = function (file) { - file = path.basename(file, '.svg'); - file = camelize(`Icon ${file}`); + file = path.basename(file, '.svg') + file = camelize(`Icon ${file}`) - return file; - }; + return file + } - const optimizeSvgCode = function(svgCode) { - return svgCode.replace('<path stroke="none" d="M0 0h24v24H0z"/>', ''); - }; + const optimizeSvgCode = function (svgCode) { + return svgCode.replace('<path stroke="none" d="M0 0h24v24H0z"/>', '') + } let indexCode = '', - indexDCode = `import { FC, SVGAttributes } from 'react';\n\ninterface TablerIconProps extends SVGAttributes<SVGElement> { color?: string; size?: string | number; stroke?: string | number; }\n\ntype TablerIcon = FC<TablerIconProps>;\n\n`; + indexDCode = `import { FC, SVGAttributes } from 'react';\n\ninterface TablerIconProps extends SVGAttributes<SVGElement> { color?: string; size?: string | number; stroke?: string | number; }\n\ntype TablerIcon = FC<TablerIconProps>;\n\n` await asyncForEach(files, async function (file) { const svgCode = optimizeSvgCode(fs.readFileSync(file).toString()), fileName = path.basename(file, '.svg') + '.js', - iconComponentName = componentName(file); + iconComponentName = componentName(file) await 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/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.ts', indexDCode); - }); + fs.writeFileSync('icons-react/index.js', indexCode) + fs.writeFileSync('icons-react/index.d.ts', indexDCode) + }) - cb(); -})); + cb() +})) -const setVersions = function(version, files) { - for(const i in files) { - const file = files[i]; +const setVersions = function (version, files) { + for (const i in files) { + const file = files[i] if (fs.existsSync(`src/_icons/${file}.svg`)) { - let svgFile = fs.readFileSync(`src/_icons/${file}.svg`).toString(); + let svgFile = fs.readFileSync(`src/_icons/${file}.svg`).toString() - if(!svgFile.match(/version: ([0-9.]+)/i)) { - svgFile = svgFile.replace(/---\n<svg>/i, function(m){ - return `version: "${version}"\n${m}`; - }); + if (!svgFile.match(/version: ([0-9.]+)/i)) { + svgFile = svgFile.replace(/---\n<svg>/i, function (m) { + return `version: "${version}"\n${m}` + }) - fs.writeFileSync(`src/_icons/${file}.svg`, svgFile); + fs.writeFileSync(`src/_icons/${file}.svg`, svgFile) } else { - console.log(`File ${file} already has version`); + console.log(`File ${file} already has version`) } } else { - console.log(`File ${file} doesn't exists`); + console.log(`File ${file} doesn't exists`) } } -}; +} gulp.task('update-icons-version', function (cb) { const version = argv['latest-version'] || `${p.version}`, - newVersion = argv['new-version'] || `${p.version}`; + newVersion = argv['new-version'] || `${p.version}` if (version) { cp.exec(`git diff v${version} HEAD --name-status`, function (err, ret) { - let newIcons = []; + let newIcons = [] ret.replace(/[A]\s+src\/_icons\/([a-z0-9-]+)\.svg/g, function (m, fileName) { - newIcons.push(fileName); - }); + newIcons.push(fileName) + }) - if(newIcons.length) { - setVersions(newVersion.replace(/\.0$/, ''), newIcons); + if (newIcons.length) { + setVersions(newVersion.replace(/\.0$/, ''), newIcons) } - }); + }) } - cb(); -}); + cb() +}) -gulp.task('import-tags', function(cb) { +gulp.task('import-tags', function (cb) { fs.createReadStream('./_import.csv') .pipe(csv({ headers: false, separator: "\t" })) .on('data', (row) => { - console.log(row[0], row[1]); + console.log(row[0], row[1]) - const filename = `src/_icons/${row[0]}.svg`; + const filename = `src/_icons/${row[0]}.svg` - let data = fs.readFileSync(filename).toString(); - data = data.replace(/(---[\s\S]+?---)/, function(m, headerContent){ + let data = fs.readFileSync(filename).toString() + data = data.replace(/(---[\s\S]+?---)/, function (m, headerContent) { - headerContent = headerContent.replace(/tags: .*\n/, ''); - headerContent = headerContent.replace(/---/, `---\ntags: [${row[1]}]`); + headerContent = headerContent.replace(/tags: .*\n/, '') + headerContent = headerContent.replace(/---/, `---\ntags: [${row[1]}]`) - return headerContent; - }); + return headerContent + }) - fs.writeFileSync(filename, data); + fs.writeFileSync(filename, data) }) .on('end', () => { - console.log('CSV file successfully processed'); - }); - cb(); -}); + console.log('CSV file successfully processed') + }) + cb() +}) gulp.task("build-react", function (cb) { cp.exec("npm run build-react", function () { - cb(); - }); -}); + cb() + }) +}) -gulp.task('build', gulp.series('optimize', 'update-icons-version', 'build-jekyll', 'build-copy', 'icons-sprite', 'svg-to-react', 'build-react', 'icons-preview', 'svg-to-png', 'build-iconfont', 'changelog-image', 'build-zip')); +gulp.task('build', gulp.series('optimize', 'update-icons-version', 'build-jekyll', 'build-copy', 'icons-sprite', 'svg-to-react', 'build-react', 'icons-preview', 'svg-to-png', 'build-iconfont', 'changelog-image', 'build-zip')) diff --git a/package.json b/package.json index c5c26c60..b4c538e6 100644 --- a/package.json +++ b/package.json @@ -77,7 +77,7 @@ "gulp-zip": "5.0.2", "lodash.template": "4.5.0", "minimist": "1.2.5", - "node-sass": "4.14.1", + "node-sass": "7.0.1", "parse-svg-path": "^0.1.2", "puppeteer": "5.3.0", "release-it": "14.12.5", |
