Unduh svgtofont - Unduh Kode Sumber svgtofont

Font gratis

Baca satu set ikon SVG dan ouput font TTF/EOT/WOFF/WOFF2/SVG, generator font dari ikon SVG.

Instal · Penggunaan · Perintah · Penggunaan Font · API · Opsi · NPM · Lisensi

Fitur:

Format font yang didukung: WOFF2 , WOFF , EOT , TTF dan SVG .
Mendukung file simbol SVG.
Dukungan React , ReactNative & TypeScript .
Dukung Less / Sass / Stylus .
Memungkinkan untuk menggunakan templat khusus (contoh css , less dan dll).
Secara otomatis menghasilkan situs pratinjau.

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

 grafik LR;
    A [Iconfont]-> C [Unduh SVG];
    B [icomoon]-> c;
    D [icongo]-> C;
    E [yesicon]-> c;
    Klik "https://www.iconfont.cn" "阿里巴巴矢量图标库" _blank
    Klik B "https://icomoon.io" "Pixel Perfect Icon Solutions" _Blank
    Klik D "https://icongo.github.io" "termasuk ikon populer dalam proyek reaksi Anda dengan mudah." _kosong
    Klik E "https://yesicon.app/" "216.162 ikon vektor berkualitas tinggi dari tim desain top." _kosong
    C .-> IDE1
    Subgraph IDE1 [Proyek]
        svg -> a2 [svgtofont create font]
        A2 .-> B3 [Gunakan font]
    akhir

Font Ikon Dibuat oleh Svgtofont

Ikon File File-Icons di pohon file.
UIW-IConfont Font ikon premium untuk pustaka komponen @uiwjs. Dukungan React & TypeScript .
Ikon Bootstrap Font Font Open Source Open SVG Icon Library untuk Bootstrap.
Contoh tes untuk contoh tes sederhana, jalankan npm run test di direktori root untuk melihat hasilnya.

Memasang

npm i svgtofont

Catatan

Paket v5+ ini hanya ESM: Node 18+ diperlukan untuk menggunakannya dan harus import alih -alih require .

 import svgtofont from 'svgtofont' ;

Menggunakan dengan perintah

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

Anda dapat menambahkan konfigurasi ke package.json. #48

Dukungan untuk .svgtofontrc dan lebih banyak file konfigurasi.

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

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

Menggunakan dengan nodeJS

Catatan

Paket v5+ ini sekarang murni ESM. Harap baca ini.

 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!' ) ;
} ) ;

Atau

 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
}

opsi

svgtofont (opsi)

konfigurasi

Jenis: config?: AutoConfOption<SvgToFontOptions>

Secara default, pengaturan secara otomatis dimuat dari .svgtofontrc dan package.json . Anda dapat menambahkan konfigurasi ke package.json . #48

Dukungan untuk .svgtofontrc dan lebih banyak file konfigurasi.

log

Jenis: Boolean

Nilai false menonaktifkan logging

logger

Ketik: (msg) => void

Fungsi panggilan balik log

Dist

Ketik: String
Nilai default: ~~dist~~ => fonts

Direktori output.

outsvgreact

Jenis: Boolean
Nilai default: false

Output ./dist/react/ , svg menghasilkan komponen 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 >
) ;

outsvgreactnative

Jenis: Boolean
Nilai default: false

Output ./dist/reactNative/ , SVG menghasilkan komponen 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

Jenis: Boolean
Nilai default: false

Output ./dist/svgtofont.json , kontennya adalah sebagai berikut:

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

Atau Anda dapat menghasilkan file secara terpisah:

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

GenerateInfodata

Jenis: Boolean
Nilai default: false

Output ./dist/info.json , kontennya adalah sebagai berikut:

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

SRC

Ketik: String
Nilai default: svg

jalur output

emplistdist

Ketik: String
Nilai default: false

Hapus Isi Direktori Output

Fontname

Ketik: String
Nilai default: iconfont

Nama keluarga font yang Anda inginkan.

styletemplates

Jenis: Nilai default String : undefined

Jalur templat, lihat src/styles atau test/templates/styles untuk mendapatkan referensi tentang cara membuat templat, nama file dapat memiliki ekstensi .template, seperti filename.scss.template

startunicode

Jenis: Number
Nilai default: 0xea01

Nomor Mulai Unicode

geticonunicode

Dapatkan Ikon Unicode

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

usenameasunicode

Jenis: Boolean
Nilai default: false

Haruskah nama (nama file) digunakan sebagai unicode? Sakelar ini memungkinkan untuk dukungan ligatur.

Katakanlah Anda memiliki SVG dengan nama file add dan Anda ingin menggunakan ligatur untuk itu. Anda akan mengatur pemrosesan seperti yang disebutkan di atas dan nyalakan sakelar ini.

 {
  ...
  useNameAsUnicode : true
}

Saat memproses, alih -alih menggunakan char sekuensial tunggal untuk Unicode, ia menggunakan nama file. Menggunakan nama file sebagai unicode memungkinkan kode berikut berfungsi seperti yang diharapkan.

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

