Files

T

Initial commit: Flaticon UIcons package with local font build system

Add 50,000+ icon font package sourced from Flaticon API with local
webfonts and interactive icon explorer.

Features:
- 50,492 icons across 15 style variations (weight × corner)
- Self-hosted webfonts (TTF, WOFF, WOFF2)
- Interactive icon explorer with search and filters
- FontForge-based build pipeline for generating fonts from SVGs
- Drop-in CSS with class-based icon usage

Build scripts:
- scripts/build-font.py - Standalone FontForge Python script
- build-fonts.js - Node.js orchestrator for font generation
- update-icon-list.js - Fetch icon metadata from Flaticon API
- build-icons-js.js - Generate browser-ready icon dataset

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Co-Authored-By: Z.ai GLM 4.7 <noreply@z.ai>

2026-01-24 10:58:23 +08:00

3.0 KiB

Raw Blame History

CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

Project Overview

This is @invisi/flaticon-uicons, a local web-compatible icon font package with 50,492+ icons across 15 style variations (stroke weights × corner styles). Icons are sourced from Flaticon's public API and converted to webfonts using FontForge.

The output is a drop-in CSS font system - users link fonts/flaticon.css and use class names like fi-rs-bookmark to display icons.

Development Commands

# Fetch latest icon metadata from Flaticon API (writes to data/all_icons.json)
npm run update:icons
# or: node update-icon-list.js

# Convert JSON to browser-ready JS (writes to data/all_icons.js)
npm run build:icons
# or: node build-icons-js.js

# Generate webfonts from SVGs using FontForge
npm run build:fonts
# or: node build-fonts.js

Font build options:

--prefix rs,rr - Build only specific prefixes (comma-separated)
--clean - Apply FontForge cleanup (remove overlap, simplify)
--outputDir ./path - Custom output directory
--css ./custom.css - Custom CSS output path

Icon Naming Convention

fi-{stroke}{corner}-{icon-name}

Stroke codes: r (Regular), b (Bold), s (Solid/filled), t (Thin), d (Duotone) Corner codes: s (Straight), r (Rounded), c (Chubby) Special: fi-brands- for brand logos

Examples: fi-rs-bookmark, fi-br-home, fi-brands-instagram

Architecture

Data Pipeline

update-icon-list.js - Fetches icon metadata from Flaticon API with pagination (117 pages). Rate-limited (100ms delay). Outputs data/all_icons.json (~53MB).
build-icons-js.js - Converts JSON to window.FLATICON_ICONS global for browser use in explorer (~5.7MB).
build-fonts.js - Node.js orchestrator that calls FontForge via scripts/build-font.py to convert SVGs → TTF → WOFF/WOFF2. Generates CSS with @font-face rules and content-based icon classes.
scripts/build-font.py - Standalone FontForge Python script for building a single font variant.

Source Directories

svgs/{prefix}/ - Raw SVG files organized by prefix (rs, rr, bs, etc.)
data/ - API responses and processed icon data (gitignored)
fonts/webfonts/ - Generated font files
fonts/css/ - Individual CSS files per prefix
scripts/ - Build scripts (Python for FontForge)

Key Files

fonts/flaticon.css - Unified CSS importing all font-face definitions
explorer.html + explorer.js + explorer.css - Interactive icon browser with search/filter
index.js - Module exports for npm distribution

Build Requirements

Node.js for data processing
Python with FontForge CLI for font generation
SVG files must exist in svgs/{prefix}/ before building fonts

Unicode Codepoints

Each prefix starts at 0xE001 and increments sequentially. Codepoints are assigned per-prefix, not globally unique.

Icon Explorer

Open explorer.html in a browser to search, filter by style, and copy HTML snippets. Uses data/all_icons.js as its data source.

3.0 KiB Raw Blame History Unescape Escape