Version 2.0! (#439)

This commit is contained in:
Paweł Kuna 2023-01-22 00:02:47 +01:00 committed by GitHub
parent 759beb8a8c
commit 8b5735f21b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15703 changed files with 111127 additions and 91081 deletions

107
.build/build-icons.mjs Normal file
View File

@ -0,0 +1,107 @@
import fs from 'fs-extra'
import path from 'path'
import { PACKAGES_DIR, readSvgs } from './helpers.mjs'
import { stringify } from 'svgson'
import prettier from 'prettier'
import bundleSize from '@atomico/rollup-plugin-sizes'
import { visualizer } from 'rollup-plugin-visualizer'
import license from 'rollup-plugin-license'
import esbuild from 'rollup-plugin-esbuild';
/**
* Build icons
*
* @param name
* @param componentTemplate
* @param indexIconTemplate
* @param typeDefinitionsTemplate
* @param indexTypeTemplate
* @param ext
* @param pretty
*/
export const buildIcons = ({
name,
componentTemplate,
indexItemTemplate,
typeDefinitionsTemplate,
indexTypeTemplate,
extension = 'js',
pretty = true,
key = true
}) => {
const DIST_DIR = path.resolve(PACKAGES_DIR, name),
svgFiles = readSvgs()
let index = []
let typings = []
svgFiles.forEach((svgFile, i) => {
const children = svgFile.obj.children
.map(({
name,
attributes
}, i) => {
if (key) {
attributes.key = `svg-${i}`
}
return [name, attributes]
})
.filter((i) => {
const [name, attributes] = i
return !attributes.d || attributes.d !== 'M0 0h24v24H0z'
})
// process.stdout.write(`Building ${i}/${svgFiles.length}: ${svgFile.name.padEnd(42)}\r`)
let component = componentTemplate({
name: svgFile.name,
namePascal: svgFile.namePascal,
children,
stringify,
svg: svgFile
})
const output = pretty ? prettier.format(component, {
singleQuote: true,
trailingComma: 'all',
parser: 'babel'
}) : component
let filePath = path.resolve(DIST_DIR, 'src/icons', `${svgFile.name}.${extension}`)
fs.writeFileSync(filePath, output, 'utf-8')
index.push(indexItemTemplate({
name: svgFile.name,
namePascal: svgFile.namePascal
}))
typings.push(indexTypeTemplate({
name: svgFile.name,
namePascal: svgFile.namePascal
}))
})
fs.writeFileSync(path.resolve(DIST_DIR, `./src/icons.js`), index.join('\n'), 'utf-8')
fs.ensureDirSync(path.resolve(DIST_DIR, `./dist/`))
fs.writeFileSync(path.resolve(DIST_DIR, `./dist/tabler-${name}.d.ts`), typeDefinitionsTemplate() + '\n' + typings.join('\n'), 'utf-8')
}
export const getRollupPlugins = (pkg, minify) => {
return [
esbuild({
minify,
}),
license({
banner: `${pkg.name} v${pkg.version} - ${pkg.license}`
}),
bundleSize(),
visualizer({
sourcemap: false,
filename: `stats/${pkg.name}${minify ? '-min' : ''}.html`
})
].filter(Boolean)
}

View File

@ -0,0 +1,24 @@
import cp from 'child_process'
import { printChangelog } from './helpers.mjs'
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(/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])
})
modifiedIcons = modifiedIcons.filter(function(el) {
return newIcons.indexOf(el) < 0
})
printChangelog(newIcons, modifiedIcons, renamedIcons)
})

View File

