@getkist/action-fantasticon

Icon font generation action for kist build tool using Fantasticon.

Features

• Multiple Font Formats - Generate WOFF2, WOFF, TTF, EOT, and SVG fonts
• Stylesheet Generation - Automatic CSS and SCSS generation
• TypeScript Support - Optional TypeScript types for icon names
• SVG Normalization - Automatic icon name normalization
• HTML Demo - Optional HTML demo file generation
• Configuration - Highly customizable via options

Installation

npm install --save-dev @getkist/action-fantasticon kist fantasticon

Usage

Basic Configuration

Add to your kist.yml:

stages:
  - name: Build
    steps:
      - name: generate-icon-fonts
        action: FantasticonAction
        options:
          inputDir: ./src/icons
          outputDir: ./dist/fonts
          fontName: my-icons

Advanced Configuration

stages:
  - name: Build
    steps:
      - name: generate-icon-fonts
        action: FantasticonAction
        options:
          inputDir: ./src/svg
          outputDir: ./dist/font
          fontName: icon-gl
          classPrefix: i
          formats:
            - woff2
            - woff
            - ttf
          typescript: true
          scss: true
          css: true
          html: false
          normalize: true

Options

Required

• inputDir string - Source directory containing SVG files

• outputDir string - Output directory for generated fonts and stylesheets

Optional

• fontName string - Name for the generated fonts (default: icon-font)

• classPrefix string - CSS class prefix (default: icon)

• formats array - Font formats to generate (default: ["woff2", "woff"])

  • Options: woff2, woff, ttf, eot, svg

• typescript boolean - Generate TypeScript type definitions (default: true)

• scss boolean - Generate SCSS stylesheet (default: true)

• css boolean - Generate CSS stylesheet (default: true)

• html boolean - Generate HTML demo file (default: false)

• normalize boolean - Normalize SVG icon names (default: true)

• config object - Additional Fantasticon configuration options

Output Files

When executed, FantasticonAction generates:

dist/font/
├── icon-gl.woff2
├── icon-gl.woff
├── icon-gl.ttf
├── icon-gl.eot
├── icon-gl.svg
├── icon-gl.css
├── icon-gl.scss
├── icon-gl.json
└── icon-gl.ts (if typescript: true)

Integration with icon.gl

Example kist.yml for icon.gl project:

stages:
  - name: Generate Assets
    steps:
      - name: generate-fonts
        action: FantasticonAction
        options:
          inputDir: ./src/svg
          outputDir: ./dist/font
          fontName: icon-gl
          classPrefix: i
          formats: [woff2, woff, ttf]
          typescript: true
          scss: true

Development

# Install dependencies
npm install

# Build
npm run build

# Watch mode
npm run build:watch

# Test
npm run test

# Lint
npm run lint

# Format code
npm run format

License

MIT - See LICENSE file for details

Contributing

Contributions are welcome! Please file issues and submit pull requests on GitHub.