Download do svgtofont - svgtofont Código do código -fonte Download

Fonte grátis

Leia um conjunto de ícones SVG e OPUT A TTF/EOT/WOFF/WOFF2/SVG Font, gerador de fontes de ícones SVG.

Instale · Uso · Comando · Uso da fonte · API · Opções · NPM · Licença

Características:

Formatos de fonte suportados: WOFF2 , WOFF , EOT , TTF e SVG .
Suporte o arquivo de símbolo SVG.
Suporte React , ReactNative & TypeScript .
Suporte Less / Sass / Stylus .
Permite usar modelos personalizados (exemplo css , less e etc).
Gerar automaticamente um site de visualização.

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

 Gráfico LR;
    A [iconFont]-> C [download svg];
    B [ICOMOON]-> C;
    D [icongo]-> C;
    E [yesicon]-> c;
    Clique em um "https://www.iconfont.cn" "阿里巴巴矢量图标库" _blank
    Clique em B "https://icomoon.io" "Pixel Perfect Icon Solutions" _blank
    Clique em D "https://icongo.github.io" "incluem ícones populares em seus projetos de reação facilmente ícones". _em branco
    Clique em "https://yesicon.app/" "216,162 ícones vetoriais de alta qualidade das equipes de design de topo". _em branco
    C .-> ide1
    SUBRAPHE IDE1 [Projeto]
        svg -> a2 [svgtofont Criar fonte]
        A2 .-> B3 [Use fonte]
    fim

Fonte de ícone criada por svgtofont

Ícones de arquivo de arquivo-icons na árvore de arquivos.
Uiw-iconFont A fonte do ícone premium para biblioteca de componentes @UIWJS. Suporte React & TypeScript .
Ícones de Bootstrap Fonte Official de código aberto SVG Biblioteca para Bootstrap.
Exemplo de teste Para um exemplo simples de teste, execute npm run test no diretório raiz para ver os resultados.

Instalar

npm i svgtofont

Observação

Este pacote v5+ é apenas ESM: o nó 18+ é necessário para usá -lo e deve ser import em vez de require .

 import svgtofont from 'svgtofont' ;

Usando com comando

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

Você pode adicionar configuração ao package.json. #48

Suporte para .svgtofontrc e mais arquivos de configuração.

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

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

Usando com nodejs

Observação

Este pacote v5+ agora é Pure ESM. Por favor, leia isso.

 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
}

opções

svgtofont (opções)

Config

TIPO: config?: AutoConfOption<SvgToFontOptions>

Por padrão, as configurações são carregadas automaticamente de .svgtofontrc e package.json . Você pode adicionar configuração ao package.json . #48

Suporte para .svgtofontrc e mais arquivos de configuração.

registro

Tipo: Boolean

Um valor de false desativa o registro

Logger

Tipo: (msg) => void

Função de retorno de chamada de log

dist

Tipo: String
Valor padrão: ~~dist~~ => fonts

O diretório de saída.

outvggreAct

Tipo: Boolean
Valor padrão: false

Saída ./dist/react/ , SVG gera 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 >
) ;

outvGreActnative

Tipo: Boolean
Valor padrão: false

Saída ./dist/reactNative/ , SVG gera 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 padrão: false