@ -0,0 +1,30 @@
import cp from 'child_process'
import { generateIconsPreview, getArgvs, getPackageJson } from './helpers.mjs'
const argv = getArgvs(),
p = getPackageJson()
const version = argv['latest-version'] || `v${p.version}`,
newVersion = argv['new-version'] || `${p.version}`
if (version) {
cp.exec(`git diff ${version} HEAD --name-status --diff-filter=A src/_icons`, function(err, ret) {
let newIcons = []
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`
})
if (newIcons.length > 0) {
generateIconsPreview(newIcons, `.github/tabler-icons-${newVersion}.svg`, {
columnsCount: 6,
paddingOuter: 24
})
}
})
}

31
.build/changelog.mjs Normal file
View File

@ -0,0 +1,31 @@
import cp from 'child_process'
import { getArgvs, getPackageJson, printChangelog } from './helpers.mjs'
const p = getPackageJson(),
argv = getArgvs(),
version = argv['latest-version'] || `${p.version}`
if (version) {
cp.exec(`git diff ${version} HEAD --name-status src/_icons`, function(err, ret) {
let newIcons = [], modifiedIcons = [], renamedIcons = []
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(/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
})
printChangelog(newIcons, modifiedIcons, renamedIcons, true)
})
}

353
.build/helpers.mjs Normal file
View File

@ -0,0 +1,353 @@
import fs from 'fs'
import path, { resolve, basename } from 'path'
import { fileURLToPath } from 'url'
import svgParse from 'parse-svg-path'
import svgpath from 'svgpath'
import cheerio from 'cheerio';
import { minify } from 'html-minifier';
import { parseSync } from 'svgson'
import { optimize } from 'svgo'
import cp from 'child_process'
import minimist from 'minimist'
export const getCurrentDirPath = () => {
return path.dirname(fileURLToPath(import.meta.url));
}
export const HOME_DIR = resolve(getCurrentDirPath(), '..')
export const ICONS_SRC_DIR = resolve(HOME_DIR, 'src/_icons')
export const ICONS_DIR = resolve(HOME_DIR, 'icons')
export const PACKAGES_DIR = resolve(HOME_DIR, 'packages')
export const getArgvs = () => {
return minimist(process.argv.slice(2))
}
export const getPackageDir = (packageName) => {
return `${PACKAGES_DIR}/${packageName}`
}
/**
* Return project package.json
* @returns {any}
*/
export const getPackageJson = () => {
return JSON.parse(fs.readFileSync(resolve(HOME_DIR, 'package.json'), 'utf-8'))
}
/**
* Reads SVGs from directory
*
* @param directory
* @returns {string[]}
*/
export const readSvgDirectory = (directory) => {
return fs.readdirSync(directory).filter((file) => path.extname(file) === '.svg')
}
export const readSvgs = () => {
const svgFiles = readSvgDirectory(ICONS_DIR)
return svgFiles.map(svgFile => {
const name = basename(svgFile, '.svg'),
namePascal = toPascalCase(`icon ${name}`),
contents = readSvg(svgFile, ICONS_DIR).trim(),
path = resolve(ICONS_DIR, svgFile),
obj = parseSync(contents.replace('<path stroke="none" d="M0 0h24v24H0z" fill="none"/>', ''));
return {
name,
namePascal,
contents,
obj,
path
};
});
}
/**
* Read SVG
*
* @param fileName
* @param directory
* @returns {string}
*/
export const readSvg = (fileName, directory) => {
return fs.readFileSync(path.join(directory, fileName), 'utf-8')
}
/**
* Create directory if not exists
* @param dir
*/
export const createDirectory = (dir) => {
if (!fs.existsSync(dir)) {
fs.mkdirSync(dir);
}
};
/**
* Get SVG name
* @param fileName
* @returns {string}
*/
export const getSvgName = (fileName) => {
return path.basename(fileName, '.svg')
}
/**
* Convert string to CamelCase
* @param string
* @returns {*}
*/
export const toCamelCase = (string) => {
return string.replace(/^([A-Z])|[\s-_]+(\w)/g, (match, p1, p2) => p2 ? p2.toUpperCase() : p1.toLowerCase())
}
export const toPascalCase = (string) => {
const camelCase = toCamelCase(string);
return camelCase.charAt(0).toUpperCase() + camelCase.slice(1);
}
export const addFloats = function(n1, n2) {
return Math.round((parseFloat(n1) + parseFloat(n2)) * 1000) / 1000
}
export const optimizePath = function(path) {
let transformed = svgpath(path).rel().round(3).toString()
return svgParse(transformed).map(function(a) {
return a.join(' ')
}).join(' ')
}
export const optimizeSVG = (data) => {
return optimize(data, {
js2svg: {
indent: 2,
pretty: true
},
plugins: [
{
name: 'preset-default',
params: {
overrides: {
mergePaths: false
}
}
}]
}).data
}
export function buildIconsObject(svgFiles, getSvg) {
return svgFiles
.map(svgFile => {
const name = path.basename(svgFile, '.svg');
const svg = getSvg(svgFile);
const contents = getSvgContents(svg);
return { name, contents };
})
.reduce((icons, icon) => {
icons[icon.name] = icon.contents;
return icons;
}, {});
}
function getSvgContents(svg) {
const $ = cheerio.load(svg);
return minify($('svg').html(), { collapseWhitespace: true });
}
export const asyncForEach = async (array, callback) => {
for (let index = 0; index < array.length; index++) {
await callback(array[index], index, array)
}
}
export 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')}`)
}
export const generateIconsPreview = async function(files, destFile, {
columnsCount = 19,
paddingOuter = 7,
color = '#354052',
background = '#fff'
} = {}) {
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
let svgContentSymbols = '',
svgContentIcons = '',
x = paddingOuter,
y = paddingOuter
files.forEach(function(file, i) {
let name = path.basename(file, '.svg')
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, '')
svgContentSymbols += `\t${svgFileContent}\n`
svgContentIcons += `\t<use xlink:href="#${name}" x="${x}" y="${y}" width="${iconSize}" height="${iconSize}" />\n`
x += 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: ${color}"><rect x="0" y="0" width="${width}" height="${height}" fill="${background}"></rect>\n${svgContentSymbols}\n${svgContentIcons}\n</svg>`
fs.writeFileSync(destFile, svgContent)
await createScreenshot(destFile)
}
export const printChangelog = function(newIcons, modifiedIcons, renamedIcons, pretty = false) {
if (newIcons.length > 0) {
if (pretty) {
console.log(`### ${newIcons.length} new icons:\n`)
newIcons.forEach(function(icon, i) {
console.log(`- \`${icon}\``)
})
} else {
let str = ''
str += `${newIcons.length} new icons: `
newIcons.forEach(function(icon, i) {
str += `\`${icon}\``
if ((i + 1) <= newIcons.length - 1) {
str += ', '
}
})
console.log(str)
}
console.log('')
}
if (modifiedIcons.length > 0) {
let str = ''
str += `Fixed icons: `
modifiedIcons.forEach(function(icon, i) {
str += `\`${icon}\``
if ((i + 1) <= modifiedIcons.length - 1) {
str += ', '
}
})
console.log(str)
console.log('')
}
if (renamedIcons.length > 0) {
console.log(`Renamed icons: `)
renamedIcons.forEach(function(icon, i) {
console.log(`- \`${icon[0]}\` renamed to \`${icon[1]}\``)
})
}
}
export const getCompileOptions = () => {
const compileOptions = {
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}`
}
}
return compileOptions
}

View File

@ -0,0 +1,38 @@
import glob from 'glob'
import fs from 'fs'
import { resolve, join, basename } from 'path'
import { ICONS_SRC_DIR } from './helpers.mjs'
glob.sync(join(ICONS_SRC_DIR, '*-off.svg')).forEach(function(file, i) {
const fileOriginal = file.replace(/\-off.svg$/, '.svg')
if (fs.existsSync(fileOriginal)) {
const dataOriginal = fs.readFileSync(fileOriginal).toString()
const categoryOriginal = dataOriginal.match(/category: ([a-zA-Z-]+)/),
tagsOriginal = dataOriginal.match(/tags: (\[.*?\])/)
if (categoryOriginal || tagsOriginal) {
let data = fs.readFileSync(file).toString()
data = data.replace(/(---[\s\S]+?---)/, function(m, headerContent) {
console.log('categoryOriginal', fileOriginal, categoryOriginal && categoryOriginal[1], tagsOriginal && tagsOriginal[1])
if (categoryOriginal) {
headerContent = headerContent.replace(/category: .*\n/, '')
headerContent = headerContent.replace(/---/, `---\ncategory: ${categoryOriginal[1]}`)
}
if (tagsOriginal) {
headerContent = headerContent.replace(/tags: .*\n/, '')
headerContent = headerContent.replace(/---/, `---\ntags: ${tagsOriginal[1]}`)
}
return headerContent
})
fs.writeFileSync(file, data)
}
}
})

30
.build/import-tags.mjs Normal file
View File

@ -0,0 +1,30 @@
import fs from 'fs'
import csv from 'csv-parser'
import { join } from 'path'
import { HOME_DIR } from './helpers.mjs'
fs.createReadStream(join(HOME_DIR, '_import.tsv')).pipe(csv({
headers: false,
separator: '\t'
})).on('data', (row) => {
console.log(row[1], row[2])
const filename = join(HOME_DIR, `src/_icons/${row[1]}.svg`)
if(row[2].length) {
let data = fs.readFileSync(filename).toString()
data = data.replace(/(---[\s\S]+?---)/, function(m, headerContent) {
headerContent = headerContent.replace(/tags: .*\n/, '')
headerContent = headerContent.replace(/---/, `---\ntags: [${row[2]}]`)
return headerContent
})
fs.writeFileSync(filename, data)
}
}).on('end', () => {
console.log('CSV file successfully processed')
})

60
.build/import.mjs Normal file
View File

@ -0,0 +1,60 @@
import fs from 'fs'
import glob from 'glob'
import { resolve, basename } from 'path'
import { HOME_DIR, optimizeSVG } from './helpers.mjs'
const files = glob.sync(resolve(HOME_DIR, './new/*.svg'))
files.forEach(function(file, i) {
let fileData = fs.readFileSync(file).toString(),
filename = basename(file, '.svg')
console.log(filename)
fileData = optimizeSVG(fileData)
if (fileData.match(/transform="/)) {
throw new Error(`File ${file} has \`transform\` in code!!`)
}
if (filename.match(/\s/)) {
throw new Error(`File ${file} has space in name!!`)
}
fileData = fileData.replace(/---/g, '')
.replace(/fill="none"/g, '')
.replace(/fill="#D8D8D8"/gi, '')
.replace(/fill-rule="evenodd"/g, '')
.replace(/stroke-linecap="round"/g, '')
.replace(/stroke-linejoin="round"/g, '')
.replace(/viewBox="0 0 24 24"/g, '')
.replace(/stroke="#000000"/g, '')
.replace(/stroke="#000"/g, '')
.replace(/stroke-width="2"/g, '')
.replace(/width="24"/g, '')
.replace(/width="24px"/g, '')
.replace(/height="24"/g, '')
.replace(/height="24px"/g, '')
.replace(/xmlns="http:\/\/www.w3.org\/2000\/svg"/g, '')
.replace(/<path d="M0 0h24v24H0z"\/>"/g, '')
.replace(/<path stroke="red" stroke-width=".1" d="[^"]+"\s?\/>/g, '')
.replace(/<path[^>]*stroke="red"[^>]*\/>/gs, '')
.replace(/<circle[^>]*stroke="red"[^>]*\/>/gs, '')
.replace(/<g[^>]*stroke="red"[^>]*>.*?<\/g>/gs, '')
fileData = optimizeSVG(fileData)
fileData = fileData.replace(/<svg>/g, '---\n---\n<svg>')
if (fs.existsSync(`./src/_icons/${filename}.svg`)) {
const newFileData = fs.readFileSync(`./src/_icons/${filename}.svg`).toString()
const m = newFileData.match(/(---.*---)/gms)
if (m) {
fileData = fileData.replace('---\n---', m[0])
}
}
fs.writeFileSync(`./src/_icons/${filename}.svg`, fileData)
})

