const gulp = require('gulp'), cp = require('child_process'), glob = require('glob'), fs = require('fs'), path = require('path'), p = require('./package.json'), csv = require('csv-parser'), zip = require('gulp-zip'), svgo = require('gulp-svgo'), outlineStroke = require('svg-outline-stroke'), iconfont = require('gulp-iconfont'), template = require('lodash.template'), sass = require('node-sass'), cleanCSS = require('clean-css'), argv = require('minimist')(process.argv.slice(2)), svgParse = require('parse-svg-path'), svgpath = require('svgpath'), 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') if (typeof tempOptions !== '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' } compileOptions.includeIcons = tempOptions.includeIcons } if (typeof tempOptions.includeCategories !== 'undefined') { if (typeof tempOptions.includeCategories === 'string') { tempOptions.includeCategories = tempOptions.includeCategories.split(' ') } 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) for (const [icon, data] of tags) { 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' } compileOptions.includeIcons = compileOptions.includeIcons.filter(function(icon) { return tempOptions.excludeIcons.indexOf(icon) === -1 }) } if (typeof tempOptions.excludeOffIcons !== 'undefined' && tempOptions.excludeOffIcons) { // Exclude `*-off` icons compileOptions.includeIcons = compileOptions.includeIcons.filter(function(icon) { return !icon.endsWith('-off') }) } if (typeof tempOptions.strokeWidth !== 'undefined') { if (typeof tempOptions.strokeWidth !== 'string' && typeof tempOptions.strokeWidth !== 'number') { throw 'property strokeWidth is not a string or number' } compileOptions.strokeWidth = tempOptions.strokeWidth.toString() } if (typeof tempOptions.fontForge !== 'undefined') { if (typeof tempOptions.fontForge !== 'string') { throw 'property fontForge is not a string' } compileOptions.fontForge = tempOptions.fontForge } } catch (error) { throw `Error reading compile-options.json: ${error}` } } async function asyncForEach(array, callback) { for (let index = 0; index < array.length; index++) { await callback(array[index], index, array) } } const svgToPng = async (filePath, destination) => { filePath = path.join(__dirname, filePath) await cp.exec(`rsvg-convert -h 240 ${filePath} > ${destination}`) } const createScreenshot = async (filePath) => { 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:`) newIcons.forEach(function(icon, i) { console.log(`- \`${icon}\``) }) } else { let str = '' str += `${newIcons.length} new icons: ` newIcons.forEach(function(icon, i) { str += `\`${icon}\`` if ((i + 1) <= newIcons.length - 1) { str += ', ' } }) console.log(str) } console.log('') } if (modifiedIcons.length > 0) { let str = '' str += `Fixed icons: ` modifiedIcons.forEach(function(icon, i) { str += `\`${icon}\`` if ((i + 1) <= modifiedIcons.length - 1) { str += ', ' } }) console.log(str) console.log('') } if (renamedIcons.length > 0) { console.log(`Renamed icons: `) renamedIcons.forEach(function(icon, i) { console.log(`- \`${icon[0]}\` renamed to \`${icon[1]}\``) }) } } const generateIconsPreview = function(files, destFile, cb, columnsCount = 19, paddingOuter = 7) { const padding = 20, 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 let svgContentSymbols = '', svgContentIcons = '', x = paddingOuter, y = paddingOuter files.forEach(function(file, i) { let name = path.basename(file, '.svg') let svgFile = fs.readFileSync(file), svgFileContent = svgFile.toString() svgFileContent = svgFileContent.replace('', ''). replace(/\n\s+/g, '') svgContentSymbols += `\t${svgFileContent}\n` svgContentIcons += `\t\n` x += padding + iconSize if (i % columnsCount === columnsCount - 1) { x = paddingOuter y += padding + iconSize } }) const svgContent = `\n${svgContentSymbols}\n${svgContentIcons}\n` fs.writeFileSync(destFile, svgContent) createScreenshot(destFile) cb() } //********************************************************************************************* gulp.task('iconfont-prepare', function(cb) { cp.exec('mkdir -p icons-outlined/ && rm -fd ./icons-outlined/* && mkdir -p && rm -fd ./iconfont/*', function() { cb() }) }) gulp.task('iconfont-clean', function(cb) { cp.exec('rm -rf ./icons-outlined', function() { 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') const iconfontUnicode = require('./tags.json') await asyncForEach(files, async function(file) { const name = path.basename(file, '.svg') if (compileOptions.includeIcons.length === 0 || compileOptions.includeIcons.indexOf(name) >= 0) { const unicode = iconfontUnicode[name].unicode await console.log('Stroke for:', file, unicode) let strokedSVG = fs.readFileSync(file).toString() strokedSVG = strokedSVG.replace('width="24"', 'width="1000"').replace('height="24"', 'height="1000"') if (compileOptions.strokeWidth) { strokedSVG = strokedSVG.replace('stroke-width="2"', `stroke-width="${compileOptions.strokeWidth}"`) } await outlineStroke(strokedSVG, { optCurve: false, steps: 4, round: 0, centerHorizontally: true, fixedWidth: true, color: 'black' }).then(outlined => { if (unicode) { fs.writeFileSync(`icons-outlined/u${unicode.toUpperCase()}-${name}.svg`, outlined) } else { fs.writeFileSync(`icons-outlined/${name}.svg`, outlined) } }).catch(error => console.log(error)) } }) cb() }) }) gulp.task('iconfont-optimize', function() { return gulp.src('icons-outlined/*').pipe(svgo()).pipe(gulp.dest('icons-outlined')) }) 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' }) generate.on('close', function(code) { console.log(`Correcting svg outline directions exited with code ${code}`) if (!code) { cb() } }) }) gulp.task('iconfont', function() { return gulp.src(['icons-outlined/*.svg']).pipe(iconfont({ fontName: 'tabler-icons', prependUnicode: true, formats: ['ttf', 'eot', 'woff', 'woff2', 'svg'], normalize: true, fontHeight: 1000, descent: 100, ascent: 986.5 })).on('glyphs', function(glyphs, options) { //sort glypht glyphs = glyphs.sort(function(a, b) { return ('' + a.name).localeCompare(b.name) }) //css options['glyphs'] = glyphs options['v'] = p.version const compiled = template(fs.readFileSync('.build/iconfont.scss').toString()) const result = compiled(options) fs.writeFileSync('iconfont/tabler-icons.scss', result) //html const compiledHtml = template(fs.readFileSync('.build/iconfont.html').toString()) const resultHtml = compiledHtml(options) fs.writeFileSync('iconfont/tabler-icons.html', resultHtml) }).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) const cleanOutput = new cleanCSS({}).minify(result.css) fs.writeFileSync('iconfont/tabler-icons.min.css', cleanOutput.styles) cb() }) }) const getMaxUnicode = () => { const path = 'src/_icons/*.svg' const files = glob.sync(path) let maxUnicode = 0 files.forEach(function(file) { const svgFile = fs.readFileSync(file).toString() svgFile.replace(/unicode: "([a-f0-9.]+)"/i, function(m, unicode) { const newUnicode = parseInt(unicode, 16) if (newUnicode) { maxUnicode = Math.max(maxUnicode, newUnicode) } }) }) return maxUnicode } gulp.task('update-icons-unicode', (cb) => { let maxUnicode = getMaxUnicode() glob('./src/_icons/*.svg', {}, function(er, files) { for (const i in files) { const file = files[i] let svgFile = fs.readFileSync(file).toString() if (!svgFile.match(/\nunicode: "?([a-f0-9.]+)"?/i)) { maxUnicode++ const unicode = maxUnicode.toString(16) if (unicode) { svgFile = svgFile.replace(/---\n/i, function(m) { return `unicode: "${unicode}"\n${m}` }) console.log(`Add unicode "${unicode}" to "${file}"`); fs.writeFileSync(file, svgFile) } } else { console.log(`File ${file} already has unicode`) } } cb() }) }) gulp.task('build-iconfont', gulp.series('iconfont-prepare', 'iconfont-svg-outline', 'iconfont-fix-outline', 'iconfont-optimize', 'iconfont', 'iconfont-css', 'iconfont-clean')) gulp.task('build-zip', function() { 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-zip')) }) gulp.task('build-jekyll', function(cb) { const jekyll = cp.spawn('bundle', ['exec', 'jekyll', 'build'], { stdio: 'inherit' }) jekyll.on('close', function(code) { console.log(`Jekyll build exited with code ${code}`) if (!code) { 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() }) }) gulp.task('clean-png', function(cb) { cp.exec('rm -fd ./icons-png/*', function() { cb() }) }) gulp.task('icons-sprite', function(cb) { glob('_site/icons/*.svg', {}, function(er, files) { let svgContent = '' files.forEach(function(file, i) { let name = path.basename(file, '.svg'), svgFile = fs.readFileSync(file), svgFileContent = svgFile.toString() svgFileContent = svgFileContent.replace(/]+>/g, '').replace(/<\/svg>/g, '').replace(/\n+/g, '').replace(/>\s+<').trim() svgContent += `${svgFileContent}` }) let svg = `${svgContent}` 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) }) }) gulp.task('icons-stroke', gulp.series('build-jekyll', function(cb) { const icon = 'disabled', strokes = ['.5', '1', '1.5', '2', '2.75'], svgFileContent = fs.readFileSync(`icons/${icon}.svg`).toString(), padding = 16, paddingOuter = 3, iconSize = 32, width = 914, height = iconSize + paddingOuter * 2 let svgContentSymbols = '', svgContentIcons = '', x = paddingOuter strokes.forEach(function(stroke) { let svgFileContentStroked = svgFileContent.replace('', ''). replace(/\n\s+/g, '') svgContentSymbols += `\t${svgFileContentStroked}\n` svgContentIcons += `\t\n` x += padding + iconSize }) const svgContent = `\n${svgContentSymbols}\n${svgContentIcons}\n` 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) { let transformed = svgpath(path).rel().round(3).toString() 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 = svgFileContent.replace(/><\/(polyline|line|rect|circle|path)>/g, '/>'). replace(/rx="([^"]+)"\s+ry="\1"/g, 'rx="$1"'). replace(/]+)?\/>/g, ''). 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(/ src\/_icons\/([a-z0-9-]+).svg/g, function(m, fileNameBefore, fileNameAfter) { renamedIcons.push([fileNameBefore, fileNameAfter]) }) modifiedIcons = modifiedIcons.filter(function(el) { return newIcons.indexOf(el) < 0 }) printChangelog(newIcons, modifiedIcons, renamedIcons) cb() }) }) gulp.task('changelog', function(cb) { 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 = [] ret.replace(/A\s+src\/_icons\/([a-z0-9-]+)\.svg/g, function(m, fileName) { newIcons.push(fileName) }) ret.replace(/M\s+src\/_icons\/([a-z0-9-]+)\.svg/g, function(m, 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]) }) modifiedIcons = modifiedIcons.filter(function(el) { return newIcons.indexOf(el) < 0 }) printChangelog(newIcons, modifiedIcons, renamedIcons, true) cb() }) } }) gulp.task('changelog-image', function(cb) { const version = argv['latest-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 = [] ret.replace(/[A]\s+src\/_icons\/([a-z0-9-]+)\.svg/g, function(m, fileName) { newIcons.push(fileName) }) newIcons = newIcons.map(function(icon) { return `./icons/${icon}.svg` }) if (newIcons.length > 0) { generateIconsPreview(newIcons, `.github/tabler-icons-${newVersion}.svg`, cb, 6, 24) } else { cb() } }) } else { cb() } }) gulp.task('svg-to-png', gulp.series('clean-png', async (cb) => { let files = glob.sync('./icons/*.svg') await asyncForEach(files, async function(file, i) { let name = path.basename(file, '.svg') console.log('name', name) await svgToPng(file, `icons-png/${name}.png`) }) 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; stroke?: 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) 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/index.js', indexCode) fs.writeFileSync('icons-react/index.d.ts', indexDCode) }) cb() })) 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() if (!svgFile.match(/version: ([0-9.]+)/i)) { svgFile = svgFile.replace(/---\n/i, function(m) { return `version: "${version}"\n${m}` }) fs.writeFileSync(`src/_icons/${file}.svg`, svgFile) } else { console.log(`File ${file} already has version`) } } else { 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}` if (version) { cp.exec(`grep -RiL "version: " ./src/_icons/*.svg`, function(err, ret) { let newIcons = [] ret.replace(/src\/_icons\/([a-z0-9-]+)\.svg/g, function(m, fileName) { newIcons.push(fileName) }) if (newIcons.length) { setVersions(newVersion.replace(/\.0$/, ''), newIcons) } }) } cb() }) gulp.task('import-categories', function(cb) { let files = glob.sync('./src/_icons/*-2.svg') files.forEach(function(file, i) { const fileOriginal = file.replace(/\-2.svg$/, '.svg') if (fs.existsSync(fileOriginal)) { const dataOriginal = fs.readFileSync(fileOriginal).toString() const categoryOriginal = dataOriginal.match(/category: ([a-zA-Z-]+)/) if (categoryOriginal) { console.log('categoryOriginal', categoryOriginal[1]) let data = fs.readFileSync(file).toString() data = data.replace(/(---[\s\S]+?---)/, function(m, headerContent) { headerContent = headerContent.replace(/category: .*\n/, '') headerContent = headerContent.replace(/---/, `---\ncategory: ${categoryOriginal[1]}`) return headerContent }) fs.writeFileSync(file, data) } } }) cb() }) gulp.task('import-tags', function(cb) { fs.createReadStream('./_import.tsv').pipe(csv({ headers: false, separator: '\t' })).on('data', (row) => { console.log(row[0], row[1]) const filename = `src/_icons/${row[0]}.svg` 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]}]`) return headerContent }) fs.writeFileSync(filename, data) }).on('end', () => { console.log('CSV file successfully processed') }) cb() }) gulp.task('build-react', function(cb) { cp.exec('npm run build-react', function() { cb() }) }) gulp.task('build', gulp.series('optimize', 'update-icons-version', 'update-icons-unicode', 'build-jekyll', 'build-copy', 'icons-sprite', 'svg-to-react', 'build-react', 'icons-preview', 'svg-to-png', 'build-iconfont', 'changelog-image', 'build-zip'))