README
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
- install all dependencies by running:
npm install --save-dev css-loader mini-css-extract-plugin style-loader webfonts-loader webpack webpack-cli
- install package itself
npm install --save-dev textmagic-svg-to-font
- 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',
}),
],
};
- 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,
}