Output ./dist/svgtofont.json , o conteúdo é o seguinte:

 {
  "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 você pode gerar o arquivo separadamente:

 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

Tipo: Boolean
Valor padrão: false

Saída ./dist/info.json , o conteúdo é o seguinte:

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

src

Tipo: String
Valor padrão: svg

Caminho de saída

vazio

Tipo: String
Valor padrão: false

Conteúdo do diretório de saída claro

Fontname

Tipo: String
Valor padrão: iconfont

O nome da família da fonte que você deseja.

StyleTemplates

Tipo: String Valor padrão: undefined

O caminho dos modelos, consulte src/styles ou test/templates/styles para obter referência sobre como criar um modelo, os nomes de arquivos podem ter a extensão .template, como um filename.scss.template

startUnicode

Tipo: Number
Valor padrão: 0xea01

Número de inicialização unicode

geticoNunicode

Obtenha icon unicode

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

usenameasunicode

Tipo: Boolean
Valor padrão: false

O nome (nome do arquivo) deve ser usado como unicode? Esse interruptor permite o suporte de ligaduras.

Digamos que você tenha um SVG com um nome de arquivo de add e deseja usar ligaduras para ele. Você configuraria seu processamento como mencionado acima e ativaria esse interruptor.

 {
  ...
  useNameAsUnicode : true
}

Durante o processamento, em vez de usar um único char seqüencial para o Unicode, ele usa o nome do arquivo. O uso do nome do arquivo como Unicode permite que o código a seguir funcione conforme o esperado.

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

Ao adicionar mais SVGs e processá -los à sua fonte, você usaria o mesmo padrão.

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

USECSSVARS

Tipo: Boolean
Valor padrão: false

consoles sempre que {{cssString}} modelo saídas unicode caracteres ou css vars

ClassNameprefix

Tipo: String
Valor padrão: nome da fonte

Crie prefixo de nome da classe Fonte, nome da fonte do valor padrão.

CSS

Tipo: Boolean|CSSOptions
Valor padrão: false

Crie CSS/menos arquivos, padrão 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 é a configuração para svgicons2svgfont

svgicons2svgfont.fontname

Tipo: String
Valor padrão: 'iconfont'

O nome da família da fonte que você deseja.

svgicons2svgfont.fontid

Tipo: String
Valor padrão: O Valor das Opções.Fontname

O ID da fonte que você deseja.

svgicons2svgfont.fontstyle

Tipo: String
Valor padrão: ''

O estilo de fonte que você deseja.

svgicons2svgfont.fontweight

Tipo: String
Valor padrão: ''

O peso da fonte que você deseja.

svgicons2svgfont.fixedwidth

Tipo: Boolean
Valor padrão: false

Cria uma fonte monoespacial da largura do maior ícone de entrada.

svgicons2svgfont.centerhorizontalmente

Tipo: Boolean
Valor padrão: false

Calcule os limites de um glifo e centralize -o horizontalmente.

svgicons2svgfont.Normalize

Tipo: Boolean
Valor padrão: false

Normalize os ícones escalando -os para a altura do ícone mais alto.

svgicons2svgfont.FoTheight

Tipo: Number
Valor padrão: MAX(icons.height)

A altura da fonte em saída (padrão na altura do ícone de entrada mais alto).

svgicons2svgfont.Round

Tipo: Number
Valor padrão: 10e12

Configure o arredondamento do caminho SVG.

svgicons2svgfont.Descent

Tipo: Number
Valor padrão: 0

A descida da fonte. É útil consertar a linha de base da fonte.

Aviso: a descida é um valor positivo!

svgicons2svgfont.ascent

Tipo: Number
Valor padrão: fontHeight - descent

A fonte da fonte. Use essas opções apenas se você souber o que está fazendo. Um valor adequado para isso é calculado para você.

svgicons2svgfont.metadata

Tipo: String
Valor padrão: undefined

Os metadados da fonte. Você pode definir quaisquer dados de caracteres, mas é o local adequado para uma menção de direitos autorais.

svgicons2svgfont.log

Tipo: Function
Valor padrão: console.log

Permite fornecer sua própria função de registro. Defina como function(){} para desativar o log.

svgooptions

Tipo: OptimizeOptions Valor padrão: undefined

Algumas opções podem ser configuradas com svgoOptions . svgo

svg2ttf

Esta é a configuração para svg2ttf

svg2ttf.copyright

Tipo: String

string de direitos autorais

svg2ttf.ts

Tipo: String

Timestamp UNIX (em segundos) para substituir o tempo de criação

svg2ttf.version

Tipo: Number

String de versão da fonte, pode ser versão xy ou xy .

site

Defina o conteúdo da Web de visualização. Exemplo:

 {
  ...
  // 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.Template

Tipo: String
Valor padrão: index.njk

Modelo personalizado pode personalizar parâmetros. Você pode definir seu próprio modelo com base no modelo padrão.

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

Site.index

Tipo: String
Valor padrão: font-class , enum { font-class , unicode , symbol }

Defina a página inicial padrão.

Uso da fonte

Suponha que o nome da fonte seja definido como svgtofont , a página inicial padrão é unicode , gerará:

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

Visualizar Demo font-class.html , symbol.html e index.html . Estilo gerado automaticamente svgtofont.css e 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 >

Nome da classe

Suporte para referências de estilos .less e .css .

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

Usando com react

Os ícones são usados como componentes. v3.16.7+ Suporte.

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

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

No projeto criado por Create-React-App

 import logo from './logo.svg' ;

< img src = { logo }  />

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

< ComLogo />

No projeto criado 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 com reactnativo

Um componente exclusivo nomeado após o nome da fonte for gerado.

Os adereços são textprops e são usados como estilo embutido.

Além disso, o ICONNAME SPP é obrigatório e refere -se a nomes de SVG escritos em 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 sempre, graças aos nossos incríveis colaboradores!

Feito com colaboradores.

Licença

Licenciado sob a licença do MIT.

Expandir