|  | 3 years ago | |
|---|---|---|
| .. | ||
| lib | 3 years ago | |
| node_modules | 3 years ago | |
| src | 3 years ago | |
| LICENSE | 3 years ago | |
| README.md | 3 years ago | |
| package.json | 3 years ago | |
		
			
				
				README.md
			
		
		
			
			
		
	
	Read a set of SVG icons and ouput a TTF/EOT/WOFF/WOFF2/SVG font, Generator of fonts from SVG icons.
Install · Usage · Command · Font Usage · API · options · npm · License
Features:
- Supported font formats: WOFF2,WOFF,EOT,TTFandSVG.
- Support SVG Symbol file.
- Support React&TypeScript.
- Support Less/Sass/Stylus.
- Allows to use custom templates (example css,lessand etc).
- Automatically generate a preview site.
                                ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
                                ┆      Project       ┆
                                ┆                    ┆
╭┈┈┈┈┈┈┈┈╮                      ┆   ╭┈┈┈┈┈┈┈┈┈┈┈╮    ┆
┆iconfont┆┈┈╮                   ┆   ┆    svg    ┆┈┈╮ ┆
╰┈┈┈┈┈┈┈┈╯  ┆  ╭┈┈┈┈┈┈┈┈┈┈┈┈╮   ┆   ╰┈┈┈┈┈┈┈┈┈┈┈╯  ┆ ┆
            ├┈▶┆download svg┆┈┈▶┆   ╭┈┈┈┈┈┈┈┈┈┈┈╮  ┆ ┆
╭┈┈┈┈┈┈┈┈╮  ┆  ╰┈┈┈┈┈┈┈┈┈┈┈┈╯   ┆╭┈┈┆create font┆◀┈╯ ┆
┆icomoon ┆┈┈╯                   ┆┆  ╰┈┈┈┈┈┈┈┈┈┈┈╯    ┆
╰┈┈┈┈┈┈┈┈╯                      ┆┆  ╭┈┈┈┈┈┈┈┈┈┈┈╮    ┆
                                ┆╰┈▶┆ use font  ┆    ┆
                                ┆   ╰┈┈┈┈┈┈┈┈┈┈┈╯    ┆
                                ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
Icon Font Created By svgtofont
- file-icons File icons in the file tree.
- uiw-iconfont The premium icon font for @uiwjs Component Library. Support React&TypeScript.
- Bootstrap Icons Font Official open source SVG icon library for Bootstrap.
- test example For a simple test example, run npm run testin the root directory to see the results.
Install
npm i svgtofont
Using With Command
{
  "scripts": {
    "font": "svgtofont --sources ./svg --output ./font --fontName uiw-font"
  },
  "svgtofont": {
    "css": {
      "fontSize": "12px"
    }
  }
}
You can add configuration to package.json. #48
Supports .svgtofontrc Configuration File.
{
  "fontName": "svgtofont",
  "css": true
}
Using With Nodejs
const svgtofont = require('svgtofont');
const path = require('path');
 
