Page d'accueil>Ressources de création de sites Web>Téléchargement de polices
Télécharger

Police gratuite

Lisez un ensemble d'icônes SVG et OUPUT A TTF / EOT / WOFF / WOFF2 / SVG, générateur de polices à partir d'icônes SVG.

Installer · Utilisation · Commande · Utilisation de la police · API · Options · NPM · Licence

Caractéristiques:

  • Formats de police pris en charge: WOFF2 , WOFF , EOT , TTF et SVG .
  • Prise en charge du fichier de symboles SVG.
  • Support React , ReactNative & TypeScript .
  • Prise en charge Less / Sass / Stylus .
  • Permet d'utiliser des modèles personnalisés (exemple css , less et etc.).
  • Générez automatiquement un site d'aperçu. 
                                ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
                                ┆      Project       ┆
                                ┆   ╭┈┈┈┈┈┈┈┈┈┈┈╮    ┆
╭┈┈┈┈┈┈┈┈╮                      ┆   ┆    svg    ┆┈┈╮ ┆
┆iconfont┆┈┈╮                   ┆   ╰┈┈┈┈┈┈┈┈┈┈┈╯  ┆ ┆
╰┈┈┈┈┈┈┈┈╯  ┆  ╭┈┈┈┈┈┈┈┈┈┈┈┈╮   ┆   ╭┈┈┈┈┈┈┈┈┈┈┈╮  ┆ ┆
            ├┈▶┆download svg┆┈┈▶┆   ┆┈svgtofont┈┆  ┆ ┆
╭┈┈┈┈┈┈┈┈╮  ┆  ╰┈┈┈┈┈┈┈┈┈┈┈┈╯   ┆╭┈┈┆create font┆◀┈╯ ┆
┆icomoon ┆┈┈╯                   ┆┆  ╰┈┈┈┈┈┈┈┈┈┈┈╯    ┆
╰┈┈┈┈┈┈┈┈╯                      ┆┆  ╭┈┈┈┈┈┈┈┈┈┈┈╮    ┆
                                ┆╰┈▶┆ use font  ┆    ┆
                                ┆   ╰┈┈┈┈┈┈┈┈┈┈┈╯    ┆
                                ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
 graphique LR;
    A [iconfont] -> c [télécharger svg];
    B [iomoon] -> c;
    D [iongo] -> c;
    E [yesicon] -> c;
    Cliquez sur un "https://www.iconfont.cn" "阿里巴巴矢量图标库" _blank
    Cliquez sur b "https://icomoon.io" "Pixel Perfect Icon Solutions" _blank
    Cliquez sur d "https://icongo.github.io" "Inclure des icônes populaires dans vos icônes React Projects." _vide
    Cliquez sur e "https://yesicon.app/" "216,162 Icônes vectorielles de haute qualité des meilleures équipes de conception." _vide
    C .-> ide1
    Sub-Graph IDE1 [Projet]
        svg -> a2 [svgtofont créer une police]
        a2 .-> b3 [Utiliser la police]
    fin
Chargement

Font d'icône créé par Svgtofont

  • File-Icons Icônes de fichier dans l'arborescence de fichiers.
  • UIW-ICONFONT La police de l'icône Premium pour la bibliothèque de composants @UIWJS. Support React & TypeScript .
  • Bootstrap icônes FONT Bibliothèque d'icônes SVG open source officielle pour bootstrap.
  • Exemple de test pour un exemple de test simple, exécutez npm run test dans le répertoire racine pour voir les résultats.

Installer 

npm i svgtofont

Note

Ce package v5+ est ESM uniquement: le nœud 18+ est nécessaire pour l'utiliser et il doit être import au lieu d' require . 

 import svgtofont from 'svgtofont' ;

Utilisation avec la commande 

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

Vous pouvez ajouter une configuration à package.json. # 48

Prise en charge des fichiers .svgtofontrc et plus de fichiers de configuration. 

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

Utilisation avec Nodejs

Note

Ce package v5+ est maintenant pur ESM. Veuillez lire ceci. 

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

Ou 

 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
}

options

svgtofont (options)

configurer

Type: config?: AutoConfOption<SvgToFontOptions>

Par défaut, les paramètres sont automatiquement chargés à partir de .svgtofontrc et package.json . Vous pouvez ajouter une configuration à package.json . # 48

Prise en charge des fichiers .svgtofontrc et plus de fichiers de configuration.

enregistrer

Type: Boolean

Une valeur de false désactive la journalisation

bûcheron

Type: (msg) => void

Fonction de rappel du journal

distr

Type: String
Valeur par défaut: dist => fonts

Le répertoire de sortie.

outvGrect

Type: Boolean
Valeur par défaut: false

Sortie ./dist/react/ , SVG génère des composants 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 >
) ;

outre

Type: Boolean
Valeur par défaut: false

Sortie ./dist/reactNative/ , SVG génère des composants 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 > ) ;
} ;

outvgpath

Type: Boolean
Valeur par défaut: false

Sortie ./dist/svgtofont.json , le contenu est le suivant: 

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

Ou vous pouvez générer le fichier séparément: 

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

générer enfodata

Type: Boolean
Valeur par défaut: false

Sortie ./dist/info.json , le contenu est le suivant: 

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

SRC

Type: String
Valeur par défaut: svg

chemin de sortie

d'aide à vide

Type: String
Valeur par défaut: false

Contenu du répertoire de sortie effacer

prodigue

Type: String
Valeur par défaut: iconfont

Le nom de famille de police que vous voulez.

Styletemplates

Type: String Valeur par défaut: undefined

Le chemin des modèles, voir src/styles ou test/templates/styles Pour obtenir une référence sur la façon de créer un modèle, les noms de fichiers peuvent avoir l'extension .Template, comme un filename.scss.template

