diff options
| -rw-r--r-- | README.md | 29 | ||||
| -rw-r--r-- | gulpfile.js | 17 | ||||
| -rw-r--r-- | package.json | 9 |
3 files changed, 52 insertions, 3 deletions
@@ -127,6 +127,35 @@ To load a specific version replace `latest` with the desired version number. <script src="https://unpkg.com/@tabler/icons@1.36.0/icons-react/dist/index.umd.js"></script> ``` +Compiling fonts: + +To compile fonts first install [fontforge](https://fontforge.org/en-US/) + +the fontforge executable needs to be in the path or you can set set the path to the downloaded fontforge executable in the package.json. If you installed in on a mac in your application directory it will be: +```JSON + "compileFonts": { + "fontForge":"/Applications/FontForge.app/Contents/MacOS/FontForge" + } +``` +To compile the fonts run: + npm run build-iconfont + +By default the stroke width is 2. You can change the stroke width by setting the package property: + +```JSON + "compileFonts": { + "strokeWidth":"1.5", + } +``` + +To reduce the font file size you can choose to compile a sub set of icons. When you leave the array empty it will compile all the fonts. For example: + +```JSON + "includeIcons": { + "include":["alert-octagon","alert-triangle"] + } +``` + ### Svelte You can use [`tabler-icons-svelte`](https://github.com/benflap/tabler-icons-svelte) to use icons in your Svelte projects (see [example](https://svelte.dev/repl/e80dc63d7019431692b10a77525e7f99?version=3.31.0)): diff --git a/gulpfile.js b/gulpfile.js index 9f541ab7..5d57298d 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -191,6 +191,7 @@ gulp.task('iconfont-clean', function (cb) { cb(); }); }); +const includeIcons=typeof p.compileFonts=='object'? p.compileFonts.include:[]; gulp.task('iconfont-svg-outline', function (cb) { @@ -204,7 +205,11 @@ gulp.task('iconfont-svg-outline', function (cb) { } await asyncForEach(files, async function (file) { - const name = path.basename(file, '.svg'), + + const name = path.basename(file, '.svg'); + + if (!Array.isArray( includeIcons) || includeIcons.length==0 || includeIcons.indexOf(name)>=0) { + unicode = iconfontUnicode[name]; await console.log('Stroke for:', file, unicode); @@ -214,6 +219,8 @@ gulp.task('iconfont-svg-outline', function (cb) { strokedSVG = strokedSVG .replace('width="24"', 'width="1000"') .replace('height="24"', 'height="1000"'); + if (typeof p.compileFonts=='object' && typeof p.compileFonts.strokeWidth=="string") + strokedSVG = strokedSVG.replace('stroke-width="2"', `stroke-width="${p.compileFonts.strokeWidth}"`); await outlineStroke(strokedSVG, { optCurve: false, @@ -229,6 +236,8 @@ gulp.task('iconfont-svg-outline', function (cb) { fs.writeFileSync(`icons-outlined/${name}.svg`, outlined); } }).catch(error => console.log(error)); + } + }); cb(); @@ -242,8 +251,12 @@ gulp.task('iconfont-optimize', function() { }); gulp.task('iconfont-fix-outline', function(cb) { + var fontForge= 'fontforge'; + if (typeof p.compileFonts=='object' && typeof p.compileFonts.fontForge=='string') + fontForge=p.compileFonts.fontForge; + // correct svg outline directions in a child process using fontforge - const generate = cp.spawn("fontforge", ["-lang=py", "-script", "./fix-outline.py"], { stdio: 'inherit' }); + 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) { diff --git a/package.json b/package.json index 56f9c6cf..d8ff5c53 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,9 @@ "prebuild-react": "rm -rf ./icons-react/dist/", "build-react": "rollup -c", "optimize": "gulp optimize", - "release": "release-it" + "release": "release-it", + "build": "gulp build", + "build-iconfont": "gulp build-iconfont" }, "description": "A set of free MIT-licensed high-quality SVG icons for you to use in your web projects.", "keywords": [ @@ -99,5 +101,10 @@ "peerDependencies": { "react": "^16.13.1", "react-dom": "^16.13.1" + }, + "compileFonts": { + "include":[], + "strokeWidth":"2", + "fontForge":"fontforge" } } |