svgtofont -Download - svgtofont -Quellcode -Download

Freie Schriftart

Lesen Sie einen Satz von SVG -Symbolen und eine TTF/EOT/WOFF/WOFF2/SVG -Schriftart, Generator von Schriftarten aus SVG -Symbolen.

Installation · Verwendung · Befehl · Schriftnutzung · API · Optionen · NPM · Lizenz

Merkmale:

Unterstützte Schriftformate: WOFF2 , WOFF , EOT , TTF und SVG .
Unterstützen Sie die SVG -Symboldatei.
Unterstützung React , ReactNative & TypeScript .
Unterstützen Sie Less / Sass / Stylus .
Ermöglicht die Verwendung benutzerdefinierter Vorlagen (Beispiel css , less usw.).
Generieren Sie automatisch eine Vorschau -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;
    Klicken Sie auf "https://www.iconfont.cn" "阿里巴巴矢量图标库" _blank
    Klicken Sie auf B "https://icomoon.io" "Pixel Perfect Icon Solutions" _blank
    Klicken Sie auf D "https://icongo.github.io" "enthalten beliebte Symbole in Ihren React -Projekten. _leer
    Klicken Sie auf e "https://yesicon.app/" "216.162 hochwertige Vektor-Symbole von Top-Designteams". _leer
    C .-> ide1
    Subgraph IDE1 [Projekt]
        SVG -> A2 [SVGTOFONT FONT]
        A2 .-> B3 [Verwenden Sie Schriftart]
    Ende

Icon -Schriftart erstellt von SVGTofont

Datei-ICons-Datei-Symbole in der Dateistruktur.
UIW-ICONFONT Die Premium-Symbolschrift für die @Uiwjs-Komponentenbibliothek. Unterstützung React & TypeScript .
Bootstrap -Symbole Schrift offizielle Open -Source -SVG -Icon -Bibliothek für Bootstrap.
Testbeispiel für ein einfaches Testbeispiel Führen Sie npm run test im Stammverzeichnis aus, um die Ergebnisse anzuzeigen.

Installieren

npm i svgtofont

Notiz

Dieses Paket v5+ ist nur ESM: Node 18+ wird benötigt, um es zu verwenden, und es muss import werden, anstatt zu require .

 import svgtofont from 'svgtofont' ;

Verwenden mit Befehl

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

Sie können Package.json Konfiguration hinzufügen. #48

Unterstützung für .svgtofontrc und weitere Konfigurationsdateien.

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

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

Verwendung mit NodeJs

Notiz

Dieses Paket v5+ ist jetzt reines ESM. Bitte lesen Sie das.

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

Oder

 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
}

Optionen

SVGTofont (Optionen)

Konfiguration

Typ: config?: AutoConfOption<SvgToFontOptions>

Standardmäßig werden die Einstellungen automatisch von .svgtofontrc und package.json geladen. Sie können package.json Konfiguration hinzufügen. #48

Unterstützung für .svgtofontrc und weitere Konfigurationsdateien.

Protokoll

Typ: Boolean

Ein Wert von false Deaktivitäten protokollieren

Logger

Typ: (msg) => void

Rückruffunktion protokollieren

distanzieren

Typ: String
Standardwert: ~~dist~~ => fonts

Das Ausgabeverzeichnis.

OutsvGreact

Typ: Boolean
Standardwert: false

Ausgabe ./dist/react/ , SVG erzeugt react -Komponenten.

 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

Typ: Boolean
Standardwert: false

Ausgabe ./dist/reactNative/ , SVG erzeugt reactNative Komponenten.

 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

Typ: Boolean
Standardwert: false

Ausgabe ./dist/svgtofont.json , der Inhalt lautet wie folgt:

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

Oder Sie können die Datei separat generieren:

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

generierenInfodata

Typ: Boolean
Standardwert: false

Ausgabe ./dist/info.json , der Inhalt lautet wie folgt:

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

src

Typ: String
Standardwert: svg

Ausgangspfad

Leeredist

Typ: String
Standardwert: false

Inhalt des Ausgangsverzeichnisses löschen

Fontname

Typ: String
Standardwert: iconfont

Der Schriftname, den Sie wollen.

Styletemplatten

Typ: String Standardwert: undefined

Der Pfad filename.scss.template Vorlagen, siehe src/styles oder test/templates/styles

StartUnicode

Typ: Number
Standardwert: 0xea01

Unicode -Startnummer

Geticonunicode

Holen Sie sich Icon Unicode

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

usenameasunicode

Typ: Boolean
Standardwert: false

Sollte der Name (Dateiname) als Unicode verwendet werden? Dieser Schalter ermöglicht die Unterstützung von Ligaturen.

Angenommen, Sie haben ein SVG mit einem Dateinamen von add und möchten Ligaturen dafür verwenden. Sie würden Ihre Verarbeitung wie oben erwähnt einrichten und diesen Schalter einschalten.

 {
  ...
  useNameAsUnicode : true
}

Während der Verarbeitung verwendet es den Dateinamen, anstatt ein einzelnes sequentielles Zeichen für den Unicode zu verwenden. Durch die Verwendung des Dateinamens als Unicode kann der folgende Code wie erwartet funktionieren.

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