98
.build/optimize.mjs Normal file
View File

@ -0,0 +1,98 @@
import glob from 'glob'
import { readFileSync, writeFileSync } from 'fs'
import { join, basename } from 'path'
import { optimizePath, ICONS_SRC_DIR } from './helpers.mjs'
glob(join(ICONS_SRC_DIR, '*.svg'), {}, function(er, files) {
files.forEach(function(file, i) {
console.log(`Optimize ${basename(file)}`);
let svgFile = readFileSync(file),
svgFileContent = svgFile.toString()
svgFileContent = svgFileContent.replace(/><\/(polyline|line|rect|circle|path|ellipse)>/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|ellipse)/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(/<line x1="([^"]+)" y1="([^"]+)" x2="([^"]+)" y2="([^"]+)"\s*\/>/g, function(f, x1, y1, x2, y2) {
return `<path d="M${x1} ${y1}L${x2} ${y2}" />`
})
.replace(/<circle cx="([^"]+)" cy="([^"]+)" r="([^"]+)"\s+\/>/g, function(f, cx, cy, r) {
return `<path d="M ${cx} ${cy}m -${r} 0a ${r} ${r} 0 1 0 ${r * 2} 0a ${r} ${r} 0 1 0 ${r * -2} 0" />`
})
.replace(/<ellipse cx="([^"]+)" cy="([^"]+)" rx="([^"]+)"\s+\/>/g, function(f, cx, cy, rx) {
return `<ellipse cx="${cx}" cy="${cy}" rx="${rx}" ry="${rx}" />`
})
.replace(/<ellipse cx="([^"]+)" cy="([^"]+)" rx="([^"]+)" ry="([^"]+)"\s+\/>/g, function(f, cx, cy, rx, ry) {
return `<path d="M${cx} ${cy}m -${rx} 0a${rx} ${ry} 0 1 0 ${rx * 2} 0a ${rx} ${ry} 0 1 0 -${rx * 2} 0" />`
})
.replace(/<rect width="([^"]+)" height="([^"]+)" x="([^"]+)" y="([^"]+)" rx="([^"]+)"\s+\/>/g, function(f, width, height, x, y, rx) {
return `<rect x="${x}" y="${y}" width="${height}" height="${height}" rx="${rx}" />`
})
.replace(/<rect x="([^"]+)" y="([^"]+)" rx="([^"]+)" width="([^"]+)" height="([^"]+)"\s+\/>/g, function(f, x, y, rx, width, height) {
return `<rect x="${x}" y="${y}" width="${height}" height="${height}" rx="${rx}" />`
})
.replace(/<rect x="([^"]+)" y="([^"]+)" width="([^"]+)" height="([^"]+)" rx="([^"]+)"\s+\/>/g, function(f, x, y, width, height, rx) {
return `<path d="M ${x} ${y}m 0 ${rx}a${rx} ${rx} 0 0 1 ${rx} ${-rx}h${width - rx * 2}a${rx} ${rx} 0 0 1 ${rx} ${rx}v${height - rx *
2}a${rx} ${rx} 0 0 1 ${-rx} ${rx}h${-width + rx * 2}a${rx} ${rx} 0 0 1 ${-rx} ${-rx}Z" />`
})
.replace(/<rect x="([^"]+)" y="([^"]+)" width="([^"]+)" height="([^"]+)"\s+\/>/g, function(f, x, y, width, height) {
return `<path d="M ${x} ${y}h${width}v${height}h${-width}Z" />`
})
.replace(/<polyline points="([^"]+)\s?"\s+\/>/g, function(f, points) {
const path = points.split(' ').reduce(
(accumulator, currentValue, currentIndex) => `${accumulator}${currentIndex % 2 === 0 ? (currentIndex === 0 ? 'M' : 'L') : ''}${currentValue} `,
''
)
return `<path d="${path}" />`
})
.replace(/<path\s+d="([^"]+)"/g, function(f, d) {
const d2 = d
.replace(/([0-9]+)+\.00[1-6]/g, (f, m) => `${m}`)
.replace(/([0-9]+)+\.99[4-9]/g, (f, m) => `${parseInt(m) + 1}`)
.replace(/\.99[4-9]/g, (f, m) => `1`)
.replace(/-\.00[1-6]/g, (f, m) => `0`)
.replace(/\.00[1-6]/g, (f, m) => `0`)
.replace(/m0 0/g, (f, m) => ``)
return `<path d="${d2}"`
})
// .replace(/(?<=M[^"]+)"\s+\/>[\n\s\t]+<path d="M/g, function() {
// return `M`
// })
.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 (!svgFileContent.match(/<svg>[\n\t\s]*<path d="([^"]+)"( fill="currentColor")? \/>[\n\t\s]*<\/svg>/)) {
console.log(`Fix ${file}!`);
}
if (svgFile.toString() !== svgFileContent) {
writeFileSync(file, svgFileContent)
}
})
})

10
.build/preview-icons.mjs Normal file
View File

@ -0,0 +1,10 @@
import glob from 'glob'
import { generateIconsPreview } from './helpers.mjs'
glob('icons/*.svg', {}, async function(er, files) {
await generateIconsPreview(files, '.github/icons.svg')
await generateIconsPreview(files, '.github/icons-dark.svg', {
color: '#ffffff',
background: 'transparent'
})
})

36
.build/preview-stroke.mjs Normal file
View File

@ -0,0 +1,36 @@
import fs from 'fs'
import { createScreenshot } from './helpers.mjs'
const icon = 'ghost',
strokes = ['.25', '.5', '.75', '1', '1.25', '1.5', '1.75', '2', '2.25', '2.5', '2.25'],
svgFileContent = fs.readFileSync(`icons/${icon}.svg`).toString(),
padding = 16,
paddingOuter = 3,
iconSize = 56,
width = 830,
height = iconSize + paddingOuter * 2
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, '')
svgContentSymbols += `\t${svgFileContentStroked}\n`
svgContentIcons += `\t<use xlink:href="#icon-${stroke}" x="${x}" y="${paddingOuter}" width="${iconSize}" height="${iconSize}" />\n`
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 svgContentDark = `<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: #ffffff"><rect x="0" y="0" width="${width}" height="${height}" fill="transparent"></rect>\n${svgContentSymbols}\n${svgContentIcons}\n</svg>`
fs.writeFileSync('.github/icons-stroke.svg', svgContent)
fs.writeFileSync('.github/icons-stroke-dark.svg', svgContentDark)
await createScreenshot('.github/icons-stroke.svg')
await createScreenshot('.github/icons-stroke-dark.svg')

View File

