diff options
| -rw-r--r-- | .gitignore | 1 | ||||
| -rw-r--r-- | build/helpers.js | 20 | ||||
| -rw-r--r-- | build/iconfont-unicode.json (renamed from .build/iconfont-unicode.json) | 0 | ||||
| -rw-r--r-- | build/iconfont.html (renamed from .build/iconfont.html) | 0 | ||||
| -rw-r--r-- | build/iconfont.scss (renamed from .build/iconfont.scss) | 0 | ||||
| -rw-r--r-- | build/template-react.js (renamed from .build/svgr-template.js) | 0 | ||||
| -rw-r--r-- | gulpfile.js | 1170 | ||||
| -rw-r--r-- | package.json | 32 | ||||
| -rw-r--r-- | packages/icons-preact/.gitignore | 1 | ||||
| -rw-r--r-- | packages/icons-preact/readme.md | 3 | ||||
| -rw-r--r-- | packages/icons-react/.gitignore | 1 | ||||
| -rw-r--r-- | packages/icons-react/readme.md | 3 | ||||
| -rw-r--r-- | packages/icons-react/rollup.config.js (renamed from rollup.config.js) | 2 |
13 files changed, 613 insertions, 620 deletions
@@ -4,7 +4,6 @@ node_modules/ .jekyll-cache/ package-lock.json Gemfile.lock -packages/* packages-zip/* .DS_Store icons-outlined/ diff --git a/build/helpers.js b/build/helpers.js new file mode 100644 index 00000000..b064a87e --- /dev/null +++ b/build/helpers.js @@ -0,0 +1,20 @@ +const path = require('path'); + +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, '') +} + +exports.componentName = function (file) { + file = path.basename(file, '.svg') + file = camelize(`Icon ${file}`) + + return file +} + +exports.optimizeSvgCode = function (svgCode) { + return svgCode.replace(/<path stroke="none" d="M0 0h24v24H0z"[^>]+>/, '') +} diff --git a/.build/iconfont-unicode.json b/build/iconfont-unicode.json index d71894f7..d71894f7 100644 --- a/.build/iconfont-unicode.json +++ b/build/iconfont-unicode.json diff --git a/.build/iconfont.html b/build/iconfont.html index 90260298..90260298 100644 --- a/.build/iconfont.html +++ b/build/iconfont.html diff --git a/.build/iconfont.scss b/build/iconfont.scss index c74e1a7e..c74e1a7e 100644 --- a/.build/iconfont.scss +++ b/build/iconfont.scss diff --git a/.build/svgr-template.js b/build/template-react.js index c8c41384..c8c41384 100644 --- a/.build/svgr-template.js +++ b/build/template-react.js diff --git a/gulpfile.js b/gulpfile.js index af3a29e7..5ad8f6e3 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -1,785 +1,751 @@ 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 + 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').transform, + { componentName, optimizeSvgCode } = require('./build/helpers') const compileOptions = { - includeIcons: [], - strokeWidth: null, - fontForge: "fontforge" + 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}` - } + 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) - } +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) + filePath = path.join(__dirname, filePath) - await cp.exec(`rsvg-convert -h 240 ${filePath} > ${destination}`) + 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')}`) + 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:`) +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) { + console.log(`- \`${icon}\``) + }) + } else { + let str = '' + str += `${newIcons.length} new icons: ` - newIcons.forEach(function (icon, i) { - str += `\`${icon}\`` + newIcons.forEach(function(icon, i) { + str += `\`${icon}\`` - if ((i + 1) <= newIcons.length - 1) { - str += ', ' - } - }) + 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: ` + if (modifiedIcons.length > 0) { + let str = '' + str += `Fixed icons: ` - modifiedIcons.forEach(function (icon, i) { - str += `\`${icon}\`` + modifiedIcons.forEach(function(icon, i) { + str += `\`${icon}\`` - if ((i + 1) <= modifiedIcons.length - 1) { - str += ', ' - } - }) + 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: `) + if (renamedIcons.length > 0) { + console.log(`Renamed icons: `) - renamedIcons.forEach(function (icon, i) { - console.log(`- \`${icon[0]}\` renamed to \`${icon[1]}\``) - }) - } + renamedIcons.forEach(function(icon, i) { + console.log(`- \`${icon[0]}\` renamed to \`${icon[1]}\``) + }) + } } -const generateIconsPreview = function (files, destFile, cb, columnsCount = 19, paddingOuter = 7) { +const generateIconsPreview = function(files, destFile, cb, columnsCount = 19, paddingOuter = 7) { - const padding = 20, - iconSize = 24 + 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 + 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 + let svgContentSymbols = '', + svgContentIcons = '', + x = paddingOuter, + y = paddingOuter - files.forEach(function (file, i) { - let name = path.basename(file, '.svg') + files.forEach(function(file, i) { + let name = path.basename(file, '.svg') - let svgFile = fs.readFileSync(file), - svgFileContent = svgFile.toString() + let svgFile = fs.readFileSync(file), + 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, '') + 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, '') - 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 - } - }) + if (i % columnsCount === columnsCount - 1) { + 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() - }) +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-clean', function(cb) { + cp.exec('rm -rf ./icons-outlined', function() { + cb() + }) }) -gulp.task('iconfont-svg-outline', 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") + cp.exec('mkdir -p icons-outlined/ && rm -fd ./icons-outlined/*', async () => { + let files = glob.sync('./icons/*.svg') - let iconfontUnicode = {} + let iconfontUnicode = {} - if (fs.existsSync('./.build/iconfont-unicode.json')) { - iconfontUnicode = require('./.build/iconfont-unicode') - } + if (fs.existsSync('./build/iconfont-unicode.json')) { + iconfontUnicode = require('./build/iconfont-unicode') + } - await asyncForEach(files, async function (file) { + 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"') + 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}"`) - } + 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)) - } + 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() - }) + cb() + }) }) -gulp.task('iconfont-optimize', function () { - return gulp.src('icons-outlined/*') - .pipe(svgo()) - .pipe(gulp.dest('icons-outlined')) +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-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 () { - let maxUnicode = 59905 +gulp.task('iconfont', function() { + let maxUnicode = 59905 - if (fs.existsSync('./.build/iconfont-unicode.json')) { - const iconfontUnicode = require('./.build/iconfont-unicode') + if (fs.existsSync('./build/iconfont-unicode.json')) { + const iconfontUnicode = require('./build/iconfont-unicode') - for (const name in iconfontUnicode) { - const unicode = parseInt(iconfontUnicode[name], 16) + for (const name in iconfontUnicode) { + 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({ - fontName: 'tabler-icons', - prependUnicode: true, - formats: ['ttf', 'eot', 'woff', 'woff2', 'svg'], - normalize: true, - startUnicode: maxUnicode, - fontHeight: 1000, - descent: 100, - ascent: 986.5 - })) - .on('glyphs', function (glyphs, options) { - //glyphs json - let glyphsObject = {} + return gulp.src(['icons-outlined/*.svg']).pipe(iconfont({ + fontName: 'tabler-icons', + prependUnicode: true, + formats: ['ttf', 'eot', 'woff', 'woff2', 'svg'], + normalize: true, + startUnicode: maxUnicode, + fontHeight: 1000, + descent: 100, + ascent: 986.5 + })).on('glyphs', function(glyphs, options) { + //glyphs json + let glyphsObject = {} - //sort glypht - glyphs = glyphs.sort(function (a, b) { - return ('' + a.name).localeCompare(b.name) - }) + //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) - }) + glyphs.forEach(function(glyph) { + 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 + //css + 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) + //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')) + 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) +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) + 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) { - let tags = require('./tags.json'), - unicodes = require('./.build/iconfont-unicode.json') +gulp.task('update-tags-unicode', function(cb) { + let tags = require('./tags.json'), + unicodes = require('./build/iconfont-unicode.json') - for (let i in tags) { - tags[i] = { - ...tags[i], - unicode: unicodes[i], - } - } + 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 +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')) + 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-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('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('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) { +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() + files.forEach(function(file, i) { + let name = path.basename(file, '.svg'), + svgFile = fs.readFileSync(file), + svgFileContent = svgFile.toString() - svgFileContent = svgFileContent - .replace(/<svg[^>]+>/g, '') - .replace(/<\/svg>/g, '') - .replace(/\n+/g, '') - .replace(/>\s+</g, '><') - .trim() + svgFileContent = svgFileContent.replace(/<svg[^>]+>/g, '').replace(/<\/svg>/g, '').replace(/\n+/g, '').replace(/>\s+</g, '><').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>` - }) + 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) - }) +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) { +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 + 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 + let svgContentSymbols = '', + svgContentIcons = '', + x = paddingOuter - strokes.forEach(function (stroke) { - let svgFileContentStroked = svgFileContent - .replace('<svg xmlns="http://www.w3.org/2000/svg"', `<symbol id="icon-${stroke}"`) - .replace(' width="24" height="24"', '') - .replace(' stroke-width="2"', ` stroke-width="${stroke}"`) - .replace('</svg>', '</symbol>') - .replace(/\n\s+/g, '') + strokes.forEach(function(stroke) { + let svgFileContentStroked = svgFileContent.replace('<svg xmlns="http://www.w3.org/2000/svg"', `<symbol id="icon-${stroke}"`). + replace(' width="24" height="24"', ''). + replace(' stroke-width="2"', ` stroke-width="${stroke}"`). + replace('</svg>', '</symbol>'). + 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) { - 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(/<path stroke="red" stroke-width="\.1"([^>]+)?\/>/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(/<path d="([^"]+)"/g, function (f, r1) { - r1 = optimizePath(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\s+\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)}"` - }) - .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)}"` - }) - .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}"` - }) - .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}"` - }) - - if (svgFile.toString() !== svgFileContent) { - fs.writeFileSync(file, svgFileContent) - } - }) - - 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(/<path stroke="red" stroke-width="\.1"([^>]+)?\/>/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(/<path d="([^"]+)"/g, function(f, r1) { + r1 = optimizePath(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\s+\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)}"` + }). + 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)}"` + }). + 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}"` + }). + 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}"` + }) + + if (svgFile.toString() !== svgFileContent) { + fs.writeFileSync(file, svgFileContent) + } + }) + + cb() + }) }) -gulp.task('changelog-commit', function (cb) { - cp.exec('git status', function (err, ret) { - let newIcons = [], modifiedIcons = [], renamedIcons = [] +gulp.task('changelog-commit', function(cb) { + cp.exec('git status', function(err, ret) { + let newIcons = [], modifiedIcons = [], renamedIcons = [] - ret.replace(/new file:\s+src\/_icons\/([a-z0-9-]+)\.svg/g, function (m, fileName) { - newIcons.push(fileName) - }) + ret.replace(/new file:\s+src\/_icons\/([a-z0-9-]+)\.svg/g, function(m, fileName) { + newIcons.push(fileName) + }) - ret.replace(/modified:\s+src\/_icons\/([a-z0-9-]+)\.svg/g, function (m, fileName) { - modifiedIcons.push(fileName) - }) + ret.replace(/modified:\s+src\/_icons\/([a-z0-9-]+)\.svg/g, function(m, 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]) - }) + 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]) + }) - modifiedIcons = modifiedIcons.filter(function (el) { - return newIcons.indexOf(el) < 0 - }) + modifiedIcons = modifiedIcons.filter(function(el) { + 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}` +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) { + 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) - }) + 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(/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]) - }) + 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 - }) + modifiedIcons = modifiedIcons.filter(function(el) { + 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}` +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) { + 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) - }) + 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` - }) + 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() - } + 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('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') + await asyncForEach(files, async function(file, i) { + 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() - }) -}) - -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('<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` - - 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] +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 (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<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) - } else { - console.log(`File ${file} already has version`) - } + fs.writeFileSync(`src/_icons/${file}.svg`, svgFile) + } else { + console.log(`File ${file} already has version`) + } - } else { - console.log(`File ${file} doesn't exists`) - } - } + } else { + console.log(`File ${file} doesn't exists`) + } + } } -gulp.task('update-icons-version', function (cb) { +gulp.task('update-icons-version', function(cb) { - const version = argv['latest-version'] || `${p.version}`, - newVersion = argv['new-version'] || `${p.version}` + 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) { + if (version) { + cp.exec(`grep -RiL "version: " ./src/_icons/*.svg`, function(err, ret) { - let newIcons = [] + let newIcons = [] - ret.replace(/src\/_icons\/([a-z0-9-]+)\.svg/g, function (m, fileName) { - newIcons.push(fileName) - }) + ret.replace(/src\/_icons\/([a-z0-9-]+)\.svg/g, function(m, 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) { - fs.createReadStream('./_import.csv') - .pipe(csv({ - headers: false, - separator: "\t" - })) - .on('data', (row) => { - console.log(row[0], row[1]) +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]) - 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() + }).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-preact', 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-react', gulp.series( + function(cb) { + cp.exec('rm -fd ./packages/icons-react/src/* && mkdir ./packages/icons-react/src/icons', function() { + cb() + }) + }, + async function(cb) { + let files = glob.sync('./icons/*.svg') + + 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` + + 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/template-react') + }, { + componentName: iconComponentName + }).then(jsCode => { + fs.writeFileSync('packages/icons-react/src/icons/' + fileName, jsCode) + indexCode += `export { default as ${iconComponentName} } from './icons/${fileName}';\n` + indexDCode += `export const ${iconComponentName}: TablerIcon;\n` + }) + + fs.writeFileSync('packages/icons-react/src/index.js', indexCode) + fs.writeFileSync('packages/icons-react/src/index.d.ts', indexDCode) + }) + + // await cp.exec("npm run build-react", function () { + // cb() + // }) + + cb() + })) + +gulp.task('build-packages', gulp.series('build-react', 'build-preact')) + +gulp.task('build', + gulp.series('optimize', 'update-icons-version', 'build-jekyll', 'build-copy', 'icons-sprite', 'build-packages', 'icons-preview', 'svg-to-png', + 'build-iconfont', 'changelog-image', 'build-zip')) diff --git a/package.json b/package.json index b8476077..05814818 100644 --- a/package.json +++ b/package.json @@ -65,28 +65,28 @@ "web" ], "devDependencies": { - "@babel/core": "7.11.6", - "@babel/parser": "7.11.5", - "@babel/preset-env": "7.11.5", - "@babel/preset-react": "7.10.4", - "@rollup/plugin-babel": "5.2.1", - "@rollup/plugin-commonjs": "15.1.0", - "@rollup/plugin-node-resolve": "9.0.0", - "@svgr/babel-plugin-replace-jsx-attribute-value": "5.0.1", - "@svgr/core": "5.4.0", - "clean-css": "4.2.3", + "@babel/core": "7.18.6", + "@babel/parser": "7.18.8", + "@babel/preset-env": "7.18.6", + "@babel/preset-react": "7.18.6", + "@rollup/plugin-babel": "5.3.1", + "@rollup/plugin-commonjs": "22.0.1", + "@rollup/plugin-node-resolve": "13.3.0", + "@svgr/babel-plugin-replace-jsx-attribute-value": "6.0.0", + "@svgr/core": "6.2.1", + "clean-css": "5.3.0", "csv-parser": "^3.0.0", - "glob": "7.1.6", + "glob": "8.0.3", "gulp": "4.0.2", - "gulp-iconfont": "10.0.3", + "gulp-iconfont": "11.0.1", "gulp-svgo": "^2.2.1", - "gulp-zip": "5.0.2", + "gulp-zip": "5.1.0", "lodash.template": "4.5.0", - "minimist": "1.2.5", + "minimist": "1.2.6", "node-sass": "7.0.1", "parse-svg-path": "^0.1.2", - "release-it": "14.12.5", - "rollup": "2.70.1", + "release-it": "15.1.1", + "rollup": "2.76.0", "rollup-plugin-filesize": "9.1.2", "rollup-plugin-peer-deps-external": "2.2.4", "rollup-plugin-terser": "7.0.2", diff --git a/packages/icons-preact/.gitignore b/packages/icons-preact/.gitignore new file mode 100644 index 00000000..71bcfc6c --- /dev/null +++ b/packages/icons-preact/.gitignore @@ -0,0 +1 @@ +src/* diff --git a/packages/icons-preact/readme.md b/packages/icons-preact/readme.md new file mode 100644 index 00000000..31a2268a --- /dev/null +++ b/packages/icons-preact/readme.md @@ -0,0 +1,3 @@ +# Tabler Icons Preact + +Implementation of the Tabler Icons library for Preact applications. diff --git a/packages/icons-react/.gitignore b/packages/icons-react/.gitignore new file mode 100644 index 00000000..71bcfc6c --- /dev/null +++ b/packages/icons-react/.gitignore @@ -0,0 +1 @@ +src/* diff --git a/packages/icons-react/readme.md b/packages/icons-react/readme.md new file mode 100644 index 00000000..3bd0e60b --- /dev/null +++ b/packages/icons-react/readme.md @@ -0,0 +1,3 @@ +# Tabler Icons React + +Implementation of the Tabler Icons library for React applications. diff --git a/rollup.config.js b/packages/icons-react/rollup.config.js index 2b1b9845..3e733de5 100644 --- a/rollup.config.js +++ b/packages/icons-react/rollup.config.js @@ -5,7 +5,7 @@ import babel from "@rollup/plugin-babel"; import external from "rollup-plugin-peer-deps-external"; import { terser } from "rollup-plugin-terser"; import { uglify } from "rollup-plugin-uglify"; -import pkg from "./package.json"; +import pkg from "./../../package.json"; const input = "icons-react/index.js"; |