aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--.gitignore1
-rw-r--r--build/helpers.js20
-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.js1170
-rw-r--r--package.json32
-rw-r--r--packages/icons-preact/.gitignore1
-rw-r--r--packages/icons-preact/readme.md3
-rw-r--r--packages/icons-react/.gitignore1
-rw-r--r--packages/icons-react/readme.md3
-rw-r--r--packages/icons-react/rollup.config.js (renamed from rollup.config.js)2
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";