@ -1,12 +0,0 @@
function template(
{ template },
opts,
{ imports, componentName, props, jsx, exports },
) {
return template.ast`
${imports}
function ${componentName}({ size = 24, color = "currentColor", stroke = 2, ...props }) { return (${jsx}); }
${exports}
`;
}
module.exports = template;

View File

@ -0,0 +1,47 @@
import glob from 'glob'
import fs from 'fs'
import path from 'path'
import { ICONS_SRC_DIR } from './helpers.mjs'
const getMaxUnicode = () => {
const files = glob.sync(path.join(ICONS_SRC_DIR, '*.svg'))
let maxUnicode = 0
files.forEach(function(file) {
const svgFile = fs.readFileSync(file).toString()
svgFile.replace(/unicode: "([a-f0-9.]+)"/i, function(m, unicode) {
const newUnicode = parseInt(unicode, 16)
if (newUnicode) {
maxUnicode = Math.max(maxUnicode, newUnicode)
}
})
})
return maxUnicode
}
let maxUnicode = getMaxUnicode()
glob(path.join(ICONS_SRC_DIR, '*.svg'), {}, function(er, files) {
for (const i in files) {
const file = files[i]
let svgFile = fs.readFileSync(file).toString()
if (!svgFile.match(/\nunicode: "?([a-f0-9.]+)"?/i)) {
maxUnicode++
const unicode = maxUnicode.toString(16)
if (unicode) {
svgFile = svgFile.replace(/---\n<svg>/i, function(m) {
return `unicode: "${unicode}"\n${m}`
})
console.log(`Add unicode "${unicode}" to "${file}"`)
fs.writeFileSync(file, svgFile)
}
}
}
})

View File

@ -0,0 +1,48 @@
import cp from 'child_process'
import fs from 'fs'
import path from 'path'
import { getArgvs, getPackageJson, ICONS_SRC_DIR } from './helpers.mjs'
const p = getPackageJson()
const argv = getArgvs(),
version = argv['latest-version'] || `${p.version}`,
newVersion = argv['new-version'] || `${p.version}`
const setVersions = function(version, files) {
for (const i in files) {
const file = files[i],
filePath = path.join(ICONS_SRC_DIR, `${file}.svg`)
if (fs.existsSync(filePath)) {
let svgFile = fs.readFileSync(filePath).toString()
if (!svgFile.match(/version: ([0-9.]+)/i)) {
svgFile = svgFile.replace(/---\n<svg>/i, function(m) {
return `version: "${version}"\n${m}`
})
fs.writeFileSync(filePath, svgFile)
} else {
console.log(`File ${file} already has version`)
}
} else {
console.log(`File ${file} doesn't exists`)
}
}
}
if (version) {
cp.exec(`grep -RiL "version: " ${ICONS_SRC_DIR}/*.svg`, function(err, ret) {
let newIcons = []
ret.replace(/src\/_icons\/([a-z0-9-]+)\.svg/g, function(m, fileName) {
newIcons.push(fileName)
})
if (newIcons.length) {
setVersions(newVersion.replace(/\.0$/, ''), newIcons)
}
})
}

20
.build/update-readme.mjs Normal file
View File

@ -0,0 +1,20 @@
import { readFileSync, writeFileSync } from 'fs'
import glob from 'glob'
import { resolve } from 'path'
import { HOME_DIR } from './helpers.mjs'
let count = glob.sync(resolve(HOME_DIR, 'icons/*.svg')).length
console.log('count', count);
const readmes = glob.sync(resolve(HOME_DIR, '{.,packages/*}/README.md'))
readmes.forEach(readme => {
let fileData = readFileSync(readme).toString()
fileData = fileData.replace(/<!--icons-count-->(.*?)<!--\/icons-count-->/, `<!--icons-count-->${count}<!--/icons-count-->`)
writeFileSync(readme, fileData)
})

20
.build/zip-files.mjs Normal file
View File

@ -0,0 +1,20 @@
import Zip from 'adm-zip'
import { getPackageJson, HOME_DIR } from './helpers.mjs'
import { resolve } from 'path'
const p = getPackageJson()
const zip = new Zip()
zip.addLocalFile(resolve(HOME_DIR, `.github/og.png`), '.', 'tabler-icons.png')
zip.addLocalFolder(resolve(HOME_DIR, `packages/icons/icons/`), 'svg')
zip.addLocalFolder(resolve(HOME_DIR, `packages/icons-png/icons/`), 'png')
zip.addLocalFolder(resolve(HOME_DIR, `packages/icons-pdf/icons/`), 'pdf')
zip.addLocalFolder(resolve(HOME_DIR, `packages/icons-eps/icons/`), 'eps')
zip.addLocalFolder(resolve(HOME_DIR, `packages/icons-webfont/fonts`), 'webfont/fonts')
zip.addLocalFile(resolve(HOME_DIR, `packages/icons-webfont/tabler-icons.html`), 'webfont')
zip.addLocalFile(resolve(HOME_DIR, `packages/icons-webfont/tabler-icons.scss`), 'webfont')
zip.addLocalFile(resolve(HOME_DIR, `packages/icons-webfont/tabler-icons.css`), 'webfont')
zip.addLocalFile(resolve(HOME_DIR, `packages/icons-webfont/tabler-icons.min.css`), 'webfont')
zip.writeZip(resolve(HOME_DIR, `packages-zip/tabler-icons-${p.version}.zip`));

BIN
.github/icons-dark.png vendored

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.5 MiB

After

Width:  |  Height:  |  Size: 1.5 MiB

11760
.github/icons-dark.svg vendored

File diff suppressed because it is too large Load Diff

Before

Width:  |  Height:  |  Size: 1.6 MiB

After

Width:  |  Height:  |  Size: 1.5 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.7 MiB

After

Width:  |  Height:  |  Size: 3.7 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.0 KiB

After

Width:  |  Height:  |  Size: 20 KiB

View File

