My Way to Build Custom Tabler Icons (and a Script to Help You!)

[saaiful]

My Way to Build Custom Tabler Icons (and a Script to Help You!)

Hello everyone! I want to share my story about building custom Tabler Icons. Maybe it helps you too. The full Tabler Icons font is big, around ~2MB. For my project, I only needed some icons, not all.

The Problem: Build Failed!

So, I made a list of icons I needed. I went to the Tabler Icons GitHub page and tried to build my own font using their instructions. But, surprise! It did not work. The build failed.

Finding Solutions: GitHub Issues and Pull Requests

I started to look for solutions. I checked the Issues section on the Tabler Icons GitHub. Many people had problems, especially trying to make smaller font files with only the icons they need. I also looked at Pull Requests. Here, people shared fixes and changes. I read a lot and found some good ideas. It was like finding pieces of a puzzle.

Success! My Custom Font

After trying different things I found, I finally did it! I built a custom Tabler Icons font with only my chosen icons. The font file was much smaller now! This was great.

Making it Easy: My Bash Script

I thought, "Next time, I don't want to do all this searching and fixing again." So, I wrote a bash script. This script does all the hard parts for me. It helps make the custom Tabler Icons font much easier.

How to Use My Script for Your Tabler Icons

I will share my bash script with you in this post. Here is how you can use it on your Linux server:

• Save my script on your server. You will see it below.
• Run the script. It will automatically clone the official Tabler Icons repository from GitHub. Install all the things (dependencies) Tabler Icons needs to build.
• Upload your compile-options.json file into the Tabler Icons folder. This is an important file. You list all the Tabler Icons you want in this file. The script will tell you where to put this file in the cloned Tabler Icons folder.
• Build your font! Go into the Tabler Icons folder and run the command: npm run build:webfont. This will use your compile-options.json and build your special, small icon font.

#!/usr/bin/env bash

# Install dependencies
sudo apt-get install git fontforge
npm install -g pnpm@latest-10

# Clone and setup the repository
git clone https://github.com/tabler/tabler-icons.git
cd tabler-icons
pnpm install

# Reset aliases.json to an empty object with outline and filled properties
echo "Resetting aliases.json to an empty object with outline and filled properties..."
echo '{"outline":{},"filled":{}}' > aliases.json
echo "aliases.json has been updated successfully."

# Fix Python Issue in fix-outline.py
PYTHON_FILE="packages/icons-webfont/.build/fix-outline.py"
echo "Checking if Python file needs import sys..."
if ! grep -q "import sys" "$PYTHON_FILE"; then
  echo "Adding 'import sys' to Python file..."
  sed -i '1s/^/import sys\n/' "$PYTHON_FILE"
  echo "Python file has been updated successfully."
else
  echo "Python file already contains import sys."
fi

# Fix build file helpers.mjs
BUILD_FILE=".build/helpers.mjs"
echo "Fixing path in build file..."
sed -i "s/'..\/compile-options.json'/'..\/..\/compile-options.json'/g" "$BUILD_FILE"
echo "Build file has been updated successfully."

echo "Add compile-options.json to the root directory."
echo "Run 'npm run build:webfont' to build the webfont."

I am happy to show and tell this. I hope my script and my story help you if you want to make your own custom Tabler Icons font. It is very useful to have only the icons you need and make your project faster. Let me know if you try it!