Version 2.0! (#439)
|
|
@ -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)
|
||||
}
|
||||
|
|
@ -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)
|
||||
})
|
||||
|
|
@ -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
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
@ -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)
|
||||
})
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
@ -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')
|
||||
})
|
||||
|
|
@ -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)
|
||||
})
|
||||
|
|
@ -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)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
|
@ -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'
|
||||
})
|
||||
})
|
||||
|
|
@ -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')
|
||||
|
|
@ -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;
|
||||
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
@ -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)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
@ -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)
|
||||
})
|
||||
|
||||
|
||||
|
|
@ -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`));
|
||||
|
Before Width: | Height: | Size: 1.5 MiB After Width: | Height: | Size: 1.5 MiB |
|
Before Width: | Height: | Size: 1.6 MiB After Width: | Height: | Size: 1.5 MiB |
|
Before Width: | Height: | Size: 3.7 MiB After Width: | Height: | Size: 3.7 MiB |
|
Before Width: | Height: | Size: 6.0 KiB After Width: | Height: | Size: 20 KiB |
|
|
@ -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 |
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 46 KiB |
|
Before Width: | Height: | Size: 9.1 KiB After Width: | Height: | Size: 29 KiB |
|
|
@ -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 |
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 64 KiB |
|
Before Width: | Height: | Size: 2.2 MiB After Width: | Height: | Size: 2.2 MiB |
|
Before Width: | Height: | Size: 1.6 MiB After Width: | Height: | Size: 1.5 MiB |
|
Before Width: | Height: | Size: 5.0 MiB After Width: | Height: | Size: 5.0 MiB |
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 →</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
|
||||
|
||||
|
|
|
|||
|
|
@ -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']
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
935
gulpfile.js
|
|
@ -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'))
|
||||
|
Before Width: | Height: | Size: 6.0 MiB |
|
Before Width: | Height: | Size: 2.6 KiB |
|
Before Width: | Height: | Size: 4.2 KiB |
|
Before Width: | Height: | Size: 3.1 KiB |
|
Before Width: | Height: | Size: 4.6 KiB |
|
Before Width: | Height: | Size: 3.4 KiB |
|
Before Width: | Height: | Size: 3.3 KiB |
|
Before Width: | Height: | Size: 3.4 KiB |
|
Before Width: | Height: | Size: 3.6 KiB |
|
Before Width: | Height: | Size: 4.9 KiB |
|
Before Width: | Height: | Size: 3.4 KiB |
|
Before Width: | Height: | Size: 2.7 KiB |
|
Before Width: | Height: | Size: 2.8 KiB |
|
Before Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 3.2 KiB |
|
Before Width: | Height: | Size: 4.3 KiB |
|
Before Width: | Height: | Size: 4.6 KiB |
|
Before Width: | Height: | Size: 6.0 KiB |
|
Before Width: | Height: | Size: 5.8 KiB |
|
Before Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 3.5 KiB |
BIN
icons-png/ad.png
|
Before Width: | Height: | Size: 3.3 KiB |
|
Before Width: | Height: | Size: 3.4 KiB |
|
Before Width: | Height: | Size: 3.5 KiB |
|
Before Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 3.4 KiB |
|
Before Width: | Height: | Size: 3.7 KiB |
|
Before Width: | Height: | Size: 3.6 KiB |
|
Before Width: | Height: | Size: 3.4 KiB |
|
Before Width: | Height: | Size: 4.4 KiB |
|
Before Width: | Height: | Size: 5.3 KiB |
|
Before Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 3.3 KiB |
|
Before Width: | Height: | Size: 4.7 KiB |
|
Before Width: | Height: | Size: 4.8 KiB |
|
Before Width: | Height: | Size: 4.9 KiB |
|
Before Width: | Height: | Size: 4.9 KiB |
|
Before Width: | Height: | Size: 4.8 KiB |
|
Before Width: | Height: | Size: 3.1 KiB |
|
Before Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 5.0 KiB |
|
Before Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 4.1 KiB |
|
Before Width: | Height: | Size: 5.3 KiB |
|
Before Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 2.5 KiB |
|
Before Width: | Height: | Size: 2.5 KiB |
|
Before Width: | Height: | Size: 2.5 KiB |
|
Before Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 4.1 KiB |