mirror_html/tabler-icons
1
0
Fork 0
mirror of https://github.com/tabler/tabler-icons.git synced 2025-08-16 11:04:18 +02:00
Code Issues Releases Wiki Activity

optimize icons process

Browse Source
This commit is contained in:
codecalm
2022-09-21 21:56:58 +02:00
parent fa2cd2483a
commit 62193ce81d
1 changed files with 93 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
gulpfile.js
View File

@@ -185,10 +185,10 @@ const generateIconsPreview = function(files, destFile, cb, columnsCount = 19, pa
let svgFile = fs.readFileSync(file), let svgFile = fs.readFileSync(file),
svgFileContent = svgFile.toString() svgFileContent = svgFile.toString()
svgFileContent = svgFileContent.replace('<svg xmlns="http://www.w3.org/2000/svg"', `<symbol id="${name}"`). svgFileContent = svgFileContent.replace('<svg xmlns="http://www.w3.org/2000/svg"', `<symbol id="${name}"`)
replace(' width="24" height="24"', ''). .replace(' width="24" height="24"', '')
replace('</svg>', '</symbol>'). .replace('</svg>', '</symbol>')
replace(/\n\s+/g, '') .replace(/\n\s+/g, '')
svgContentSymbols += `\t${svgFileContent}\n` svgContentSymbols += `\t${svgFileContent}\n`
svgContentIcons += `\t<use xlink:href="#${name}" x="${x}" y="${y}" width="${iconSize}" height="${iconSize}" />\n` svgContentIcons += `\t<use xlink:href="#${name}" x="${x}" y="${y}" width="${iconSize}" height="${iconSize}" />\n`
@@ -387,13 +387,19 @@ gulp.task('build-iconfont',
gulp.task('build-zip', () => { gulp.task('build-zip', () => {
const version = p.version const version = p.version
return gulp.src('{icons/**/*,icons-png/**/*,icons-react/**/*,iconfont/**/*,tabler-sprite.svg,tabler-sprite-nostroke.svg}'). return gulp.src('{icons/**/*,icons-png/**/*,icons-react/**/*,iconfont/**/*,tabler-sprite.svg,tabler-sprite-nostroke.svg}')
pipe(zip(`tabler-icons-${version}.zip`)). .pipe(zip(`tabler-icons-${version}.zip`))
pipe(gulp.dest('packages-zip')) .pipe(gulp.dest('packages-zip'))
}) })
gulp.task('build-jekyll', (cb) => { gulp.task('build-jekyll', (cb) => {
const jekyll = cp.spawn('bundle', ['exec', 'jekyll', 'build'], { stdio: 'inherit' }) const jekyll = cp.spawn('bundle', ['exec', 'jekyll', 'build'], {
stdio: 'inherit',
env: {
...process.env,
JEKYLL_ENV: 'production'
}
})
jekyll.on('close', function(code) { jekyll.on('close', function(code) {
console.log(`Jekyll build exited with code ${code}`) console.log(`Jekyll build exited with code ${code}`)
if (!code) { if (!code) {
@@ -459,11 +465,11 @@ gulp.task('icons-stroke', gulp.series('build-jekyll', (cb) => {
x = paddingOuter x = paddingOuter
strokes.forEach(function(stroke) { strokes.forEach(function(stroke) {
let svgFileContentStroked = svgFileContent.replace('<svg xmlns="http://www.w3.org/2000/svg"', `<symbol id="icon-${stroke}"`). let svgFileContentStroked = svgFileContent.replace('<svg xmlns="http://www.w3.org/2000/svg"', `<symbol id="icon-${stroke}"`)
replace(' width="24" height="24"', ''). .replace(' width="24" height="24"', '')
replace(' stroke-width="2"', ` stroke-width="${stroke}"`). .replace(' stroke-width="2"', ` stroke-width="${stroke}"`)
replace('</svg>', '</symbol>'). .replace('</svg>', '</symbol>')
replace(/\n\s+/g, '') .replace(/\n\s+/g, '')
svgContentSymbols += `\t${svgFileContentStroked}\n` svgContentSymbols += `\t${svgFileContentStroked}\n`
svgContentIcons += `\t<use xlink:href="#icon-${stroke}" x="${x}" y="${paddingOuter}" width="${iconSize}" height="${iconSize}" />\n` svgContentIcons += `\t<use xlink:href="#icon-${stroke}" x="${x}" y="${paddingOuter}" width="${iconSize}" height="${iconSize}" />\n`
@@ -497,29 +503,43 @@ gulp.task('optimize', (cb) => {
let svgFile = fs.readFileSync(file), let svgFile = fs.readFileSync(file),
svgFileContent = svgFile.toString() svgFileContent = svgFile.toString()
svgFileContent = svgFileContent.replace(/><\/(polyline|line|rect|circle|path)>/g, '/>'). svgFileContent = svgFileContent.replace(/><\/(polyline|line|rect|circle|path|ellipse)>/g, '/>')
replace(/rx="([^"]+)"\s+ry="\1"/g, 'rx="$1"'). .replace(/rx="([^"]+)"\s+ry="\1"/g, 'rx="$1"')
replace(/<path stroke="red" stroke-width="\.1"([^>]+)?\/>/g, ''). .replace(/<path stroke="red" stroke-width="\.1"([^>]+)?\/>/g, '')
replace(/\s?\/>/g, ' />'). .replace(/\s?\/>/g, ' />')
replace(/\n\s*<(line|circle|path|polyline|rect)/g, '\n <$1'). .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(/polyline points="([0-9.]+)\s([0-9.]+)\s([0-9.]+)\s([0-9.]+)"/g, 'line x1="$1" y1="$2" x2="$3" y2="$4"')
replace(/<path d="([^"]+)"/g, function(f, r1) { .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) r1 = optimizePath(r1)
return `<path d="${r1}"` return `<path d="${r1}"`
}). })
replace(/d="m/g, 'd="M'). .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(/([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(/\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.]*)l\s?([-0-9.]*) ([-0-9.]*)"/g, function(f, r1, r2, r3, 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="${addFloats(r1, r3)}" y2="${addFloats(r2, r4)}"`
return `<line x1="${r1}" y1="${r2}" x2="${r1}" y2="${addFloats(r2, r3)}"` // }).
}). // replace(/<path d="M([0-9.]*) ([0-9.]*)v\s?([-0-9.]*)"/g, function(f, r1, 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="${r1}" y2="${addFloats(r2, r3)}"`
return `<line x1="${r1}" y1="${r2}" x2="${addFloats(r1, r3)}" y2="${r2}"` // }).
}). // 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) { 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') r1 = r1.replace(/ -0\./g, ' -.').replace(/ 0\./g, ' .').replace(/\s([a-z])/gi, '$1').replace(/([a-z])\s/gi, '$1')
return `<path d="${r1}"` return `<path d="${r1}"`
@@ -793,7 +813,7 @@ gulp.task('update-readme', (cb) => {
let fileData = fs.readFileSync('README.md').toString(), let fileData = fs.readFileSync('README.md').toString(),
count = glob.sync('./icons/*.svg').length count = glob.sync('./icons/*.svg').length
fileData = fileData.replace(/<!--icons-count-->(.*?)<!--\/icons-count-->/, `<!--icons-count-->${count}<!--/icons-count-->`); fileData = fileData.replace(/<!--icons-count-->(.*?)<!--\/icons-count-->/, `<!--icons-count-->${count}<!--/icons-count-->`)
fs.writeFileSync('README.md', fileData) fs.writeFileSync('README.md', fileData)
@@ -814,16 +834,17 @@ const optimizeSVG = (data) => {
return optimize(data, { return optimize(data, {
js2svg: { js2svg: {
indent: 2, indent: 2,
pretty: true, pretty: true
}, },
plugins: [{ plugins: [
{
name: 'preset-default', name: 'preset-default',
params: { params: {
overrides: { overrides: {
mergePaths: false, mergePaths: true
}, }
}, }
},] }]
}).data }).data
} }
@@ -838,16 +859,15 @@ gulp.task('import', gulp.series((cb) => {
let fileData = fs.readFileSync(file).toString(), let fileData = fs.readFileSync(file).toString(),
filename = path.basename(file, '.svg') filename = path.basename(file, '.svg')
console.log(filename); console.log(filename)
fileData = optimizeSVG(fileData); fileData = optimizeSVG(fileData)
if(fileData.match(/transform="/)) { if (fileData.match(/transform="/)) {
throw new Error(`File ${file} has \`transform\` in code!!`); throw new Error(`File ${file} has \`transform\` in code!!`)
} }
fileData = fileData fileData = fileData.replace(/---/g, '')
.replace(/---/g, '')
.replace(/fill="none"/g, '') .replace(/fill="none"/g, '')
.replace(/fill="#D8D8D8"/gi, '') .replace(/fill="#D8D8D8"/gi, '')
.replace(/fill-rule="evenodd"/g, '') .replace(/fill-rule="evenodd"/g, '')
@@ -868,16 +888,15 @@ gulp.task('import', gulp.series((cb) => {
.replace(/<circle[^>]*stroke="red"[^>]*\/>/gs, '') .replace(/<circle[^>]*stroke="red"[^>]*\/>/gs, '')
.replace(/<g[^>]*stroke="red"[^>]*>.*?<\/g>/gs, '') .replace(/<g[^>]*stroke="red"[^>]*>.*?<\/g>/gs, '')
fileData = optimizeSVG(fileData); fileData = optimizeSVG(fileData)
fileData = fileData fileData = fileData.replace(/<svg>/g, '---\n---\n<svg>')
.replace(/<svg>/g, '---\n---\n<svg>')
if(fs.existsSync(`./src/_icons/${filename}.svg`)) { if (fs.existsSync(`./src/_icons/${filename}.svg`)) {
const newFileData = fs.readFileSync(`./src/_icons/${filename}.svg`).toString(); const newFileData = fs.readFileSync(`./src/_icons/${filename}.svg`).toString()
const m = newFileData.match(/(---.*---)/gms) const m = newFileData.match(/(---.*---)/gms)
if(m) { if (m) {
fileData = fileData.replace('---\n---', m[0]) fileData = fileData.replace('---\n---', m[0])
} }
} }