@ -1,19 +1,37 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 914 38" width="914" height="38" style="color: #ffffff"><rect x="0" y="0" width="914" height="38" fill="transparent"></rect>
<symbol id="icon-.5" class="icon icon-tabler icon-tabler-disabled" viewBox="0 0 24 24" stroke-width=".5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="11" cy="5" r="2" /><polyline points="11 7 11 15 15 15 19 20" /><line x1="11" y1="11" x2="16" y2="11" /><path d="M7 11.5a5 5 0 1 0 6 7.5" />
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 830 62" width="830" height="62" style="color: #ffffff"><rect x="0" y="0" width="830" height="62" fill="transparent"></rect>
<symbol id="icon-.25" class="icon icon-tabler icon-tabler-ghost" viewBox="0 0 24 24" stroke-width=".25" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7m5 -1l.01 0m3.99 0l.01 0m-4.01 4a3.5 3.5 0 0 0 4 0" />
</symbol>
<symbol id="icon-1" class="icon icon-tabler icon-tabler-disabled" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="11" cy="5" r="2" /><polyline points="11 7 11 15 15 15 19 20" /><line x1="11" y1="11" x2="16" y2="11" /><path d="M7 11.5a5 5 0 1 0 6 7.5" />
<symbol id="icon-.5" class="icon icon-tabler icon-tabler-ghost" viewBox="0 0 24 24" stroke-width=".5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7m5 -1l.01 0m3.99 0l.01 0m-4.01 4a3.5 3.5 0 0 0 4 0" />
</symbol>
<symbol id="icon-1.5" class="icon icon-tabler icon-tabler-disabled" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="11" cy="5" r="2" /><polyline points="11 7 11 15 15 15 19 20" /><line x1="11" y1="11" x2="16" y2="11" /><path d="M7 11.5a5 5 0 1 0 6 7.5" />
<symbol id="icon-.75" class="icon icon-tabler icon-tabler-ghost" viewBox="0 0 24 24" stroke-width=".75" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7m5 -1l.01 0m3.99 0l.01 0m-4.01 4a3.5 3.5 0 0 0 4 0" />
</symbol>
<symbol id="icon-2" class="icon icon-tabler icon-tabler-disabled" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="11" cy="5" r="2" /><polyline points="11 7 11 15 15 15 19 20" /><line x1="11" y1="11" x2="16" y2="11" /><path d="M7 11.5a5 5 0 1 0 6 7.5" />
<symbol id="icon-1" class="icon icon-tabler icon-tabler-ghost" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7m5 -1l.01 0m3.99 0l.01 0m-4.01 4a3.5 3.5 0 0 0 4 0" />
</symbol>
<symbol id="icon-2.75" class="icon icon-tabler icon-tabler-disabled" viewBox="0 0 24 24" stroke-width="2.75" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="11" cy="5" r="2" /><polyline points="11 7 11 15 15 15 19 20" /><line x1="11" y1="11" x2="16" y2="11" /><path d="M7 11.5a5 5 0 1 0 6 7.5" />
<symbol id="icon-1.25" class="icon icon-tabler icon-tabler-ghost" viewBox="0 0 24 24" stroke-width="1.25" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7m5 -1l.01 0m3.99 0l.01 0m-4.01 4a3.5 3.5 0 0 0 4 0" />
</symbol>
<symbol id="icon-1.5" class="icon icon-tabler icon-tabler-ghost" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7m5 -1l.01 0m3.99 0l.01 0m-4.01 4a3.5 3.5 0 0 0 4 0" />
</symbol>
<symbol id="icon-1.75" class="icon icon-tabler icon-tabler-ghost" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7m5 -1l.01 0m3.99 0l.01 0m-4.01 4a3.5 3.5 0 0 0 4 0" />
</symbol>
<symbol id="icon-2" class="icon icon-tabler icon-tabler-ghost" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7m5 -1l.01 0m3.99 0l.01 0m-4.01 4a3.5 3.5 0 0 0 4 0" />
</symbol>
<symbol id="icon-2.25" class="icon icon-tabler icon-tabler-ghost" viewBox="0 0 24 24" stroke-width="2.25" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7m5 -1l.01 0m3.99 0l.01 0m-4.01 4a3.5 3.5 0 0 0 4 0" />
</symbol>
<symbol id="icon-2.5" class="icon icon-tabler icon-tabler-ghost" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7m5 -1l.01 0m3.99 0l.01 0m-4.01 4a3.5 3.5 0 0 0 4 0" />
</symbol>
<symbol id="icon-2.25" class="icon icon-tabler icon-tabler-ghost" viewBox="0 0 24 24" stroke-width="2.25" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7m5 -1l.01 0m3.99 0l.01 0m-4.01 4a3.5 3.5 0 0 0 4 0" />
</symbol>
<use xlink:href="#icon-.5" x="3" y="3" width="32" height="32" />
<use xlink:href="#icon-1" x="51" y="3" width="32" height="32" />
<use xlink:href="#icon-1.5" x="99" y="3" width="32" height="32" />
<use xlink:href="#icon-2" x="147" y="3" width="32" height="32" />
<use xlink:href="#icon-2.75" x="195" y="3" width="32" height="32" />
<use xlink:href="#icon-.25" x="3" y="3" width="56" height="56" />
<use xlink:href="#icon-.5" x="75" y="3" width="56" height="56" />
<use xlink:href="#icon-.75" x="147" y="3" width="56" height="56" />
<use xlink:href="#icon-1" x="219" y="3" width="56" height="56" />
<use xlink:href="#icon-1.25" x="291" y="3" width="56" height="56" />
<use xlink:href="#icon-1.5" x="363" y="3" width="56" height="56" />
<use xlink:href="#icon-1.75" x="435" y="3" width="56" height="56" />
<use xlink:href="#icon-2" x="507" y="3" width="56" height="56" />
<use xlink:href="#icon-2.25" x="579" y="3" width="56" height="56" />
<use xlink:href="#icon-2.5" x="651" y="3" width="56" height="56" />
<use xlink:href="#icon-2.25" x="723" y="3" width="56" height="56" />
</svg>

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 5.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 46 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.1 KiB

After

Width:  |  Height:  |  Size: 29 KiB

View File

