SVG Font Conjurer

A powerful and flexible tool to transform your SVG icons into a webfont, generating all the necessary formats (TTF, WOFF, WOFF2, SVG) and accompanying CSS/SCSS files.

Features

• Multiple Font Formats: Generates TTF, WOFF, WOFF2, and SVG font files.
• CSS & SCSS Generation: Automatically creates CSS and SCSS files with ready-to-use classes and mixins.
• Live Example: Generates an HTML example page to preview your new icon font.
• Base64 Exports: Option to export the font as a Base64 string for embedding in your CSS.
• Customizable: Extensive options to control file paths, font names, and generated CSS/SCSS.
• Optimized SVGs: Can optimize SVGs before converting them to a font.

Installation

Install the package using npm:

npm install --save svg-font-conjurer

Usage

Here's a basic example of how to use SVG Font Conjurer in your project:

import { svgFontConjurer } from 'svg-font-conjurer';
import { resolve } from 'node:path';

const __dirname = resolve(); // optional

svgFontConjurer({
  fontName: 'my-icon-font',
  icons: [
    { name: 'icon-one', svg: 'icon-one-source-file' },
    {
      name: 'icon-two',
      svg: 'icon-two-source-file',
      altNames: ['alias-one', 'alias-two']
    }
  ],
  routes: {
    icons: resolve(__dirname, 'src/icons'),
    fonts: resolve(__dirname, 'dist/fonts'),
    scss: {
      path: resolve(__dirname, 'dist/scss')
    },
    example: resolve(__dirname, 'dist/example')
  },
  cb: () => {
    console.log('Font generation complete!');
  }
});

Options

| Option | Type | Default | Description | | --------------------- | ---------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | fontName | string | 'icon-font' | The name of your font and the generated files. | | icons | array | [] | An array of icon objects. Each object requires a name (for the CSS class) and an svg (the filename without the .svg extension). You can also provide an array of altNames for additional class names. | | routes | object | {...} | An object defining the input and output paths for your files. See the default routes for all available options. | | createExample | boolean | true | If true, an HTML example file will be generated. | | createFormatSvg | boolean | true | If true, an SVG font file will be generated. | | createFormatTtf | boolean | true | If true, a TTF font file will be generated. | | createFormatWoff | boolean | true | If true, a WOFF font file will be generated. | | createFormatWoff2 | boolean | true | If true, a WOFF2 font file will be generated. | | createBase64Exports | boolean | false | If true, a JavaScript file with the font encoded in Base64 will be generated. | | classIcon | string | 'icon' | The base class name for your icons in the generated CSS/SCSS. | | cb | function | () => true | A callback function that will be executed after the font generation is complete. | | __dirname | string | | The root directory of your project. It's recommended to use path.resolve() to get the absolute path. |

routes Object

The routes object allows you to customize the directory structure for your generated files. Here are the default values:

{
  icons: 'src/icons',
  fonts: 'dist/fonts',
  css: {
    path: 'dist/css'
  },
  scss: {
    path: 'dist/scss',
    name: {
      variables: 'variables',
      mixinItem: 'mixin-item',
      mixinUnicode: 'mixin-unicode',
      list: 'list'
    }
  },
  example: 'dist/example'
}

File Structure

When you run svgFontConjurer, it will generate a set of files in the directories you've specified in the routes option. Here's an example of the output:

dist/
├── css/
│   └── my-icon-font.css
├── example/
│   ├── my-icon-font.css
│   ├── my-icon-font.html
│   └── my-icon-font.scss
├── fonts/
│   ├── my-icon-font.svg
│   ├── my-icon-font.ttf
│   ├── my-icon-font.woff
│   └── my-icon-font.woff2
└── scss/
    ├── _variables.scss
    ├── _mixin-item.scss
    ├── _mixin-unicode.scss
    └── _list.scss

Contributing

Contributions are welcome! Please open an issue or submit a pull request if you have any improvements or bug fixes.

License

This project is licensed under the Apache 2.0 License.