Wenn Sie mehr SVGs hinzufügen und sie in Ihre Schriftart verarbeiten, verwenden Sie einfach dasselbe Muster.

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

usecssvars

Typ: Boolean
Standardwert: false

Konsolen, wann immer {{CSSString}} Template Unicode -Zeichen oder CSS Vars ausgibt

classnameprefix

Typ: String
Standardwert: Schriftname

Erstellen Sie Schriftklassenname Präfix, Standardwert -Schriftart Name.

CSS

Typ: Boolean|CSSOptions
Standardwert: false

Erstellen Sie CSS/weniger Dateien, Standard 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

Dies ist die Einstellung für SVGICONS2SVGFONT

SVGICONS2SVGFONT.FONTNAME

Typ: String
Standardwert: 'iconfont'

Der Schriftname, den Sie wollen.

svgicons2svgfont.fontid

Typ: String
Standardwert: Die Optionen.Fontname -Wert

Die Schrift ID, die Sie wollen.

SVGICONS2SVGFONT.FONTSTYLE

Typ: String
Standardwert: ''

Der Schriftstil, den Sie wollen.

SVGICONS2SVGFONT.FONTWEIGHT

Typ: String
Standardwert: ''

Das gewünschte Schriftgewicht.

SVGICONS2SVGFONT.FixedWidth

Typ: Boolean
Standardwert: false

Schafft eine Monospace -Schriftart der Breite des größten Eingabesymbols.

svgicons2Svgfont.CenterHorizontal

Typ: Boolean
Standardwert: false

Berechnen Sie die Grenzen einer Glyphe und zentrieren Sie ihn horizontal.

svgicons2svgfont.normalisieren

Typ: Boolean
Standardwert: false

Normalisieren Sie die Symbole, indem Sie sie auf die Höhe der höchsten Ikone skalieren.

svgicons2SVGFONT.FONTHELT

Typ: Number
Standardwert: MAX(icons.height)

Die ausgegebene Schrifthöhe (standardmäßig zur Höhe des höchsten Eingangsymbols).

svgicons2svgfont.round

Typ: Number
Standardwert: 10e12

Setup SVG Pfadrundung einrichten.

svgicons2Svgfont.Descent

Typ: Number
Standardwert: 0

Die Schriftabstieg. Es ist nützlich, die Schriftlinie selbst zu beheben.

Warnung: Der Abstieg ist ein positiver Wert!

svgicons2svgfont.adercent

Typ: Number
Standardwert: fontHeight - descent

Der Schriftart. Verwenden Sie diese Optionen nur, wenn Sie wissen, was Sie tun. Ein geeigneter Wert dafür wird für Sie berechnet.

svgicons2Svgfont.metadata

Typ: String
Standardwert: undefined

Die Schriftmetadaten. Sie können alle Charakterdaten festlegen, aber es ist der geeignete Ort für eine Urheberrechtszeit.

svgicons2Svgfont.log

Typ: Function
Standardwert: console.log

Ermöglicht Ihnen Ihre eigene Protokollierungsfunktion. Auf function(){} eingestellt, um die Protokollierung zu deaktivieren.

SvGoOptions

Typ: OptimizeOptions Standardwert: undefined

Einige Optionen können jedoch mit svgoOptions konfiguriert werden. svgo

SVG2TTF

Dies ist die Einstellung für SVG2TTF

svg2ttf.copyright

Typ: String

svg2ttf.ts

Typ: String

UNIX -Zeitstempel (in Sekunden), um die Erstellungszeit außer Kraft zu setzen

svg2ttf.version

Typ: Number

Schriftart Version, kann Version xy oder xy sein.

Webseite

Definieren Sie die Vorschau -Webinhalte. Beispiel:

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

Website.Template

Typ: String
Standardwert: Index.njk

Benutzerdefinierte Vorlage kann Parameter anpassen. Sie können Ihre eigene Vorlage basierend auf der Standardvorlage definieren.

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

Website.Index

Typ: String
Standardwert: font-class , Enum { font-class , unicode , symbol }

Setzen Sie die Standard -Startseite.

Schriftnutzung

Angenommen, der Schriftname ist definiert als svgtofont , die Standard -Startseite ist unicode , generiert:

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

Vorschau Demo font-class.html , symbol.html und index.html . Automatisch generierte Stil svgtofont.css und svgtofont.less .

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

Klassenname

Unterstützung für .less und .css -Stilreferenzen.

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

Verwendung mit React

Symbole werden als Komponenten verwendet. v3.16.7+ Unterstützung.

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

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

In dem von Create-React-App erstellten Projekt

 import logo from './logo.svg' ;

< img src = { logo }  />

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

< ComLogo />

In dem von WebPack erstellten Projekt

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

Verwendung mit reaktnativ

Eine eindeutige Komponente, die nach dem Schriftnamen benannt ist, wird generiert.

Requisiten sind Textprops und werden als Inline -Stil verwendet.

Darüber hinaus ist die Iconname -Prop obligatorisch und bezieht sich auf SVG -Namen, die in Kamelase geschrieben wurden

 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 ;

Mitwirkende

Wie immer dank unserer erstaunlichen Mitwirkenden!

Mit Mitwirkenden gemacht.

Lizenz

Lizenziert unter der MIT -Lizenz.

Expandieren