buildfont

Converts package of svg files to a font file. Provides css and html demo.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
buildfont
402.0.26 years ago7 years agoMinified + gzip package size for buildfont in KB

Readme

buildfont
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形式的多色图标。

install

npm install -g buildfont

usage

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图标

example

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>
);