Saat Anda menambahkan lebih banyak SVG dan memprosesnya ke dalam font Anda, Anda hanya akan menggunakan pola yang sama.

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

usecssvars

Jenis: Boolean
Nilai default: false

konsol kapan pun {{cssstring}} output output karakter unicode atau css vars

classnameprefix

Ketik: String
Nilai Default: Nama Font

Buat Awalan Nama Kelas Font, Nama Font Nilai Default.

CSS

Jenis: Boolean|CSSOptions
Nilai default: false

Buat file CSS/Less, Default 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

Ini adalah pengaturan untuk svgicons2svgfont

svgicons2svgfont.fontname

Ketik: String
Nilai default: 'iconfont'

Nama keluarga font yang Anda inginkan.

svgicons2svgfont.fontid

Ketik: String
Nilai Default: Nilai Options.FontName

ID font yang Anda inginkan.

svgicons2svgfont.fontstyle

Ketik: String
Nilai default: ''

Gaya font yang Anda inginkan.

SVGICONS2SVGFONT.FONTWEIGH

Ketik: String
Nilai default: ''

Berat font yang Anda inginkan.

svgicons2svgfont.fixedwidth

Jenis: Boolean
Nilai default: false

Menciptakan font monospace dengan lebar ikon input terbesar.

svgicons2svgfont.centerhorizontally

Jenis: Boolean
Nilai default: false

Hitung batas mesin terbang dan tengah secara horizontal.

svgicons2svgfont.normalize

Jenis: Boolean
Nilai default: false

Normalisasi ikon dengan menskalakannya ke ketinggian ikon tertinggi.

svgicons2svgfont.fontheight

Jenis: Number
Nilai default: MAX(icons.height)

Tinggi font yang dikeluarkan (default ke ketinggian ikon input tertinggi).

SVGICONS2SVGFONT.ROUND

Jenis: Number
Nilai default: 10e12

Mengatur pembulatan jalur SVG.

svgicons2svgfont.descent

Jenis: Number
Nilai default: 0

Keturunan font. Berguna untuk memperbaiki dasar font sendiri.

Peringatan: Keturunan adalah nilai positif!

SVGICONS2SVGFONT.ASCENT

Jenis: Number
Nilai default: fontHeight - descent

Pendakian font. Gunakan opsi ini hanya jika Anda tahu apa yang Anda lakukan. Nilai yang cocok untuk ini dihitung untuk Anda.

svgicons2svgfont.metadata

Ketik: String
Nilai default: undefined

Metadata font. Anda dapat mengatur data karakter apa pun tetapi ini adalah tempat yang cocok untuk disebutkan hak cipta.

svgicons2svgfont.log

Jenis: Function
Nilai default: console.log

Memungkinkan Anda untuk menyediakan fungsi logging Anda sendiri. Set ke function(){} untuk menonaktifkan logging.

SVGOOPTIONS

Jenis: OptimizeOptions Nilai default: undefined

Beberapa opsi dapat dikonfigurasi dengan svgoOptions . SVGO

SVG2TTF

Ini adalah pengaturan untuk svg2ttf

svg2ttf.copyright

Ketik: String

string hak cipta

svg2ttf.ts

Ketik: String

Timestamp UNIX (dalam hitungan detik) untuk mengganti waktu penciptaan

svg2ttf.version

Jenis: Number

String versi font, dapat berupa versi xy atau xy .

situs web

Tentukan konten web pratinjau. Contoh:

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

situs web.template

Ketik: String
Nilai default: index.njk

Template khusus dapat menyesuaikan parameter. Anda dapat menentukan template Anda sendiri berdasarkan templat default.

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

situs web.index

Ketik: String
Nilai default: font-class , enum { font-class , unicode , symbol }

Atur halaman rumah default.

Penggunaan font

Misalkan nama font didefinisikan sebagai svgtofont , halaman beranda default adalah unicode , akan menghasilkan:

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

Pratinjau demo font-class.html , symbol.html dan index.html . Gaya yang dihasilkan secara otomatis svgtofont.css dan svgtofont.less .

Simbol 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 >

Nama kelas

Dukungan untuk referensi gaya .less dan .css .

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

Menggunakan dengan bereaksi

Ikon digunakan sebagai komponen. v3.16.7+ dukungan.

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

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

Dalam proyek yang dibuat oleh create-react-app

 import logo from './logo.svg' ;

< img src = { logo }  />

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

< ComLogo />

Dalam proyek yang dibuat oleh 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 />

Menggunakan dengan reactnative

Komponen unik yang dinamai nama font dihasilkan.

Alat peraga adalah TextProps dan digunakan sebagai gaya inline.

Selain itu, prop iConname wajib dan mengacu pada nama SVG yang ditulis dalam Camelcase

 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 ;

Kontributor

Seperti biasa, terima kasih kepada kontributor kami yang luar biasa!

Dibuat dengan kontributor.

Lisensi

Berlisensi di bawah lisensi MIT.

Memperluas