Movatterモバイル変換

^{Usingmy app is also a way tosupport me:}

Free Font

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,TTF andSVG.
• Support SVG Symbol file.
• SupportReact,ReactNative,Vue &TypeScript.
• SupportLess/Sass/Stylus.
• Allows to use custom templates (examplecss,less and etc).
• Automatically generate a preview site.

                                ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮                                ┆      Project       ┆                                ┆   ╭┈┈┈┈┈┈┈┈┈┈┈╮    ┆╭┈┈┈┈┈┈┈┈╮                      ┆   ┆    svg    ┆┈┈╮ ┆┆iconfont┆┈┈╮                   ┆   ╰┈┈┈┈┈┈┈┈┈┈┈╯  ┆ ┆╰┈┈┈┈┈┈┈┈╯  ┆  ╭┈┈┈┈┈┈┈┈┈┈┈┈╮   ┆   ╭┈┈┈┈┈┈┈┈┈┈┈╮  ┆ ┆            ├┈▶┆download svg┆┈┈▶┆   ┆┈svgtofont┈┆  ┆ ┆╭┈┈┈┈┈┈┈┈╮  ┆  ╰┈┈┈┈┈┈┈┈┈┈┈┈╯   ┆╭┈┈┆create font┆◀┈╯ ┆┆icomoon ┆┈┈╯                   ┆┆  ╰┈┈┈┈┈┈┈┈┈┈┈╯    ┆╰┈┈┈┈┈┈┈┈╯                      ┆┆  ╭┈┈┈┈┈┈┈┈┈┈┈╮    ┆                                ┆╰┈▶┆ use font  ┆    ┆                                ┆   ╰┈┈┈┈┈┈┈┈┈┈┈╯    ┆                                ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯

graph LR;    A[iconfont]-->C[Download SVG];    B[icomoon]-->C;    D[icongo]-->C;    E[yesicon]-->C;click A"https://www.iconfont.cn""阿里巴巴矢量图标库" _blankclick B"https://icomoon.io""Pixel Perfect Icon Solutions" _blankclick D"https://icongo.github.io""Include popular icons in your React projects easily icons." _blankclick E"https://yesicon.app/""216,162 High-Quality Vector Icons from Top Design Teams." _blank    C .-> ide1subgraph ide1[Project]        svg-->a2[svgtofont create font]        a2 .-> b3[use font]end

Icon Font Created By svgtofont

• file-icons File icons in the file tree.
• uiw-iconfont The premium icon font for@uiwjs Component Library. SupportReact &TypeScript.
• Bootstrap Icons Font Official open source SVG icon library for Bootstrap.
• test example For a simple test example, runnpm run test in the root directory to see the results.

Install

npm i svgtofont

importsvgtofontfrom'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

Support for.svgtofontrc andmore configuration files.

{"fontName":"svgtofont","css":true}

/** *@type{import('svgtofont').SvgToFontOptions} */exportdefault{fontName:"iconfont",}

Using With Nodejs

