svgtofont下载svgtofont源代码下载

免费字体

读取一组SVG图标，并启用ttf/eot/woff/woff2/svg字体，该字体的生成器来自SVG图标。

安装·用法·命令·字体使用率·API·选项·NPM·许可证

特征：

支持的字体格式： WOFF2 ， WOFF ， EOT ， TTF和SVG 。
支持SVG符号文件。
支持React ， ReactNative和TypeScript 。
支持Less / Sass / Stylus 。
允许使用自定义模板（示例css ， less等）。
自动生成一个预览网站。

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

图LR;
    a [iconfont]  - > c [下载svg];
    b [icomoon]  - > c;
    d [icongo]  - > c;
    e [yesicon]  - > c;
    单击“ https://www.iconfont.cn”“阿里巴巴矢量图标库” _blank
    单击B“ https://icomoon.io”“ Pixel Perfect Icon Solutions” _Blank
    单击D“ https://icongo.github.io”“在您的React Projects中包含流行的图标很容易图标”。 _空白的
    单击E“ https://yesicon.app/”“ 216,162高品质的矢量图标，来自顶级设计团队。” _空白的
    c .-> IDE1
    子图IDE1 [项目]
        svg-> a2 [svgtofont创建字体]
        A2 .-> B3 [使用字体]
    结尾

SVGTOFONT创建的图标字体

文件树中的文件 - 元素图标。
UIW-ICONFONT @UIWJS组件库的高级图标字体。支持React ＆ TypeScript 。
Bootstrap图标字体官方开源SVG图标库，用于引导程序。
简单测试示例的测试示例，在根目录中运行npm run test以查看结果。

安装

npm i svgtofont

笔记

此软件包v5+仅是ESM：使用节点18+才能使用它，并且必须是import而不是require 。

 import svgtofont from 'svgtofont' ;

使用命令

{
  "scripts" : {
    "font" : " svgtofont --sources ./svg --output ./font --fontName uiw-font "
  },
  "svgtofont" : {
    "css" : {
      "fontSize" : " 12px "
    }
  }
}

您可以将配置添加到package.json。＃48

支持.svgtofontrc和更多配置文件。

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

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

使用nodejs

笔记

该软件包v5+现在是纯ESM。请阅读此。

 import svgtofont from 'svgtofont' ;
import path from 'node:path' ;
 
svgtofont ( {
  src : path . resolve ( process . cwd ( ) , 'icon' ) , // svg path, only searches one level, not recursive
  dist : path . resolve ( process . cwd ( ) , 'fonts' ) , // output path
  fontName : 'svgtofont' , // font name
  css : true , // Create CSS files.
} ) . then ( ( ) => {
  console . log ( 'done!' ) ;
} ) ;

或者

 import svgtofont from 'svgtofont' ;
import path from 'node:path' ;

svgtofont ( {
  src : path . resolve ( process . cwd ( ) , "icon" ) , // svg path, only searches one level, not recursive
  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
}

选项

svgtofont（选项）

config

类型： config?: AutoConfOption<SvgToFontOptions>

默认情况下，设置将自动从.svgtofontrc和package.json加载。您可以将配置添加到package.json 。＃48

支持.svgtofontrc和更多配置文件。

日志

类型： Boolean

false禁用记录的值

记录器

类型： (msg) => void

日志回调功能

区

类型： String
默认值： ~~dist~~ => fonts

输出目录。

效果

类型： Boolean
默认值： false

输出./dist/react/生成react组件。

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

效果

类型： Boolean
默认值： false

输出./dist/reactNative/生成reactNative组件。

 import { Text } from 'react-native' ;

const icons = { "Git" : "__GitUnicodeChar__" , "Adobe" : "__AdobeUnicodeChar__" } ;

export const RangeIconFont = props => {
  const { name , ... rest } = props ;
  return ( < Text style = { { fontFamily : 'svgtofont' , fontSize : 16 , color : '#000000' , ... rest } } >
    { icons [ name ] }
  </ Text > ) ;
} ;

Outsvgpath

类型： Boolean
默认值： false

输出./dist/svgtofont.json ，内容如下：

 {
  "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..." ]
}

或者您可以单独生成文件：

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

生成

类型： Boolean
默认值： false

输出./dist/info.json ，内容如下：

 {
  "adobe" : {
    "encodedCode" : "\ea01" ,
    "prefix" : "svgtofont" ,
    "className" : "svgtofont-adobe" ,
    "unicode" : "&#59905;"
  } ,
  ...
}

src

类型： String
默认值： svg

输出路径

空派

类型： String
默认值： false

清除输出目录内容

字体名称

类型： String
默认值： iconfont

您想要的字体姓氏。

样式结构

类型： String默认值： undefined

模板的路径，请参阅src/styles或test/templates/styles以获取有关如何创建模板的参考，文件名可以具有扩展名.Template，例如filename.scss.template

Startunicode

类型： Number
默认值： 0xea01

Unicode启动号码

geticonunicode

获取图标Unicode

getIconUnicode?: ( name : string , unicode : string , startUnicode : number ) 
      => [ string , number ] ;

Usenameasunicode

类型： Boolean
默认值： false

是否应该将名称（文件名）用作Unicode？此开关允许连接的支撑。