@ -1,19 +1,37 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 914 38" width="914" height="38" style="color: #354052"><rect x="0" y="0" width="914" height="38" fill="#fff"></rect>
<symbol id="icon-.5" class="icon icon-tabler icon-tabler-disabled" viewBox="0 0 24 24" stroke-width=".5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="11" cy="5" r="2" /><polyline points="11 7 11 15 15 15 19 20" /><line x1="11" y1="11" x2="16" y2="11" /><path d="M7 11.5a5 5 0 1 0 6 7.5" />
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 830 62" width="830" height="62" style="color: #354052"><rect x="0" y="0" width="830" height="62" fill="#fff"></rect>
<symbol id="icon-.25" class="icon icon-tabler icon-tabler-ghost" viewBox="0 0 24 24" stroke-width=".25" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7m5 -1l.01 0m3.99 0l.01 0m-4.01 4a3.5 3.5 0 0 0 4 0" />
</symbol>
<symbol id="icon-1" class="icon icon-tabler icon-tabler-disabled" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="11" cy="5" r="2" /><polyline points="11 7 11 15 15 15 19 20" /><line x1="11" y1="11" x2="16" y2="11" /><path d="M7 11.5a5 5 0 1 0 6 7.5" />
<symbol id="icon-.5" class="icon icon-tabler icon-tabler-ghost" viewBox="0 0 24 24" stroke-width=".5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7m5 -1l.01 0m3.99 0l.01 0m-4.01 4a3.5 3.5 0 0 0 4 0" />
</symbol>
<symbol id="icon-1.5" class="icon icon-tabler icon-tabler-disabled" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="11" cy="5" r="2" /><polyline points="11 7 11 15 15 15 19 20" /><line x1="11" y1="11" x2="16" y2="11" /><path d="M7 11.5a5 5 0 1 0 6 7.5" />
<symbol id="icon-.75" class="icon icon-tabler icon-tabler-ghost" viewBox="0 0 24 24" stroke-width=".75" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7m5 -1l.01 0m3.99 0l.01 0m-4.01 4a3.5 3.5 0 0 0 4 0" />
</symbol>
<symbol id="icon-2" class="icon icon-tabler icon-tabler-disabled" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="11" cy="5" r="2" /><polyline points="11 7 11 15 15 15 19 20" /><line x1="11" y1="11" x2="16" y2="11" /><path d="M7 11.5a5 5 0 1 0 6 7.5" />
<symbol id="icon-1" class="icon icon-tabler icon-tabler-ghost" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7m5 -1l.01 0m3.99 0l.01 0m-4.01 4a3.5 3.5 0 0 0 4 0" />
</symbol>
<symbol id="icon-2.75" class="icon icon-tabler icon-tabler-disabled" viewBox="0 0 24 24" stroke-width="2.75" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="11" cy="5" r="2" /><polyline points="11 7 11 15 15 15 19 20" /><line x1="11" y1="11" x2="16" y2="11" /><path d="M7 11.5a5 5 0 1 0 6 7.5" />
<symbol id="icon-1.25" class="icon icon-tabler icon-tabler-ghost" viewBox="0 0 24 24" stroke-width="1.25" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7m5 -1l.01 0m3.99 0l.01 0m-4.01 4a3.5 3.5 0 0 0 4 0" />
</symbol>
<symbol id="icon-1.5" class="icon icon-tabler icon-tabler-ghost" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7m5 -1l.01 0m3.99 0l.01 0m-4.01 4a3.5 3.5 0 0 0 4 0" />
</symbol>
<symbol id="icon-1.75" class="icon icon-tabler icon-tabler-ghost" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7m5 -1l.01 0m3.99 0l.01 0m-4.01 4a3.5 3.5 0 0 0 4 0" />
</symbol>
<symbol id="icon-2" class="icon icon-tabler icon-tabler-ghost" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7m5 -1l.01 0m3.99 0l.01 0m-4.01 4a3.5 3.5 0 0 0 4 0" />
</symbol>
<symbol id="icon-2.25" class="icon icon-tabler icon-tabler-ghost" viewBox="0 0 24 24" stroke-width="2.25" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7m5 -1l.01 0m3.99 0l.01 0m-4.01 4a3.5 3.5 0 0 0 4 0" />
</symbol>
<symbol id="icon-2.5" class="icon icon-tabler icon-tabler-ghost" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7m5 -1l.01 0m3.99 0l.01 0m-4.01 4a3.5 3.5 0 0 0 4 0" />
</symbol>
<symbol id="icon-2.25" class="icon icon-tabler icon-tabler-ghost" viewBox="0 0 24 24" stroke-width="2.25" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7m5 -1l.01 0m3.99 0l.01 0m-4.01 4a3.5 3.5 0 0 0 4 0" />
</symbol>
<use xlink:href="#icon-.5" x="3" y="3" width="32" height="32" />
<use xlink:href="#icon-1" x="51" y="3" width="32" height="32" />
<use xlink:href="#icon-1.5" x="99" y="3" width="32" height="32" />
<use xlink:href="#icon-2" x="147" y="3" width="32" height="32" />
<use xlink:href="#icon-2.75" x="195" y="3" width="32" height="32" />
<use xlink:href="#icon-.25" x="3" y="3" width="56" height="56" />
<use xlink:href="#icon-.5" x="75" y="3" width="56" height="56" />
<use xlink:href="#icon-.75" x="147" y="3" width="56" height="56" />
<use xlink:href="#icon-1" x="219" y="3" width="56" height="56" />
<use xlink:href="#icon-1.25" x="291" y="3" width="56" height="56" />
<use xlink:href="#icon-1.5" x="363" y="3" width="56" height="56" />
<use xlink:href="#icon-1.75" x="435" y="3" width="56" height="56" />
<use xlink:href="#icon-2" x="507" y="3" width="56" height="56" />
<use xlink:href="#icon-2.25" x="579" y="3" width="56" height="56" />
<use xlink:href="#icon-2.5" x="651" y="3" width="56" height="56" />
<use xlink:href="#icon-2.25" x="723" y="3" width="56" height="56" />
</svg>

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 5.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 64 KiB

BIN
.github/icons.png vendored

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.2 MiB

After

Width:  |  Height:  |  Size: 2.2 MiB

11760
.github/icons.svg vendored

File diff suppressed because it is too large Load Diff

Before

Width:  |  Height:  |  Size: 1.6 MiB

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
.github/icons@2x.png vendored

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.0 MiB

After

Width:  |  Height:  |  Size: 5.0 MiB

17
.gitignore vendored
View File

