Descargar svgtofont - Descargar el código fuente de svgtofont

Fuente gratis

Lea un conjunto de iconos SVG y una fuente TTF/EOT/WOFF/WOFF2/SVG, Generador de fuentes de iconos SVG.

Instalar · Uso · Comando · Uso de fuente · API · Opciones · NPM · Licencia

Características:

Formatos de fuente compatibles: WOFF2 , WOFF , EOT , TTF y SVG .
Admite archivo de símbolos SVG.
Apoyo React , ReactNative & TypeScript .
Apoya Less / Sass / Stylus .
Permite usar plantillas personalizadas (ejemplo css , less y etc.).
Genere automáticamente un sitio de vista previa.

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

 gráfico LR;
    A [iconfont]-> c [descargar svg];
    B [icomoon]-> c;
    D [icongo]-> c;
    E [yesicon]-> c;
    Haga clic en "https://www.iconfont.cn" "阿里巴巴矢量图标库" _blank
    Haga clic en B "https://icomoon.io" "Pixel Perfect Icon Solutions" _Blank
    Haga clic en D "https://icongo.github.io" "Incluya iconos populares en sus proyectos React fácilmente iconos". _blanco
    Haga clic en E "https://yesicon.app/" "216,162 íconos de vectores de alta calidad de los mejores equipos de diseño". _blanco
    C .-> IDE1
    Subgraph IDE1 [proyecto]
        SVG -> A2 [SVGTOFONT CREAR FONT]
        A2 .-> B3 [Use fuente]
    fin

Fuente de icono creada por SVGTOFONT

File-Icons iconos de archivo en el árbol de archivos.
UIW-ICONFONT La fuente de icono premium para la biblioteca de componentes @uiwjs. Apoyo React & TypeScript .
Iconos de bootstrap Fuente Fuente Open Open Source SVG Icon Biblioteca para Bootstrap.
Ejemplo de prueba Para un ejemplo de prueba simple, ejecute npm run test en el directorio raíz para ver los resultados.

Instalar

npm i svgtofont

Nota

Este paquete v5+ es solo ESM: se necesita nodo 18+ para usarlo y debe ser import en lugar de require .

 import svgtofont from 'svgtofont' ;

Usando con comando

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

Puede agregar configuración a paquete.json. #48

Soporte para .svgtofontrc y más archivos de configuración.

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

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

Usando con NodeJS

Nota

Este paquete v5+ ahora es puro ESM. Por favor lea esto.

 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
}

opción

svgtofont (opciones)

configuración

Tipo: config?: AutoConfOption<SvgToFontOptions>

De forma predeterminada, la configuración se carga automáticamente desde .svgtofontrc y package.json . Puede agregar configuración a package.json . #48

Soporte para .svgtofontrc y más archivos de configuración.

registro

Tipo: Boolean

Un valor de false deshabilitar el registro

maderero

Tipo: (msg) => void

Función de devolución de llamada de registro

distrito

Tipo: String
Valor predeterminado: ~~dist~~ => fonts

El directorio de salida.

outsvGreAct

Tipo: Boolean
Valor predeterminado: false

Salida ./dist/react/ , SVG genera componentes 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 >
) ;

superpuesto

Tipo: Boolean
Valor predeterminado: false

Salida ./dist/reactNative/ , SVG genera componentes 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

Tipo: Boolean
Valor predeterminado: false

Salida ./dist/svgtofont.json , el contenido es el siguiente:

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

O puede generar el archivo por separado:

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

generarinfodatos

Tipo: Boolean
Valor predeterminado: false

Salida ./dist/info.json , el contenido es el siguiente:

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

SRC

Tipo: String
Valor predeterminado: svg

ruta de salida

vacío

Tipo: String
Valor predeterminado: false

Borrar contenido del directorio de salida

nombre

Tipo: String
Valor predeterminado: iconfont

El apellido de fuentes que desea.

styletemplates

Tipo: Valor predeterminado String : undefined

La ruta de las plantillas, consulte src/styles o test/templates/styles Para obtener referencia sobre cómo crear una plantilla, los nombres de archivos pueden tener la extensión .template, como un filename.scss.template

startunicode

Tipo: Number
Valor predeterminado: 0xea01

Número de inicio de Unicode

getiConunicode

Obtener icon unicode

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

usenameSunicode

Tipo: Boolean
Valor predeterminado: false

¿Debería usarse el nombre (nombre del archivo) como unicode? Este interruptor permite el soporte de ligaduras.

Supongamos que tiene un SVG con un nombre de archivo de add y desea usar ligaduras para ello. Configuraría su procesamiento como se mencionó anteriormente y encendería este interruptor.

 {
  ...
  useNameAsUnicode : true
}

Mientras se procesa, en lugar de usar un solo char secuencial para Unicode, usa el nombre del archivo. El uso del nombre del archivo como Unicode permite que el siguiente código funcione como se esperaba.

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

