From c291772a85d309a32896ce7d616157d93e631408 Mon Sep 17 00:00:00 2001 From: codecalm Date: Sat, 16 Apr 2022 14:50:51 +0200 Subject: icons-react build --- scripts/build-react.js | 59 ++++++++++++++++++++++++++++++++++++++ scripts/svgr-template.js | 12 ++++++++ scripts/update-unicode.js | 72 +++++++++++++++++++++++++++++++++++++++++++++++ scripts/update-version.js | 47 +++++++++++++++++++++++++++++++ scripts/updateUnicode.js | 72 ----------------------------------------------- scripts/updateVersion.js | 47 ------------------------------- scripts/utils.js | 14 +++++++++ 7 files changed, 204 insertions(+), 119 deletions(-) create mode 100644 scripts/build-react.js create mode 100644 scripts/svgr-template.js create mode 100644 scripts/update-unicode.js create mode 100644 scripts/update-version.js delete mode 100644 scripts/updateUnicode.js delete mode 100644 scripts/updateVersion.js create mode 100644 scripts/utils.js (limited to 'scripts') diff --git a/scripts/build-react.js b/scripts/build-react.js new file mode 100644 index 00000000..17cbb742 --- /dev/null +++ b/scripts/build-react.js @@ -0,0 +1,59 @@ +const glob = require('glob') +const path = require('path') +const fs = require('fs') +const { default: svgr } = require('@svgr/core') +const { asyncForEach, camelize } = require('./utils') + +const packageDir = path.resolve(__dirname, '../packages/icons-react') + +const optimizeSvgCode = function (svgCode) { + return svgCode + .replace('', '') +} + +const componentName = function (file) { + file = path.basename(file, '.svg') + file = camelize(`Icon ${file}`) + + return file +} + +const buildReact = async () => { + let files = glob.sync(`./dist/icons/*.svg`) + + let indexCode = '', + indexDCode = `import { FC, SVGAttributes } from 'react'; + +interface TablerIconProps extends SVGAttributes { color?: string; size?: string | number; stroke?: string | number; } + +type 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) + + if(fs.existsSync(`${packageDir}/icons/`)) { + fs.rmSync(`${packageDir}/icons/`, { recursive: true }) + } + + fs.mkdirSync(`${packageDir}/icons/`, { recursive: true }) + + await svgr(svgCode, { + icon: false, + svgProps: { width: '{size}', height: '{size}', strokeWidth: '{stroke}', stroke: '{color}' }, + template: require('./svgr-template') + }, { componentName: iconComponentName }).then(jsCode => { + fs.writeFileSync(`${packageDir}/icons/${fileName}`, jsCode) + + indexCode += `export { default as ${iconComponentName} } from './icons/${fileName}';\n` + indexDCode += `export const ${iconComponentName}: TablerIcon;\n` + }) + + fs.writeFileSync(`${packageDir}/index.js`, indexCode) + fs.writeFileSync(`${packageDir}/index.d.ts`, indexDCode) + }) +} + + +buildReact() diff --git a/scripts/svgr-template.js b/scripts/svgr-template.js new file mode 100644 index 00000000..c8c41384 --- /dev/null +++ b/scripts/svgr-template.js @@ -0,0 +1,12 @@ +function template( + { template }, + opts, + { imports, componentName, props, jsx, exports }, +) { + return template.ast` + ${imports} + function ${componentName}({ size = 24, color = "currentColor", stroke = 2, ...props }) { return (${jsx}); } + ${exports} + `; +} +module.exports = template; diff --git a/scripts/update-unicode.js b/scripts/update-unicode.js new file mode 100644 index 00000000..8649c435 --- /dev/null +++ b/scripts/update-unicode.js @@ -0,0 +1,72 @@ +import cp from 'child_process' +import fs from 'fs' +import glob from 'glob' + +let maxUnicode = 0 + +const setMaxUnicode = () => { + const path = 'src/_icons/*.svg' + + const files = glob.sync(path) + + 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) + } + }) + }) +} + +const addUnicodeToIcons = (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(/unicode: ([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(`src/_icons/${file}.svg`, svgFile) + } + } else { + console.log(`File ${file} already has unicode`) + } + } else { + console.log(`File ${file} doesn't exists`) + } + } +} + +const updateIconsUnicode = () => { + setMaxUnicode() + + cp.exec(`grep -RiL "unicode: " ./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) { + console.log('newIcons', newIcons.join(', ')); + addUnicodeToIcons(newIcons) + } + }) +} + +updateIconsUnicode() diff --git a/scripts/update-version.js b/scripts/update-version.js new file mode 100644 index 00000000..218ffa9a --- /dev/null +++ b/scripts/update-version.js @@ -0,0 +1,47 @@ +import p from '../package.json' +import cp from 'child_process' +import fs from 'fs' +import { basename } from 'path' + +const setVersionToIcons = (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}` + }) + + console.log(`Set version to ${version} in "${basename(file)}"`); + fs.writeFileSync(`src/_icons/${file}.svg`, svgFile) + } else { + console.log(`File ${file} already has version`) + } + } else { + console.log(`File ${file} doesn't exists`) + } + } +} + +const updateIconsVersion = (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) { + setVersionToIcons(version.replace(/\.0$/, ''), newIcons) + } + }) + } +} + +updateIconsVersion(p.version) diff --git a/scripts/updateUnicode.js b/scripts/updateUnicode.js deleted file mode 100644 index 85332d90..00000000 --- a/scripts/updateUnicode.js +++ /dev/null @@ -1,72 +0,0 @@ -import cp from 'child_process' -import fs from 'fs' -import glob from 'glob' - -let maxUnicode = 0 - -const setMaxUnicode = () => { - const path = 'src/_icons/*.svg' - - const files = glob.sync(path) - - 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) - } - }) - }) -} - -const addUnicodeToIcons = (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(/unicode: ([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(`src/_icons/${file}.svg`, svgFile) - } - } else { - console.log(`File ${file} already has unicode`) - } - } else { - console.log(`File ${file} doesn't exists`) - } - } -} - -const updateIconsUnicode = () => { - setMaxUnicode() - - cp.exec(`grep -RiL "unicode: " ./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) { - console.log('newIcons', newIcons); - addUnicodeToIcons(newIcons) - } - }) -} - -updateIconsUnicode() diff --git a/scripts/updateVersion.js b/scripts/updateVersion.js deleted file mode 100644 index 218ffa9a..00000000 --- a/scripts/updateVersion.js +++ /dev/null @@ -1,47 +0,0 @@ -import p from '../package.json' -import cp from 'child_process' -import fs from 'fs' -import { basename } from 'path' - -const setVersionToIcons = (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}` - }) - - console.log(`Set version to ${version} in "${basename(file)}"`); - fs.writeFileSync(`src/_icons/${file}.svg`, svgFile) - } else { - console.log(`File ${file} already has version`) - } - } else { - console.log(`File ${file} doesn't exists`) - } - } -} - -const updateIconsVersion = (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) { - setVersionToIcons(version.replace(/\.0$/, ''), newIcons) - } - }) - } -} - -updateIconsVersion(p.version) diff --git a/scripts/utils.js b/scripts/utils.js new file mode 100644 index 00000000..86ea64aa --- /dev/null +++ b/scripts/utils.js @@ -0,0 +1,14 @@ +export const asyncForEach = async (array, callback) => { + for (let index = 0; index < array.length; index++) { + await callback(array[index], index, array) + } +} + + +export 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, '') +} -- cgit v1.2.1