startUnicode

Type: Number
Valeur par défaut: 0xea01

Numéro de démarrage Unicode

geticonunicode

Obtenez l'icône Unicode 

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

usenameasunicode

Type: Boolean
Valeur par défaut: false

Le nom (nom de fichier) devrait-il être utilisé comme Unicode? Ce commutateur permet le support des ligatures.

Supposons que vous ayez un SVG avec un nom de fichier d' add et que vous souhaitez utiliser des ligatures pour cela. Vous configureriez votre traitement comme mentionné ci-dessus et allumez ce commutateur. 

 {
  ...
  useNameAsUnicode : true
}

Lors du traitement, au lieu d'utiliser un seul char séquentiel pour l'Unicode, il utilise le nom de fichier. L'utilisation du nom de fichier comme Unicode permet au code suivant de fonctionner comme prévu. 

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

Au fur et à mesure que vous ajoutez plus de SVG et que vous les traitez dans votre police, vous utiliseriez simplement le même modèle. 

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

usecssvars

Type: Boolean
Valeur par défaut: false

Consoles chaque fois que le modèle {{CSSString}} sortira des caractères Unicode ou CSS VARS

classmeprefix

Type: String
Valeur par défaut: nom de police

Créer le préfixe de nom de classe de police, nom de police de valeur par défaut.

CSS

Type: Boolean|CSSOptions
Valeur par défaut: false

Créez des fichiers CSS / Moins, par défaut 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

Ceci est le paramètre pour svgicons2svgfont

svgicons2svgfont.fontname

Type: String
Valeur par défaut: 'iconfont'

Le nom de famille de police que vous voulez.

svgicons2svgfont.fontid

Type: String
Valeur par défaut: la valeur des options.

L'identification de la police que vous voulez.

svgicons2svgfont.fontstyle

Type: String
Valeur par défaut: ''

Le style de police que vous voulez.

svgicons2svgfont.fontweight

Type: String
Valeur par défaut: ''

Le poids de la police que vous voulez.

svgicons2svgfont.fixedwidth

Type: Boolean
Valeur par défaut: false

Crée une police monospace de la largeur de la plus grande icône d'entrée.

svgicons2svgfont.centerhorizontally

Type: Boolean
Valeur par défaut: false

Calculez les limites d'un glyphe et centrez-la horizontalement.

svgicons2svgfont.normalise

Type: Boolean
Valeur par défaut: false

Normalisez les icônes en les élargissant à la hauteur de l'icône la plus élevée.

svgicons2svgfont.fontheight

Type: Number
Valeur par défaut: MAX(icons.height)

La hauteur de police sortie (par défaut, la hauteur de l'icône d'entrée la plus élevée).

svgicons2svgfont.round

Type: Number
Valeur par défaut: 10e12

Configuration de l'arrondi SVG Path.

svgicons2svgfont.descent

Type: Number
Valeur par défaut: 0

La descente de police. Il est utile de réparer vous-même la ligne de base de la police.

AVERTISSEMENT: La descente est une valeur positive!

svgicons2svgfont.ascent

Type: Number
Valeur par défaut: fontHeight - descent

L'ascension de la police. Utilisez ces options uniquement si vous savez ce que vous faites. Une valeur appropriée pour cela est calculée pour vous.

svgicons2svgfont.metadata

Type: String
Valeur par défaut: undefined

Les métadonnées de la police. Vous pouvez définir les données des caractères, mais c'est l'endroit adapté pour une mention du droit d'auteur.

svgicons2svgfont.log

Type: Function
Valeur par défaut: console.log

Vous permet de fournir votre propre fonction de journalisation. Défini sur function(){} pour désactiver la journalisation.

svgooptions

Type: OptimizeOptions Valeur par défaut: undefined

Certaines options peuvent être configurées avec svgoOptions mais elle. SVGO

svg2ttf

Ceci est le paramètre pour SVG2TTF

svg2ttf.copyright

Type: String

chaîne de copyright

svg2ttf.ts

Type: String

Timestamp Unix (en quelques secondes) pour remplacer le temps de création

svg2ttf.version

Type: Number

String de version de police, peut être la version xy ou xy .

site web

Définissez le contenu Web de prévisualisation. Exemple: 

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

site Web.Template

Type: String
Valeur par défaut: index.njk

Le modèle personnalisé peut personnaliser les paramètres. Vous pouvez définir votre propre modèle en fonction du modèle par défaut. 

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

site Web.index

Type: String
Valeur par défaut: font-class , enum { font-class , unicode , symbol }

Définir la page d'accueil par défaut.

Utilisation des polices

Supposons que le nom de la police soit défini comme svgtofont , la page d'accueil par défaut est unicode , générera: 

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

Aperçu de la démonstration font-class.html , symbol.html et index.html . Style généré automatiquement svgtofont.css et svgtofont.less .

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

Nom de classe

Prise en .less des références .css Styles. 

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

Utilisation avec React

Les icônes sont utilisées comme composants. v3.16.7+ Support. 

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

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

Dans le projet créé par Create-REACT-APP 

 import logo from './logo.svg' ;

< img src = { logo }  /> 
 import { ReactComponent as ComLogo } from './logo.svg' ;

< ComLogo />

Dans le projet créé par 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 />

En utilisant avec réactnatif

Un composant unique nommé d'après le nom de la police est généré.

Les accessoires sont TextProps et sont utilisés comme style en ligne.

De plus, l'hélice iConname est obligatoire et fait référence aux noms SVG écrits dans 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 ;

Contributeurs

Comme toujours, grâce à nos incroyables contributeurs!

Fait avec des contributeurs.

Licence

Licencié sous la licence du MIT.

Développer
Informations supplémentaires
Applications connexes
Recommandé pour vous
Actualités connexes Tout