mimosa-svgs-to-iconfonts
Overview
Usage
Add 'svgs-to-iconfonts'
to your list of modules. That's all! Mimosa will install the module for you when you start up.
Once this module has been added to your project, just execute mimosa iconfonts
to generate your fonts. This module comes with some default config (see below) and if your project matches that config, you won't have any other work to do.
Check this module out in the example application.
Functionality
This module will process the .svg
contents of specific folders and create .svg
, .woff
, .ttf
and .eot
font files. It will also generate a matching .css
file.
The CSS font classes are named for the name of the original .svg
file.
So, if you have a folder fonts/svgs/login
(see default config below), and inside that folder you have a submit.svg
and a cancel.svg
, this module will process those two .svg
s and create 4 files, login.svg|woff|ttf|eot
, and will create a stylesheet.css
. Inside the .css
will be icon styles named for the original .svg
, .submit
and .login
.
If you wish your styles to be .icon-submit
, simple change the name of the original .svg
file.
Default Config
svgs2iconfonts: inDir: "fonts/svgs" outDir: "fonts" options: fixedWidth: false normalize: false fontHeight: 512 descent: -32
inDir
: a string. The folder inside which are the folders of.svg
s to font-ify. So, insidefonts/svgs
, if there are two folders,abc
andxyz
, those folders contents would be considered a single font file output. This path is relative towatch.sourceDir
which defaults toassets
outDir
: Where to place generated font assets relative towatch.sourceDir
which defaults toassets
. For each folder insideinDir
a folder is created inside theoutDir
. So if there are two folders insidefonts/svgs
,abc
andxyz
, after processing theoutDir
would also have two folders namedabc
andxyz
and the font-ified assets will be inside including the.css
file.options.fixedWidth
: a boolean, creates a monospace font of the width of the largest input icon.options.normalize
: a boolean, normalize icons by scaling them to the height of the highest icon.options.fontHeight
: a number,options.descent
: a number, the font descent. It is useful to fix the font baseline yourself.