Build Process & Configuration

This project is a toolchain designed to convert a directory of SVG icons into a complete icon font package. Understanding the build process and configuration is key for contributors.

Toolchain

The build process relies on several key Node.js tools:

• SVGO: An SVG optimization tool used to clean and standardize the source SVG files.
• Fantasticon: A font generator that takes the optimized SVGs and compiles them into a .ttf font file, along with CSS and an HTML preview.
• svg-sprite: A tool to generate an SVG sprite sheet as an alternative to the font file.
• Opentype.js: A parser and writer for OpenType and TrueType fonts, used here to generate a CSV mapping from the final .ttf file.

Configuration Deep Dive

Fantasticon Configuration (.fantasticonrc.js)

This file controls the core font generation process. It exports a configuration object that tells fantasticon what to do.

{
    name: 'codicon', // The name of the font
    prefix: 'codicon', // The CSS class prefix
    codepoints: codepoints, // Path to mapping.json for icon codepoints
    inputDir: inputDir, // 'src/icons'
    outputDir: outputDir, // 'dist'
    fontTypes: ['ttf'], // We only generate TTF
    normalize: true, // Ensures icons have a consistent height
    assetTypes: ['css', 'html'], // Generate CSS and the preview HTML
    templates: {
        html: templateHtml, // 'src/template/preview.hbs'
        css: templateCss // 'src/template/styles.hbs'
    },
    formatOptions: { // Metadata for the TTF file
        ttf: {
            url: pkg.url,
            description: pkg.description,
            version: pkg.fontVersion
        }
    }
}

SVGO Configuration (svgo.config.js)

This file ensures all source SVG icons are consistent before being passed to the font generator. The configuration is critical for enabling theme support (e.g., changing icon colors with CSS).

module.exports = {
    plugins: [
        {
            name: 'removeAttrs',
            params: {
                attrs: 'fill' // Removes any hardcoded 'fill' color from the SVGs
            }
        },
        {
            name: 'addAttributesToSVGElement',
            params: {
                attributes: [
                    {
                        fill: 'currentColor' // Adds 'fill="currentColor"', allowing color to be set by CSS
                    }
                ]
            }
        }
    ]
}

Custom Build Scripts

In addition to the main tools, several custom Node.js scripts in the scripts/ directory handle specific parts of the asset generation:

• reset.js: Cleans the dist/ output directory before a build.
• svg-sprite.js: Reads all icons from src/icons and uses the svg-sprite package to compile them into a single dist/codicon.svg file.
• export-to-ts.js: Parses src/template/mapping.json and generates a TypeScript file (dist/codiconsLibrary.ts) that exports an object containing all icon names and their corresponding hex codepoints. This allows for type-safe, programmatic use of the icons.
• export-to-csv.js: Uses opentype.js to read the final dist/codicon.ttf font file and extracts the glyph mappings into a dist/codicon.csv file.
• version-bump.js: A helper script to automate version increments in package.json for both the package and the font itself.