假设您有一个带有add文件名的SVG，您想为其使用rigatures。您将如上所述设置处理，并打开此开关。

 {
  ...
  useNameAsUnicode : true
}

在处理时，它使用文件名，而不是为Unicode使用单个顺序char。使用文件名作为Unicode允许以下代码按预期工作。

. icons {
  font-family : 'your-font-icon-name' !important ;
  font-size : 16 px ;
  font-style : normal;
  -webkit-font-smoothing : antialiased;
  -moz-osx-font-smoothing : grayscale;
}

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

当您添加更多SVG并将它们处理到您的字体中时，您只会使用相同的模式。

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

USECSSVARS

类型： Boolean
默认值： false

每当{{{cssString}}模板输出Unicode字符或CSS vars时，控制台

ClassNamePrefix

类型： String
默认值：字体名称

创建字体类名称前缀，默认值字体名称。

CSS

类型： Boolean|CSSOptions
默认值： false

创建CSS/SILLE文件，默认情况true 。

 type CSSOptions = {
  /**
   * 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

这是svgicons2svgfont的设置

svgicons2svgfont.fontname

类型： String
默认值： 'iconfont'

您想要的字体姓氏。

svgicons2svgfont.fontid

类型： String
默认值：options.fontname值

您想要的字体ID。

svgicons2svgfont.fontstyle

类型： String
默认值： ''

您想要的字体样式。

svgicons2svgfont.font量级

类型： String
默认值： ''

您想要的字体重量。

svgicons2svgfont.fixedwidth

类型： Boolean
默认值： false

创建最大输入图标宽度的单拼字体。

svgicons2svgfont.centerhorizontally

类型： Boolean
默认值： false

计算字形的边界并水平中心。

svgicons2svgfont.normalize

类型： Boolean
默认值： false

通过将图标缩放到最高图标的高度来标准化图标。

svgicons2svgfont.fontheight

类型： Number
默认值： MAX(icons.height)

输出的字体高度（默认为最高输入图标的高度）。

svgicons2svgfont.Round

类型： Number
默认值： 10e12

设置SVG路径舍入。

svgicons2svgfont.descent

类型： Number
默认值： 0

字体下降。自己修复字体基线很有用。

警告：下降是积极的价值！

svgicons2svgfont.ascent

类型： Number
默认值： fontHeight - descent

字体上升。仅当您知道自己在做什么时，才使用此选项。为您计算的合适价值。

svgicons2svgfont.metadata

类型： String
默认值： undefined

字体元数据。您可以在其中设置任何字符数据，但它是适合版权提及的地方。

svgicons2svgfont.log

类型： Function
默认值： console.log

允许您提供自己的记录功能。设置为function(){}以禁用日志记录。

svgooptions

类型： OptimizeOptions默认值： undefined

有些选项可以使用svgoOptions配置。 svgo

SVG2TTF

这是SVG2TTF的设置

svg2ttf.copyright

类型： String

版权字符串

svg2ttf.ts

类型： String

Unix时间戳（以秒为单位）以覆盖创建时间

svg2ttf.version

类型： Number

字体版本字符串，可以是版本xy或xy 。

网站

定义预览Web内容。例子：

 {
  ...
  // 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"
      }
    ]
  }
}

网站

类型： String
默认值：index.njk

自定义模板可以自定义参数。您可以根据默认模板定义自己的模板。

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

weblity.index

类型： String
默认值： font-class ，枚举{ font-class ， unicode ， symbol }

设置默认主页。

字体使用

假设字体名称定义为svgtofont ，默认主页是unicode ，将生成：

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

预览演示font-class.html ， symbol.html和index.html 。自动生成的样式svgtofont.css和svgtofont.less 。

符号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 " > &#59907; </ span >

班级名称

支持.less和.css样式参考。

 < link rel =" stylesheet " type =" text/css " href =" node_modules/fonts/svgtofont.css " >
< i class =" svgtofont-apple " > </ i >

与React一起使用

图标用作组件。 v3.16.7+支持。

 import { Adobe , Alipay } from '@uiw/icons' ;

< Adobe style = { { fill : 'red' } } />
< Alipay height = "36" / >

在由创建反应应用程序创建的项目中

 import logo from './logo.svg' ;

< img src = { logo }  />

 import { ReactComponent as ComLogo } from './logo.svg' ;

< ComLogo />

在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 />

使用反应

以字体名称命名的唯一组件是生成的。

道具是文本制作的，被用作内联样式。

此外，IconName Prop是强制性的，是指骆驼写的SVG名称

 SvgToFont . jsx
// ↓↓↓↓↓↓↓↓↓↓

import { SvgToFont } from './SvgToFont' ;

< SvgToFont fontSize = { 32 } color = "#fefefe" iconName = { "git" }  />

 SvgToFont . d . ts
// ↓↓↓↓↓↓↓↓↓↓

import { TextStyle } from 'react-native' ;

export type SvgToFontIconNames = 'git' | 'adobe' | 'demo' | 'left' | 'styleInline'

export interface SvgToFontProps extends Omit < TextStyle , 'fontFamily' | 'fontStyle' | 'fontWeight' > {
  iconName : SvgToFontIconNames
}

export declare const SvgToFont : ( props : SvgToFontProps ) => JSX . Element ;

贡献者

与往常一样，感谢我们出色的贡献者！

由贡献者制成。

执照

根据MIT许可获得许可。

展开