A medida que agrega más SVG y procesarlos en su fuente, simplemente usaría el mismo patrón.

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

usecssvars

Tipo: Boolean
Valor predeterminado: false

consolas cuando {{cssstring}} plantilla emite caracteres unicode o css vars

classNamePrefix

Tipo: String
Valor predeterminado: nombre de fuente

Crear nombre de nombre de clase Font, nombre de valor predeterminado Nombre de fuente.

CSS

Tipo: Boolean|CSSOptions
Valor predeterminado: false

Crear archivos CSS/MENOS, verdadero 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

Esta es la configuración de svgicons2svgfont

svgicons2svgfont.fontname

Tipo: String
Valor predeterminado: 'iconfont'

El apellido de fuentes que desea.

svgicons2svgfont.fontid

Tipo: String
Valor predeterminado: el valor de opciones.

La identificación de fuentes que deseas.

svgicons2svgfont.fontstyle

Tipo: String
Valor predeterminado: ''

El estilo de fuente que desee.

svgicons2svgfont.

Tipo: String
Valor predeterminado: ''

El peso de la fuente que desee.

svgicons2svgfont.

Tipo: Boolean
Valor predeterminado: false

Crea una fuente monoespacial del ancho del icono de entrada más grande.

svgicons2svgfont.centerhorizontalmente

Tipo: Boolean
Valor predeterminado: false

Calcule los límites de un glifo y céntelo horizontalmente.

svgicons2svgfont.normaly

Tipo: Boolean
Valor predeterminado: false

Normalice los íconos escalándolos a la altura del icono más alto.

svgicons2svgfont.fontheight

Tipo: Number
Valor predeterminado: MAX(icons.height)

La altura de fuente salida (predeterminada a la altura del icono de entrada más alto).

svgicons2svgfont.round

Tipo: Number
Valor predeterminado: 10e12

Configurar redondeo de ruta SVG.

svgicons2svgfont.Descent

Tipo: Number
Valor predeterminado: 0

El descenso de la fuente. Es útil arreglar la línea de base de la fuente usted mismo.

ADVERTENCIA: ¡ El descenso es un valor positivo!

svgicons2svgfont.verscente

Tipo: Number
Valor predeterminado: fontHeight - descent

El ascenso de la fuente. Use estas opciones solo si sabe lo que está haciendo. Se calcula un valor adecuado para esto.

svgicons2svgfont.metadata

Tipo: String
Valor predeterminado: undefined

Los metadatos de fuente. Puede establecer cualquier datos de caracteres, pero es el lugar adecuado para una mención de derechos de autor.

svgicons2svgfont.log

Tipo: Function
Valor predeterminado: console.log

Le permite proporcionar su propia función de registro. Establecer en function(){} para deshabilitar el registro.

svgooptions

Tipo: OptimizeOptions Valor predeterminado: undefined

Algunas opciones se pueden configurar con svgoOptions a pesar de él. svgo

svg2ttf

Esta es la configuración de SVG2TTF

svg2ttf.copyright

Tipo: String

cadena de derechos de autor

svg2ttf.ts

Tipo: String

Unix TimeStamp (en segundos) para anular el tiempo de creación

svg2ttf.versión

Tipo: Number

Cadena de versión de fuente, puede ser la versión xy o xy .

sitio web

Definir contenido web de vista previa. Ejemplo:

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

sitio web.template

Tipo: String
Valor predeterminado: index.njk

La plantilla personalizada puede personalizar los parámetros. Puede definir su propia plantilla en función de la plantilla predeterminada.

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

sitio web.dex

Tipo: String
Valor predeterminado: font-class , Enum { font-class , unicode , symbol }

Establezca la página de inicio predeterminada.

Uso de fuentes

Supongamos que el nombre de la fuente se define como svgtofont , la página de inicio predeterminada es unicode , generará:

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

Vista previa demo font-class.html , symbol.html y index.html . Estilo generado automáticamente svgtofont.css y svgtofont.less .

símbolo 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 >

Nombre de clase

Soporte para referencias .css .less

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

Usando con React

Los iconos se utilizan como componentes. v3.16.7+ soporte.

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

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

En el proyecto creado por create-react-app

 import logo from './logo.svg' ;

< img src = { logo }  />

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

< ComLogo />

En el proyecto creado por 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 />

Usando con reactnativo

Se genera un componente único que lleva el nombre del nombre de la fuente.

Los accesorios son TextProps y se utilizan como estilo en línea.

Además, el appOT iconName es obligatorio y se refiere a los nombres de SVG escritos en 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 ;

Colaboradores

Como siempre, ¡gracias a nuestros increíbles contribuyentes!

Hecho con contribuyentes.

Licencia

Licenciado bajo la licencia del MIT.

Expandir