icons-react build

5 files changed, 86 insertions, 1 deletions

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('<path stroke="none" d="M0 0h24v24H0z" fill="none"/>', '')
+}
+
+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<SVGElement> { color?: string; size?: string | number; stroke?: string | number; }
+
+type 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)
+
+    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/updateUnicode.js b/scripts/update-unicode.js
index 85332d90..8649c435 100644
--- a/scripts/updateUnicode.js
+++ b/scripts/update-unicode.js
@@ -63,7 +63,7 @@ const updateIconsUnicode = () => {
     })
 
     if (newIcons.length) {
-      console.log('newIcons', newIcons);
+      console.log('newIcons', newIcons.join(', '));
       addUnicodeToIcons(newIcons)
     }
   })
diff --git a/scripts/updateVersion.js b/scripts/update-version.js
index 218ffa9a..218ffa9a 100644
--- a/scripts/updateVersion.js
+++ b/scripts/update-version.js
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, '')
+}