svgtofont({
  src: path.resolve(process.cwd(), 'icon'), // svg path
  dist: path.resolve(process.cwd(), 'fonts'), // output path
  fontName: 'svgtofont', // font name
  css: true, // Create CSS files.
}).then(() => {
  console.log('done!');
});
Or
const svgtofont = require("svgtofont");
const path = require("path");
svgtofont({
  src: path.resolve(process.cwd(), "icon"), // svg path
  dist: path.resolve(process.cwd(), "fonts"), // output path
  styleTemplates: path.resolve(rootPath, "styles"), // file templates path (optional)
  fontName: "svgtofont", // font name
  css: true, // Create CSS files.
  startUnicode: 0xea01, // unicode start number
  svgicons2svgfont: {
    fontHeight: 1000,
    normalize: true
  },
  // website = null, no demo html files
  website: {
    title: "svgtofont",
    // Must be a .svg format image.
    logo: path.resolve(process.cwd(), "svg", "git.svg"),
    version: pkg.version,
    meta: {
      description: "Converts SVG fonts to TTF/EOT/WOFF/WOFF2/SVG format.",
      keywords: "svgtofont,TTF,EOT,WOFF,WOFF2,SVG"
    },
    description: ``,
    // Add a Github corner to your website
    // Like: https://github.com/uiwjs/react-github-corners
    corners: {
      url: 'https://github.com/jaywcjlove/svgtofont',
      width: 62, // default: 60
      height: 62, // default: 60
      bgColor: '#dc3545' // default: '#151513'
    },
    links: [
      {
        title: "GitHub",
        url: "https://github.com/jaywcjlove/svgtofont"
      },
      {
        title: "Feedback",
        url: "https://github.com/jaywcjlove/svgtofont/issues"
      },
      {
        title: "Font Class",
        url: "index.html"
      },
      {
        title: "Unicode",
        url: "unicode.html"
      }
    ],
    footerInfo: `Licensed under MIT. (Yes it's free and <a href="https://github.com/jaywcjlove/svgtofont">open-sourced</a>`
  }
}).then(() => {
  console.log('done!');
});;
API
import { createSVG, createTTF, createEOT, createWOFF, createWOFF2, createSvgSymbol, copyTemplate, createHTML } from 'svgtofont/lib/utils';
const options = { ... };
async function creatFont() {
  const unicodeObject = await createSVG(options); 
  const ttf = await createTTF(options); // SVG Font => TTF
  await createEOT(options, ttf); // TTF => EOT
  await createWOFF(options, ttf); // TTF => WOFF
  await createWOFF2(options, ttf); // TTF => WOFF2
  await createSvgSymbol(options); // SVG Files => SVG Symbol
}
options
svgtofont(options)
log
Type:
Boolean
A value of false disables logging
logger
Type:
(msg) => void
log callback function
dist
Type:
String
Default value:=>distfonts
The output directory.
outSVGReact
Type:
Boolean
Default value:false
Output ./dist/react/, SVG generates react components.
git/git.svg
// ↓↓↓↓↓↓↓↓↓↓
import React from 'react';
export const Git = props => (
  <svg viewBox="0 0 20 20" {...props}><path d="M2.6 10.59L8.38 4.8l1.69 -." fillRule="evenodd" /></svg>
);
outSVGPath
Type:
Boolean
Default value:false
Output ./dist/svgtofont.json, The content is as follows:
{
  "adobe": ["M14.868 3H23v19L14.868 3zM1 3h8.138L1 22V3zm.182 11.997H13.79l-1.551-3.82H8.447z...."],
  "git": ["M2.6 10.59L8.38 4.8l1.69 1.7c-.24.85.15 1.78.93 2.23v5.54c-.6.34-1 .99-1..."],
  "stylelint": ["M129.74 243.648c28-100.109 27.188-100.5.816c2.65..."]
}
Or you can generate the file separately:
const { generateIconsSource } = require('svgtofont/src/generate');	
const path = require('path');	
async function generate () {	
  const outPath = await generateIconsSource({	
    src: path.resolve(process.cwd(), 'svg'),	
    dist: path.resolve(process.cwd(), 'dist'),	
    fontName: 'svgtofont',	
  });	
}	
generate();
generateInfoData
Type:
Boolean
Default value:false
Output ./dist/info.json, The content is as follows:
{
  "adobe": {
    "encodedCode": "\\ea01",
    "prefix": "svgtofont",
    "className": "svgtofont-adobe",
    "unicode": ""
  },
  ...
}
src
Type:
String
Default value:svg
output path
emptyDist
Type:
String
Default value:false
Clear output directory contents
fontName
Type:
String
Default value:iconfont
The font family name you want.
styleTemplates
Type:
StringDefault value:undefined
The path of the templates, see src/styles or test/templates/styles to get reference about
how to create a template, file names can have the extension .template, like a filename.scss.template
startUnicode
Type:
Number
Default value:0xea01
unicode start number
useNameAsUnicode
Type:
Boolean
Default value:false
should the name(file name) be used as unicode? this switch allows for the support of ligatures.
let's say you have an svg with a file name of add and you want to use ligatures for it. you would set up your processing as mentioned above and turn on this switch.
{
  ...
  useNameAsUnicode: true
}
while processing, instead of using a single sequential char for the unicode, it uses the file name. using the file name as the unicode allows the following code to work as expected.
.icons {
  font-family: 'your-font-icon-name' !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
<i class="icons">add</i>
as you add more svgs and process them into your font you would just use the same pattern.
<i class="icons">add</i>
<i class="icons">remove</i>
<i class="icons">edit</i>
classNamePrefix
Type:
String
Default value: font name
Create font class name prefix, default value font name.
css
Type:
Boolean|CSSOptions
Default value:false
Create CSS/LESS files, default true.
type CSSOptions = {
  /**
   * Output the css file to the specified directory
   */
  output?: string;
  /**
   * Which files are exported.
   */
  include?: RegExp;
  /**
   * Setting font size.
   */
  fontSize?: string;
  /**
   * Set the path in the css file
   * https://github.com/jaywcjlove/svgtofont/issues/48#issuecomment-739547189
   */
  cssPath?: string
  /**
   * Set file name
   * https://github.com/jaywcjlove/svgtofont/issues/48#issuecomment-739547189
   */
  fileName?: string
}
svgicons2svgfont
This is the setting for svgicons2svgfont
svgicons2svgfont.fontName
Type:
String
Default value:'iconfont'
The font family name you want.
svgicons2svgfont.fontId
Type:
String
Default value: the options.fontName value
The font id you want.
svgicons2svgfont.fontStyle
Type:
String
Default value:''
The font style you want.
svgicons2svgfont.fontWeight
Type:
String
Default value:''
The font weight you want.
svgicons2svgfont.fixedWidth
Type:
Boolean
Default value:false
Creates a monospace font of the width of the largest input icon.
svgicons2svgfont.centerHorizontally
Type:
Boolean
Default value:false
Calculate the bounds of a glyph and center it horizontally.
svgicons2svgfont.normalize
Type:
Boolean
Default value:false
Normalize icons by scaling them to the height of the highest icon.
svgicons2svgfont.fontHeight
Type:
Number
Default value:MAX(icons.height)
The outputted font height (defaults to the height of the highest input icon).
svgicons2svgfont.round
Type:
Number
Default value:10e12
Setup SVG path rounding.
svgicons2svgfont.descent
Type:
Number
Default value:0
The font descent. It is useful to fix the font baseline yourself.
Warning: The descent is a positive value!
svgicons2svgfont.ascent
Type:
Number
Default value:fontHeight - descent
The font ascent. Use this options only if you know what you're doing. A suitable value for this is computed for you.
svgicons2svgfont.metadata
Type:
String
Default value:undefined
The font metadata. You can set any character data in but it is the be suited place for a copyright mention.
svgicons2svgfont.log
Type:
Function
Default value:console.log
Allows you to provide your own logging function. Set to function(){} to
disable logging.
svgoOptions
Type:
OptimizeOptionsDefault value:undefined
Some options can be configured with svgoOptions though it. svgo
svg2ttf
This is the setting for svg2ttf
svg2ttf.copyright
Type:
String
copyright string
svg2ttf.ts
Type:
String
Unix timestamp (in seconds) to override creation time
svg2ttf.version
Type:
Number
font version string, can be Version x.y or x.y.
website
Define preview web content. Example:
{
  ...
  // website = null, no demo html files
  website: {
    title: "svgtofont",
    logo: path.resolve(process.cwd(), "svg", "git.svg"),
    version: pkg.version,
    meta: {
      description: "Converts SVG fonts to TTF/EOT/WOFF/WOFF2/SVG format.",
      keywords: "svgtofont,TTF,EOT,WOFF,WOFF2,SVG",
      favicon: "./favicon.png"
    },
    // Add a Github corner to your website
    // Like: https://github.com/uiwjs/react-github-corners
    corners: {
      url: 'https://github.com/jaywcjlove/svgtofont',
      width: 62, // default: 60
      height: 62, // default: 60
      bgColor: '#dc3545' // default: '#151513'
    },
    links: [
      {
        title: "GitHub",
        url: "https://github.com/jaywcjlove/svgtofont"
      },
      {
        title: "Feedback",
        url: "https://github.com/jaywcjlove/svgtofont/issues"
      },
      {
        title: "Font Class",
        url: "index.html"
      },
      {
        title: "Unicode",
        url: "unicode.html"
      }
    ]
  }
}
website.template
Type:
String
Default value: index.ejs
Custom template can customize parameters. You can define your own template based on the default template.
{
  website: {
    template: path.join(process.cwd(), "my-template.ejs")
  }
}
website.index
Type:
String
Default value:font-class, Enum{font-class,unicode,symbol}
Set default home page.
Font Usage
Suppose the font name is defined as svgtofont, The default home page is unicode, Will generate:
font-class.html
index.html
svgtofont.css
svgtofont.eot
svgtofont.json
svgtofont.less
svgtofont.module.less
svgtofont.scss
svgtofont.styl
svgtofont.svg
svgtofont.symbol.svg
svgtofont.ttf
svgtofont.woff
svgtofont.woff2
symbol.html
Preview demo font-class.html, symbol.html and index.html. Automatically generated style svgtofont.css and svgtofont.less.
symbol svg
<svg class="icon" aria-hidden="true">
  <use xlink:href="svgtofont.symbol.svg#svgtofont-git"></use>
</svg>
Unicode
<style>
.iconfont {
  font-family: "svgtofont-iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}
</style>
<span class="iconfont"></span>
Class Name
Support for .less and .css styles references.
<link rel="stylesheet" type="text/css" href="node_modules/fonts/svgtofont.css">
<i class="svgtofont-apple"></i>
Using With React
Icons are used as components. v3.16.7+ support.
import { Adobe, Alipay } from '@uiw/icons';
<Adobe style={{ fill: 'red' }} />
<Alipay height="36" />
In the project created by create-react-app
import logo from './logo.svg';
<img src={logo}  />
import { ReactComponent as ComLogo } from './logo.svg';
<ComLogo />
In the project created by webpack
yarn add babel-plugin-named-asset-import
yarn add @svgr/webpack
// webpack.config.js
[
  require.resolve('babel-plugin-named-asset-import'),
  {
    loaderMap: {
      svg: {
        ReactComponent: '@svgr/webpack?-svgo,+ref![path]',
      },
    },
  },
],
import { ReactComponent as ComLogo } from './logo.svg';
<ComLogo />
Contributors
As always, thanks to our amazing contributors!
Made with contributors.
License
Licensed under the MIT License.
