new build processdev-react

13 files changed, 613 insertions, 620 deletions

diff --git a/.gitignore b/.gitignore
index ad294d10..b6b947e6 100644
--- a/.gitignore
+++ b/.gitignore
@@ -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";