@ -1,10 +1,9 @@
.idea/*
_site/
node_modules/
.idea
_site
node_modules
.jekyll-cache/
package-lock.json
Gemfile.lock
packages/*
packages-zip/*
.DS_Store
icons-outlined/
@ -23,3 +22,13 @@ dist/
_import.tsv
.yarn
.yarnrc.yml
packages/icons*/icons/*
packages/icons*/src/icons/*
packages/icons*/src/icons.js
packages/icons*/LICENSE
packages/icons*/stats/*
packages/icons*/icons/*
.turbo
.sass-cache

View File

@ -3,18 +3,13 @@
</p>
<p align="center">
A set of <!--icons-count-->3128<!--/icons-count--> free MIT-licensed high-quality SVG icons for you to use in your web projects. Each icon is designed on a 24x24 grid and a 2px stroke.
A set of <!--icons-count-->3204<!--/icons-count--> free MIT-licensed high-quality SVG icons for you to use in your web projects. Each icon is designed on a 24x24 grid and a 2px stroke.
<p>
<p align="center">
<a href="https://tabler-icons.io/"><strong>Browse at tabler-icons.io &rarr;</strong></a>
</p>
<p align="center">
<a href="https://github.com/tabler/tabler-icons/releases"><img src="https://img.shields.io/npm/v/@tabler/icons" alt="Latest Release"></a>
<a href="https://github.com/tabler/tabler-icons/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/@tabler/icons.svg" alt="License"></a>
</p>
## Sponsors

View File

@ -1,3 +1,19 @@
module.exports = {
presets: ["@babel/preset-env", "@babel/preset-react"]
};
presets: ['@babel/env'],
env: {
test: {
presets: ['@babel/env'],
plugins: ['@babel/plugin-transform-runtime']
},
dev: {
plugins: [
[
'transform-inline-environment-variables',
{
include: ['NODE_ENV']
}
]
]
}
}
}

View File

@ -1,935 +0,0 @@
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'),
{ optimize } = require('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
const compileOptions = {
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}`
}
}
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)
await new Promise((resolve, reject) => {
cp.exec(`rsvg-convert -h 240 ${filePath} > ${destination}`, (error, stdout, stderr) => {
error ? reject() : resolve()
})
})
}
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')}`)
}
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) {
str += `\`${icon}\``
if ((i + 1) <= newIcons.length - 1) {
str += ', '
}
})
console.log(str)
}
console.log('')
}
if (modifiedIcons.length > 0) {
let str = ''
str += `Fixed icons: `
modifiedIcons.forEach(function(icon, i) {
str += `\`${icon}\``
if ((i + 1) <= modifiedIcons.length - 1) {
str += ', '
}
})
console.log(str)
console.log('')
}
if (renamedIcons.length > 0) {
console.log(`Renamed icons: `)
renamedIcons.forEach(function(icon, i) {
console.log(`- \`${icon[0]}\` renamed to \`${icon[1]}\``)
})
}
}
const generateIconsPreview = function(files, destFile, cb, {
columnsCount = 19,
paddingOuter = 7,
color = '#354052',
background = '#fff'
} = {}) {
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
let svgContentSymbols = '',
svgContentIcons = '',
x = paddingOuter,
y = paddingOuter
files.forEach(function(file, i) {
let name = path.basename(file, '.svg')
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, '')
svgContentSymbols += `\t${svgFileContent}\n`
svgContentIcons += `\t<use xlink:href="#${name}" x="${x}" y="${y}" width="${iconSize}" height="${iconSize}" />\n`
x += 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: ${color}"><rect x="0" y="0" width="${width}" height="${height}" fill="${background}"></rect>\n${svgContentSymbols}\n${svgContentIcons}\n</svg>`
fs.writeFileSync(destFile, svgContent)
createScreenshot(destFile)
cb()
}
//*********************************************************************************************
gulp.task('iconfont-prepare', (cb) => {
cp.exec('mkdir -p icons-outlined/ && rm -fd ./icons-outlined/* && mkdir -p && rm -fd ./iconfont/*', () => {
cb()
})
})
gulp.task('iconfont-clean', (cb) => {
cp.exec('rm -rf ./icons-outlined', () => {
cb()
})
})
gulp.task('iconfont-svg-outline', (cb) => {
cp.exec('mkdir -p icons-outlined/ && rm -fd ./icons-outlined/*', async () => {
let files = glob.sync('./icons/*.svg')
const iconfontUnicode = require('./tags.json')
await asyncForEach(files, async function(file) {
const name = path.basename(file, '.svg')
if (compileOptions.includeIcons.length === 0 || compileOptions.includeIcons.indexOf(name) >= 0) {
const unicode = iconfontUnicode[name].unicode
await console.log('Stroke for:', file, unicode)
let strokedSVG = fs.readFileSync(file).toString()
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}"`)
}
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()
})
})
gulp.task('iconfont-optimize', () => {
return gulp.src('icons-outlined/*').pipe(svgo()).pipe(gulp.dest('icons-outlined'))
})
gulp.task('iconfont-fix-outline', (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', () => {
return gulp.src(['icons-outlined/*.svg']).pipe(iconfont({
fontName: 'tabler-icons',
prependUnicode: true,
formats: ['ttf', 'eot', 'woff', 'woff2', 'svg'],
normalize: true,
fontHeight: 1000,
descent: 100,
ascent: 986.5
})).on('glyphs', function(glyphs, options) {
//sort glypht
glyphs = glyphs.sort(function(a, b) {
return ('' + a.name).localeCompare(b.name)
})
//css
options['glyphs'] = glyphs
options['v'] = p.version
const compiled = template(fs.readFileSync('.build/iconfont.scss').toString())
const result = compiled(options)
fs.writeFileSync('iconfont/tabler-icons.scss', result)
//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'))
})
gulp.task('iconfont-css', (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)
cb()
})
})
const getMaxUnicode = () => {
const path = 'src/_icons/*.svg'
const files = glob.sync(path)
let maxUnicode = 0
files.forEach(function(file) {
const svgFile = fs.readFileSync(file).toString()
svgFile.replace(/unicode: "([a-f0-9.]+)"/i, function(m, unicode) {
const newUnicode = parseInt(unicode, 16)
if (newUnicode) {
maxUnicode = Math.max(maxUnicode, newUnicode)
}
})
})
return maxUnicode
}
gulp.task('update-icons-unicode', (cb) => {
let maxUnicode = getMaxUnicode()
glob('./src/_icons/*.svg', {}, function(er, files) {
for (const i in files) {
const file = files[i]
let svgFile = fs.readFileSync(file).toString()
if (!svgFile.match(/\nunicode: "?([a-f0-9.]+)"?/i)) {
maxUnicode++
const unicode = maxUnicode.toString(16)
if (unicode) {
svgFile = svgFile.replace(/---\n<svg>/i, function(m) {
return `unicode: "${unicode}"\n${m}`
})
console.log(`Add unicode "${unicode}" to "${file}"`)
fs.writeFileSync(file, svgFile)
}
} else {
console.log(`File ${file} already has unicode`)
}
}
cb()
})
})
gulp.task('build-iconfont',
gulp.series('iconfont-prepare', 'iconfont-svg-outline', 'iconfont-fix-outline', 'iconfont-optimize', 'iconfont', 'iconfont-css', 'iconfont-clean'))
gulp.task('build-zip', () => {
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'))
})
gulp.task('build-jekyll', (cb) => {
const jekyll = cp.spawn('bundle', ['exec', 'jekyll', 'build'], {
stdio: 'inherit',
env: {
...process.env,
JEKYLL_ENV: 'production'
}
})
jekyll.on('close', function(code) {
console.log(`Jekyll build exited with code ${code}`)
if (!code) {
cb()
}
})
})
gulp.task('build-copy', (cb) => {
cp.exec('mkdir -p icons/ && rm -fd ./icons/* && cp ./_site/icons/* ./icons && cp ./_site/tags.json .', () => {
cb()
})
})
gulp.task('clean-png', (cb) => {
cp.exec('rm -fd ./icons-png/*', () => {
cb()
})
})
gulp.task('icons-sprite', (cb) => {
glob('_site/icons/*.svg', {}, function(er, files) {
let svgContent = ''
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()
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>`
fs.writeFileSync('tabler-sprite.svg', svg)
fs.writeFileSync('tabler-sprite-nostroke.svg', svg.replace(/stroke-width="2"\s/g, ''))
cb()
})
})
gulp.task('icons-preview', (cb) => {
glob('icons/*.svg', {}, function(er, files) {
generateIconsPreview(files, '.github/icons.svg', cb)
generateIconsPreview(files, '.github/icons-dark.svg', cb, {
color: '#ffffff',
background: 'transparent'
})
})
})
gulp.task('icons-stroke', gulp.series((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
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, '')
svgContentSymbols += `\t${svgFileContentStroked}\n`
svgContentIcons += `\t<use xlink:href="#icon-${stroke}" x="${x}" y="${paddingOuter}" width="${iconSize}" height="${iconSize}" />\n`
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 svgContentDark = `<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: #ffffff"><rect x="0" y="0" width="${width}" height="${height}" fill="transparent"></rect>\n${svgContentSymbols}\n${svgContentIcons}\n</svg>`
fs.writeFileSync('.github/icons-stroke.svg', svgContent)
fs.writeFileSync('.github/icons-stroke-dark.svg', svgContentDark)
createScreenshot('.github/icons-stroke.svg')
createScreenshot('.github/icons-stroke-dark.svg')
cb()
}))
gulp.task('optimize', (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|ellipse)>/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|ellipse)/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(/<line x1="([^"]+)" y1="([^"]+)" x2="([^"]+)" y2="([^"]+)"\s*\/>/g, function(f, x1, y1, x2, y2) {
// return `<path d="M${x1} ${y1}L${x2} ${y2}" />`
// })
// .replace(/<circle cx="([^"]+)" cy="([^"]+)" r="([^"]+)"\s+\/>/g, function(f, cx, cy, r) {
// return `<path d="M ${cx} ${cy}m -${r}, 0a ${r},${r} 0 1,0 ${r * 2},0a ${r},${r} 0 1,0 ${r * -2},0" />`
// })
// .replace(/<ellipse cx="([^"]+)" cy="([^"]+)" rx="([^"]+)" ry="([^"]+)"\s+\/>/g, function(f, rx, cx, ry, cy) {
// return `<path d="M ${cx - rx} ${cy}a${rx}, ${ry} 0 1,0 ${rx * 2},0a ${rx},${ry} 0 1,0 -${rx * 2},0" />`
// })
// .replace(/(?<=M[^"]+)"\s+\/>[\n\s\t]+<path d="M/g, function() {
// return `M`
// })
.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', (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(/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])
})
modifiedIcons = modifiedIcons.filter(function(el) {
return newIcons.indexOf(el) < 0
})
printChangelog(newIcons, modifiedIcons, renamedIcons)
cb()
})
})
gulp.task('changelog', (cb) => {
const version = `v${p.version}`
if (version) {
cp.exec(`git diff ${version} HEAD --name-status`, function(err, ret) {
let newIcons = [], modifiedIcons = [], renamedIcons = []
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(/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
})
printChangelog(newIcons, modifiedIcons, renamedIcons, true)
cb()
})
}
})
gulp.task('changelog-image', (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) {
let newIcons = []
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`
})
if (newIcons.length > 0) {
generateIconsPreview(newIcons, `.github/tabler-icons-${newVersion}.svg`, cb, {
columnsCount: 6,
paddingOuter: 24
})
} else {
cb()
}
})
} else {
cb()
}
})
gulp.task('svg-to-png', gulp.series('clean-png', async (cb) => {
let files = glob.sync('./icons/*.svg')
await asyncForEach(files, async function(file, i) {
let name = path.basename(file, '.svg')
console.log('name', name)
await svgToPng(file, `icons-png/${name}.png`)
})
cb()
}))
gulp.task('clean-react', (cb) => {
cp.exec('rm -fd ./icons-react/* && mkdir icons-react/icons-js', () => {
cb()
})
})
gulp.task('svg-to-react', gulp.series('clean-react', async (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\ntype TablerIconProps = Omit<SVGAttributes<SVGElement>, 'color' | 'stroke'> & {\n color?: SVGAttributes<SVGElement>['stroke'];\n size?: SVGAttributes<SVGElement>['width'];\n stroke?: SVGAttributes<SVGElement>['strokeWidth'];\n}\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]
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}`
})
fs.writeFileSync(`src/_icons/${file}.svg`, svgFile)
} else {
console.log(`File ${file} already has version`)
}
} else {
console.log(`File ${file} doesn't exists`)
}
}
}
gulp.task('update-icons-version', (cb) => {
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) {
let newIcons = []
ret.replace(/src\/_icons\/([a-z0-9-]+)\.svg/g, function(m, fileName) {
newIcons.push(fileName)
})
if (newIcons.length) {
setVersions(newVersion.replace(/\.0$/, ''), newIcons)
}
})
}
cb()
})
gulp.task('import-categories', (cb) => {
let files = glob.sync('./src/_icons/*-off.svg')
files.forEach(function(file, i) {
const fileOriginal = file.replace(/\-off.svg$/, '.svg')
if (fs.existsSync(fileOriginal)) {
const dataOriginal = fs.readFileSync(fileOriginal).toString()
const categoryOriginal = dataOriginal.match(/category: ([a-zA-Z-]+)/),
tagsOriginal = dataOriginal.match(/tags: (\[.*?\])/)
if (categoryOriginal || tagsOriginal) {
let data = fs.readFileSync(file).toString()
data = data.replace(/(---[\s\S]+?---)/, function(m, headerContent) {
console.log('categoryOriginal', fileOriginal, categoryOriginal && categoryOriginal[1], tagsOriginal && tagsOriginal[1])
if (categoryOriginal) {
headerContent = headerContent.replace(/category: .*\n/, '')
headerContent = headerContent.replace(/---/, `---\ncategory: ${categoryOriginal[1]}`)
}
if (tagsOriginal) {
headerContent = headerContent.replace(/tags: .*\n/, '')
headerContent = headerContent.replace(/---/, `---\ntags: ${tagsOriginal[1]}`)
}
return headerContent
})
fs.writeFileSync(file, data)
}
}
})
cb()
})
gulp.task('import-tags', (cb) => {
fs.createReadStream('./_import.tsv').pipe(csv({
headers: false,
separator: '\t'
})).on('data', (row) => {
console.log(row[1], row[2])
const filename = `src/_icons/${row[1]}.svg`
if(row[2].length) {
let data = fs.readFileSync(filename).toString()
data = data.replace(/(---[\s\S]+?---)/, function(m, headerContent) {
headerContent = headerContent.replace(/tags: .*\n/, '')
headerContent = headerContent.replace(/---/, `---\ntags: [${row[2]}]`)
return headerContent
})
fs.writeFileSync(filename, data)
}
}).on('end', () => {
console.log('CSV file successfully processed')
})
cb()
})
gulp.task('update-readme', (cb) => {
let fileData = fs.readFileSync('README.md').toString(),
count = glob.sync('./icons/*.svg').length
fileData = fileData.replace(/<!--icons-count-->(.*?)<!--\/icons-count-->/, `<!--icons-count-->${count}<!--/icons-count-->`)
fs.writeFileSync('README.md', fileData)
cb()
})
gulp.task('build-react', (cb) => {
cp.exec('npm run build-react', () => {
cb()
})
})
gulp.task('build',
gulp.series('optimize', 'update-icons-version', 'update-icons-unicode', 'build-jekyll', 'build-copy', 'icons-sprite', 'svg-to-react', 'build-react',
'icons-preview', 'svg-to-png', 'build-iconfont', 'changelog-image', 'build-zip', 'update-readme'))
const optimizeSVG = (data) => {
return optimize(data, {
js2svg: {
indent: 2,
pretty: true
},
plugins: [
{
name: 'preset-default',
params: {
overrides: {
mergePaths: false
}
}
}]
}).data
}
gulp.task('import', gulp.series((cb) => {
if (fs.existsSync('./new/Artboard.svg')) {
fs.unlinkSync('rm ./new/Artboard.svg')
}
const files = glob.sync('./new/*.svg')
files.forEach(function(file, i) {
let fileData = fs.readFileSync(file).toString(),
filename = path.basename(file, '.svg')
console.log(filename)
fileData = optimizeSVG(fileData)
if (fileData.match(/transform="/)) {
throw new Error(`File ${file} has \`transform\` in code!!`)
}
if (filename.match(/\s/)) {
throw new Error(`File ${file} has space in name!!`)
}
fileData = fileData.replace(/---/g, '')
.replace(/fill="none"/g, '')
.replace(/fill="#D8D8D8"/gi, '')
.replace(/fill-rule="evenodd"/g, '')
.replace(/stroke-linecap="round"/g, '')
.replace(/stroke-linejoin="round"/g, '')
.replace(/viewBox="0 0 24 24"/g, '')
.replace(/stroke="#000000"/g, '')
.replace(/stroke="#000"/g, '')
.replace(/stroke-width="2"/g, '')
.replace(/width="24"/g, '')
.replace(/width="24px"/g, '')
.replace(/height="24"/g, '')
.replace(/height="24px"/g, '')
.replace(/xmlns="http:\/\/www.w3.org\/2000\/svg"/g, '')
.replace(/<path d="M0 0h24v24H0z"\/>"/g, '')
.replace(/<path stroke="red" stroke-width=".1" d="[^"]+"\s?\/>/g, '')
.replace(/<path[^>]*stroke="red"[^>]*\/>/gs, '')
.replace(/<circle[^>]*stroke="red"[^>]*\/>/gs, '')
.replace(/<g[^>]*stroke="red"[^>]*>.*?<\/g>/gs, '')
fileData = optimizeSVG(fileData)
fileData = fileData.replace(/<svg>/g, '---\n---\n<svg>')
if (fs.existsSync(`./src/_icons/${filename}.svg`)) {
const newFileData = fs.readFileSync(`./src/_icons/${filename}.svg`).toString()
const m = newFileData.match(/(---.*---)/gms)
if (m) {
fileData = fileData.replace('---\n---', m[0])
}
}
fs.writeFileSync(`./src/_icons/${filename}.svg`, fileData)
})
cb()
}, 'optimize'))

Binary file not shown.

File diff suppressed because it is too large Load Diff

Before

Width:  |  Height:  |  Size: 6.0 MiB

Binary file not shown.

Binary file not shown.

Binary file not shown.

File diff suppressed because one or more lines are too long

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.1 KiB

Some files were not shown because too many files have changed in this diff Show More