SVG icons to font generator

Based on webfonts-loader plugin to convert your SVG icons to font

Requirements

• css-loader
• mini-css-extract-plugin
• style-loader
• webfonts-loader
• webpack
• webpack-cli

Get started

1. install all dependencies by running: npm install --save-dev css-loader mini-css-extract-plugin style-loader webfonts-loader webpack webpack-cli
2. install package itself npm install --save-dev textmagic-svg-to-font
3. add webpack config. Example config:

const path = require('path');

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const config = require('./config.font.js')

module.exports = {
  entry: [
    './entry.js'
  ],
  output: {
    path: path.resolve(__dirname, config.dest),
    publicPath: '/',
    filename: 'app.bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.font\.js/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'webfonts-loader',
        ],
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: config.fontName + '.css',
      chunkFilename: config.fontName + '.css',
    }),
  ],
};

4. run ./node_modules/.bin/tm-convert-icons

Configuration

You can create your own config and it would be merged to default settings. Just create custom.fonts.js in your root folder

Full documetation here

Example

module.exports = {
  files: [
    "./pictures/*.svg" // Path to folder with SVG icons
  ],
  dest: './dist', // where to put fonts
  htmlDest: './dist/index.html', //where to put HTML preview
  fontName: "Textmagic-icons-3.0",
  classPrefix: "tmi30", // The prefix to be used with each icon class
  baseSelector: ".tmi30", // The base CSS selector, under which each icon class is to be created
  types: ["eot", "woff", "woff2", "ttf", "svg"],
  fixedWidth: true,
  fileName: "[fontname].[ext]",
  cssTemplate: "./node_modules/textmagic-svg-to-font/templates/style.hbs", // Path to default Style template
  html: true,
  htmlTemplate: "./node_modules/textmagic-svg-to-font/templates/html.hbs",
  writeFiles: true,
}