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:
``javascript
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
`javascript
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,
}
``