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 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許可獲得許可。

展開