icons-react build

8 files changed, 82 insertions, 59 deletions

diff --git a/gulpfile.js b/gulpfile.js
index d86a965d..7123ab54 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -52,7 +52,7 @@ if (fs.existsSync('./compile-options.json')) {
 				}
 			})
 		}
-		
+
 		if (typeof tempOptions.excludeIcons !== "undefined") {
 			if (!Array.isArray(tempOptions.excludeIcons)) {
 				throw "property excludeIcons is not an array"
@@ -89,11 +89,7 @@ if (fs.existsSync('./compile-options.json')) {
 
 }
 
-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)
@@ -592,48 +588,7 @@ gulp.task('clean-react', 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()
 }))
diff --git a/package.json b/package.json
index e347c01d..4a1fc382 100644
--- a/package.json
+++ b/package.json
@@ -48,11 +48,12 @@
     "access": "public"
   },
   "scripts": {
-    "build": "yarn optimize && yarn update-version && yarn build-svg && yarn icons-react build",
+    "build": "yarn optimize && yarn update-version && yarn update-unicode && yarn build-svg && yarn build-react",
     "build-svg": "rm -rf dist && bundle exec jekyll build && mkdir dist && cp -R _site/{icons,tags.json} dist/ && rm -rf _site",
+    "build-react": "babel-node ./scripts/build-react.js",
     "optimize": "babel-node ./scripts/optimize.js --presets @babel/env",
-    "update-version": "babel-node ./scripts/updateVersion.js --presets @babel/env",
-    "update-unicode": "babel-node ./scripts/updateUnicode.js --presets @babel/env",
+    "update-version": "babel-node ./scripts/update-version.js --presets @babel/env",
+    "update-unicode": "babel-node ./scripts/update-unicode.js --presets @babel/env",
 
     "start": "bundle exec jekyll serve --watch --livereload --trace --livereload_port 8888",
 
@@ -60,13 +61,12 @@
     "icons-angular": "yarn workspace @tabler/icons-angular",
     "icons-iconfont": "yarn workspace @tabler/icons-iconfont",
     "icons-preact": "yarn workspace @tabler/icons-preact",
-    "icons-react": "yarn workspace @tabler/icons-react",
     "icons-svelte": "yarn workspace @tabler/icons-svelte",
     "icons-vue-2": "yarn workspace @tabler/icons-vue-2",
     "icons-vue-3": "yarn workspace @tabler/icons-vue-3",
 
     "prebuild-react": "rm -rf ./icons-react/dist/",
-    "build-react": "rollup -c",
+    "_build-react": "rollup -c",
     "release": "release-it",
     "_optimize": "gulp optimize",
     "_build": "gulp build",
diff --git a/packages/icons-react/package.json b/packages/icons-react/package.json
index 58321f8c..abca00ff 100644
--- a/packages/icons-react/package.json
+++ b/packages/icons-react/package.json
@@ -16,10 +16,5 @@
     "url": "https://github.com/tabler/tabler-icons.git",
     "directory": "packages/icons-react"
   },
-  "sideEffects": false,
-  "scripts": {
-    "build": "yarn clean && yarn build:icons",
-    "build:icons": "echo 'Build icons React'",
-    "clean": "rm -rf dist && rm -rf ./src/icons/*.js"
-  }
+  "sideEffects": false
 }
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/.build/svgr-template.js b/scripts/svgr-template.js
index c8c41384..c8c41384 100644
--- a/.build/svgr-template.js
+++ b/scripts/svgr-template.js
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, '')
+}