Convert several svg files to one single font file formatted as .ttf, .svg, .woff, eot.
Demo html , css and map json files are also generated. Easy to be integrated in web or react native environment.
Supports colorful svg fonts. (svg sprites)
自动合并svg文件，生成.ttf, .svg, .woff, .eot多种字体文件，并同时生成css、html和map文件，方便用于web和react-native(如react-native-vector-icons)等多种场合。
支持合成svg sprites形式的多色图标。
npm install -g buildfont
Put svgs into directory ./svgs. Svgs' filename should be meaningful. Css classnames will be based on svg' filename.
Run buildfont at the parent directory of './svgs', font file and demo html/css will be generated in ./font.
将svg文件放入./svgs文件夹，文件名与字体含义相同
在./svgs的父级目录运行buildfont 即可生成 ./font文件夹，内有各种文件
$ buildfont
-F, 配置font-family的名字, 默认是iconfont
$ buildfont -F dunhuangFont
-p 配置svgs的文件夹路径, 默认'./svgs'
buildfont -p ~/svgs/
-c 生成多色图标，也就是svg sprites图标
cd examples
build font icons 生成单色字体图标
buildfont
build colorful svg icons 生成多色svg图标（svg sprites)
buildfont -p ./examples/csvgs -c
在react中使用svg sprites：
import React, {Component} from 'react'
import getSvg from './svgsymbol/svgsymbol_cjs';
class ReactSvg extends Component {
render () {
const {svg} = this.props
return (
<div dangerouslySetInnerHTML={{__html: svg}} style={{display:'none'}}/>
)
}
}
const defaultStyle = {
width: '1em',
height: '1em',
verticalAlign: '-0.15em',
fill: 'currentColor',
overflow: 'hidden'
}
class IconSvg extends Component {
render () {
const {name, style = {}, className = ''} = this.props
return (
<svg className={className} style={Object.assign({}, defaultStyle,style)} aria-hidden="true">
<use xlinkHref={'#icon-' + name}></use>
</svg>
)
}
}
const App = () => (
<div>
<ReactSvg svg={getSvg()}/>
<p style={{fontSize: 20}}><IconSvg name="design"/></p>
<p style={{fontSize: 20}}><IconSvg name="football"/></p>
<p style={{fontSize: 20}}><IconSvg name="reading"/></p>
</div>
);