importsvgtofontfrom'svgtofont';importpathfrom'node:path';svgtofont({src: path.resolve(process.cwd(),'icon'),// svg path, only searches one level, not recursivedist: path.resolve(process.cwd(),'fonts'),// output pathfontName:'svgtofont',// font namecss:true,// Create CSS files.}).then(()=>{console.log('done!');});

Or

importsvgtofontfrom'svgtofont';importpathfrom'node:path';svgtofont({src: path.resolve(process.cwd(),"icon"),// svg path, only searches one level, not recursivedist: path.resolve(process.cwd(),"fonts"),// output pathstyleTemplates: path.resolve(rootPath,"styles"),// file templates path (optional)fontName:"svgtofont",// font namecss:true,// Create CSS files.startUnicode:0xea01,// unicode start numbersvgicons2svgfont:{fontHeight:1000,normalize:true},// website = null, no demo html fileswebsite:{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-cornerscorners:{url:'https://github.com/jaywcjlove/svgtofont',width:62,// default: 60height:62,// default: 60bgColor:'#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={...};asyncfunctioncreateFont(){const unicodeObject=awaitcreateSVG(options);const ttf=awaitcreateTTF(options);// SVG Font => TTFawaitcreateEOT(options, ttf);// TTF => EOTawaitcreateWOFF(options, ttf);// TTF => WOFFawaitcreateWOFF2(options, ttf);// TTF => WOFF2awaitcreateSvgSymbol(options);// SVG Files => SVG Symbol}

options

svgtofont(options)

config

Type:config?: AutoConfOption<SvgToFontOptions>

By default, settings are automatically loaded from.svgtofontrc andpackage.json. You can add configuration topackage.json.#48

Support for.svgtofontrc andmore configuration files.

log

Type:Boolean

A value offalse disables logging

logger

Type:(msg) => void

log callback function

dist

Type:String
Default value:dist =>fonts

The output directory.

outSVGReact

Type:Boolean
Default value:false

Output./dist/react/, SVG generatesreact components.

git/git.svg// ↓↓↓↓↓↓↓↓↓↓importReactfrom'react';exportconstGit=props=>(<svg viewBox="0 0 20 20"{...props}><path d="M2.6 10.59L8.38 4.8l1.69 -." fillRule="evenodd"/></svg>);

outSVGReactNative

Type:Boolean
Default value:false

Output./dist/reactNative/, SVG generatesreactNative components.

import{Text}from'react-native';const icons={"Git":"__GitUnicodeChar__","Adobe":"__AdobeUnicodeChar__"};exportconstRangeIconFont=props=>{const{ name,...rest}= props;return(<Text style={{fontFamily:'svgtofont',fontSize:16,color:'#000000',...rest}}>{icons[name]}</Text>);};

outSVGVue

Type:Boolean
Default value:false

Output./dist/vue/, SVG generatesvue components.

git/git.svg// ↓↓↓↓↓↓↓↓↓↓import{ defineComponent, h}from'vue';exportconstGit=defineComponent({name:'Git',props:{class:{type:String,default:''}},setup(props,{ attrs}){return()=>h('svg',{viewBox:'0 0 20 20',width:undefined,height:undefined,class:`svgtofont${props.class}`,...attrs},[<path d="m2.6 10.59l5.78-5.79 1.69 1.7c-0.24 0.85 0.15 1.78 0.93 2.23v5.54c-0.6 0.34-1 0.99-1 1.73a2 2 0 0 0 2 2 2 2 0 0 0 2 -2c0-0.74-0.4-1.39-1-1.73v-4.86l2.07 2.09c-0.07 0.15-0.07 0.32-0.07 0.5a2 2 0 0 0 2 2 2 2 0 0 0 2 -2 2 2 0 0 0 -2 -2c-0.18 0-0.35 0-0.5 0.07l-2.57-2.57c0.26-0.93-0.22-1.95-1.15-2.34-0.43-0.16-0.88-0.2-1.28-0.09l-1.7-1.69 0.79-0.78c0.78-0.79 2.04-0.79 2.82 0l7.99 7.99c0.79 0.78 0.79 2.04 0 2.82l-7.99 7.99c-0.78 0.79-2.04 0.79-2.82 0l-7.99-7.99c-0.79-0.78-0.79-2.04 0-2.82z" fillRule="evenodd"/>]);}});

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');asyncfunctiongenerate(){const outPath=awaitgenerateIconsSource({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:String Default value:undefined

The path of the templates, seesrc/styles ortest/templates/styles to get reference about how to create a template, file names can have the extension .template, like afilename.scss.template

startUnicode

Type:Number
Default value:0xea01

unicode start number

getIconUnicode

Get Icon Unicode

getIconUnicode?:(name:string, unicode:string, startUnicode:number)=>[string,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 ofadd 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;}

<iclass="icons">add</i>

as you add more svgs and process them into your font you would just use the same pattern.

<iclass="icons">add</i><iclass="icons">remove</i><iclass="icons">edit</i>

addLigatures

Type:Boolean
Default value:false

adds possibility to use name (file name) in addition to codepoints. adds support of ligatures.

let's say you have some svgs and you want to use codepoints but for some of them for example with a file name ofadd you want to use ligatures for it. this option only adds ligatures and still allows for using codepoints as usual. this is in contrary to useNameAsUnicode which basically removes support for codepoints in favour of ligatures.

{...addLigatures:true}

useCSSVars

Type:Boolean
Default value:false

consoles whenever {{ cssString }} template outputs unicode characters or css vars

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, defaulttrue.

typeCSSOptions={/**   * Output the css file to the specified directory   */  output?:string;/**   * Which files are exported.   */  include?: RegExp;/**   * Setting font size.   */  fontSize?:string|boolean;/**   * 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;/**   * Ad hoc template variables.   */  templateVars?: Record<string,any>;/**   * When including CSS files in a CSS file,   * you can add a timestamp parameter or custom text to the file path to prevent browser caching issues and ensure style updates are applied. @default true   * @example `path/to/iconfont.css?t=1612345678`   */  hasTimestamp?:boolean|string;}

svgicons2svgfont

This is the setting forsvgicons2svgfont

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 fontmetadata. 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 tofunction(){} to disable logging.

svgoOptions

Type:OptimizeOptions Default value:undefined

Some options can be configured withsvgoOptions though it.svgo

svg2ttf

This is the setting forsvg2ttf

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 Versionx.y orx.y.

website

Define preview web content. Example:

{...// website = null, no demo html fileswebsite:{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-cornerscorners:{url:'https://github.com/jaywcjlove/svgtofont',width:62,// default: 60height:62,// default: 60bgColor:'#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.njk

Custom template can customize parameters. You can define your own template based on thedefault template.

{website:{template: path.join(process.cwd(),"my-template.njk")}}

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 assvgtofont, The default home page isunicode, Will generate:

font-class.htmlindex.htmlsvgtofont.csssvgtofont.eotsvgtofont.jsonsvgtofont.lesssvgtofont.module.lesssvgtofont.scsssvgtofont.stylsvgtofont.svgsvgtofont.symbol.svgsvgtofont.ttfsvgtofont.woffsvgtofont.woff2symbol.html

Preview demofont-class.html,symbol.html andindex.html. Automatically generated stylesvgtofont.css andsvgtofont.less.

symbol svg

<svgclass="icon"aria-hidden="true"><usexlink: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><spanclass="iconfont">&#59907;</span>

Class Name

Support for.less and.css styles references.

<linkrel="stylesheet"type="text/css"href="node_modules/fonts/svgtofont.css"><iclass="svgtofont-apple"></i>

Using With React

Icons are used as components.v3.16.7+ support.

import{Adobe,Alipay}from'@uiw/icons';<Adobestyle={{fill:'red'}}/><Alipayheight="36"/>

In the project created bycreate-react-app

importlogofrom'./logo.svg';<imgsrc={logo}/>

import{ReactComponentasComLogo}from'./logo.svg';<ComLogo/>

In the project created bywebpack

yarnadd babel-plugin-named-asset-importyarnadd @svgr/webpack

// webpack.config.js[  require.resolve('babel-plugin-named-asset-import'),{loaderMap:{svg:{ReactComponent:'@svgr/webpack?-svgo,+ref![path]',},},},],

import{ReactComponentasComLogo}from'./logo.svg';<ComLogo/>

Using With ReactNative

A unique component named after the font name is generated.

Props are TextProps and are used as inline style.

In addition, the iconName prop is mandatory and refers to svg names written in camelCase

SvgToFont.jsx// ↓↓↓↓↓↓↓↓↓↓import{SvgToFont}from'./SvgToFont';<SvgToFontfontSize={32}color="#fefefe"iconName={"git"}/>

SvgToFont.d.ts// ↓↓↓↓↓↓↓↓↓↓import{ TextStyle}from'react-native';exporttypeSvgToFontIconNames='git'|'adobe'|'demo'|'left'|'styleInline'exportinterfaceSvgToFontPropsextendsOmit<TextStyle,'fontFamily'|'fontStyle'|'fontWeight'>{  iconName: SvgToFontIconNames}exportdeclareconstSvgToFont:(props: SvgToFontProps)=>JSX.Element;

Using with Vue

Icons are used as components.v3+ support.

<script setup lang="ts">  import { Adobe, Alipay } from '@uiw/icons';</script><template>  <Abobe :style="{fill: red}" />  <Alipay :height="36" /></template>

Contributors

As always, thanks to our amazing contributors!

Made withcontributors.

License

Licensed under theMIT License.