0.0.2 • Published 6 years ago
svg2fontpack v0.0.2
my nodejs versions
v6.9.5
Using from CLI
Install:
npm install svg2fontpack
Usage example:
node <your script file>
Examples
const svg2fontpack = require('svg2fontpack');
new svg2fontpack({
entry: './svg', //svg file catalog, this is a must.
prefix: 'icon', //icon font prefix, can be null, default 'icon'.
name: 'iconFont', //icon font name, can be null, default 'iconFont'.
HTMLTemplate: '', //HTML template, can be null, You can also provide it yourself.
CSSTemplate: '', //CSS template, can be null, You can also provide it yourself.
HTMLOutput: './build', //HTML output path, can be null, default use fontOutput.
CSSOutput: './build/css', //CSS output path, can be null, default use fontOutput.
fontOutput: './build/font', //font output path, this is a must.
});
CSSTemplate
You can customize it for yourself CSS template, The following is the key code.
@font-face {
font-family: "{{fontName}}";
src: url("{{eot}}"); /* IE9 Compat Modes */
src: url("{{eot}}?#iefix") format("embedded-opentype"), /* IE6-IE8 */
url("{{woff}}") format("woff"), /* Modern Browsers */
url("{{ttf}}") format("truetype"), /* Safari, Android, iOS */
url("{{svg}}#{{fontName}}") format("svg"); /* Legacy iOS */
}
[class*="{{prefix}}"]:before {
font-family: "{{fontName}}";
font-style: normal;
font-weight: normal;
vertical-align: top;
}
{{each}}
.{{iconName}}:before {
content: "\{{unicode}}";
}
{{/each}}
HTMLTemplate
You can customize it for yourself HTML template, The following is the key code.
<head>
<link rel="stylesheet" href="{{href}}"></link>
</head>
<body>
{{each}}
<i class="{{iconName}}"></i>
{{/each}}
</body>