Скачать svgtofont - Скачать исходный код svgtofont

Бесплатный шрифт

Прочитайте набор значков SVG и выпустите шрифт TTF/EOT/WOFF/WOFF2/SVG, генератор шрифтов из значков SVG.

Установка · Использование · Команда · Использование шрифта · API · Параметры · NPM · Лицензия

Функции:

Поддерживаемые форматы шрифтов: WOFF2 , WOFF , EOT , TTF и SVG .
Поддержите файл символа SVG.
Поддержка React , ReactNative & TypeScript .
Поддержка Less / Sass / Stylus .
Позволяет использовать пользовательские шаблоны (пример css , less и т. Д.).
Автоматически генерировать сайт предварительного просмотра.

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

 График LR;
    [Iconfont]-> c [Скачать SVG];
    B [iComoon]-> c;
    D [iCongo]-> c;
    E [yesicon]-> c;
    Нажмите на «https://www.iconfont.cn» «阿里巴巴矢量图标库» _blank
    Нажмите B "https://icomoon.io" "Pixel Perfect Icon Solutions" _blank
    Нажмите D "https://icongo.github.io" "Включите популярные значки в ваши проекты React, легко». _пустой
    Нажмите e "https://yesicon.app/" "216,162 высококачественных векторных значков от лучших команд дизайнеров". _пустой
    C .-> ide1
    Подграф IDE1 [Project]
        svg -> a2 [svgtofont create font]
        A2 .-> B3 [Используйте шрифт]
    конец

Шрифт икона, созданный Svgtofont

Значки файлов файлов в дереве файлов.
UIW-ICONFONT The Premium Icon Font для библиотеки компонентов @uiwjs. Поддержка React & TypeScript .
Значки начальной загрузки.
Пример теста Для простого испытательного примера запустите npm run test в корневом каталоге, чтобы увидеть результаты.

Установить

npm i svgtofont

Примечание

Этот пакет v5+ является только ESM: для его использования необходим узел 18+, и он должен быть import а не для require .

 import svgtofont from 'svgtofont' ;

Использование с командой

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

Вы можете добавить конфигурацию в package.json. #48

Поддержка .svgtofontrc и дополнительные файлы конфигурации.

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

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

Использование с Nodejs

Примечание

Этот пакет v5+ теперь является чистым ESM. Пожалуйста, прочитайте это.

 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
}

параметры

svgtofont (опции)

конфигурация

Тип: config?: AutoConfOption<SvgToFontOptions>

По умолчанию настройки автоматически загружаются из .svgtofontrc и package.json . Вы можете добавить конфигурацию в package.json . #48

Поддержка .svgtofontrc и дополнительные файлы конфигурации.

бревно

Тип: Boolean

Значение ложных false

регистратор

Тип: (msg) => void

Функция обратного вызова журнала

расстояние

Тип: String
Значение по умолчанию: ~~dist~~ => fonts

Выходной каталог.

outsvgreact

Тип: Boolean
Значение по умолчанию: false

Выход ./dist/react/ , SVG генерирует компоненты 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

Тип: Boolean
Значение по умолчанию: false

Выход ./dist/reactNative/ , SVG генерирует 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

Тип: Boolean
Значение по умолчанию: false

Вывод ./dist/svgtofont.json , контент заключается в следующем:

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

Или вы можете генерировать файл отдельно:

 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

Тип: Boolean
Значение по умолчанию: false

Вывод ./dist/info.json , контент выглядит следующим образом:

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

SRC

Тип: String
Значение по умолчанию: svg

выходной путь

пустой

Тип: String
Значение по умолчанию: false

Четкое содержание выходного каталога

FONTNAME

Тип: String
Значение по умолчанию: iconfont

Фамилия шрифта, которую вы хотите.

Стилеты

Тип: String значения по умолчанию: undefined

Путь шаблонов, см. src/styles или test/templates/styles , чтобы получить ссылку о том, как создать шаблон, имена файлов могут иметь filename.scss.template .

startUnicode

Тип: Number
Значение по умолчанию: 0xea01

Начальный номер Unicode

geticonicode

Получить значок Unicode

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

Usenameasunicode

Тип: Boolean
Значение по умолчанию: false

Следует ли использовать имя (имя файла) в качестве Unicode? Этот переключатель позволяет поддерживать лигатуры.

Допустим, у вас есть SVG с именем файла add , и вы хотите использовать для него лигатуры. Вы бы настроили свою обработку, как указано выше, и включите этот переключатель.

 {
  ...
  useNameAsUnicode : true
}

При обработке, вместо использования одного последовательного ChAR для Unicode, он использует имя файла. Использование имени файла в качестве Unicode позволяет следующему коду работать, как и ожидалось.

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

Когда вы добавляете больше SVG и обрабатываете их в свой шрифт, вы просто используете тот же шаблон.

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

Usecssvars

Тип: Boolean
Значение по умолчанию: false

Уборки всякий раз, когда {{CSSString}} Шаблон выводит символы Unicode или CSS VARS

Classnamprefix

Тип: String
Значение по умолчанию: имя шрифта

Создайте префикс имени класса шрифта, имя шрифта значения по умолчанию.

CSS

Тип: Boolean|CSSOptions
Значение по умолчанию: false

Создайте CSS/Less Files, по умолчанию 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

Это настройка для svgicons2svgfont

svgicons2svgfont.fontname

Тип: String
Значение по умолчанию: 'iconfont'

Фамилия шрифта, которую вы хотите.

svgicons2svgfont.fontid

Тип: String
Значение по умолчанию: значение options.fontname

Идентификатор шрифта, который вы хотите.

svgicons2svgfont.fontstyle

Тип: String
Значение по умолчанию: ''

Стиль шрифта, который вы хотите.

svgicons2svgfont.fontweight

Тип: String
Значение по умолчанию: ''

Вес шрифта, который вы хотите.

svgicons2svgfont.fixedwidth

Тип: Boolean
Значение по умолчанию: false

Создает моноспект шрифта ширины самого большого входного значка.

svgicons2svgfont.centerhorizontally

Тип: Boolean
Значение по умолчанию: false

Рассчитайте границы глифа и центрируйте его по горизонтали.

svgicons2svgfont.normalize

Тип: Boolean
Значение по умолчанию: false

Нормализуйте значки, масштабируя их до высоты самого высокого значка.

svgicons2svgfont.fontheight

Тип: Number
Значение по умолчанию: MAX(icons.height)

Выводированная высота шрифта (по умолчанию на высоту наивысшего входного значка).

svgicons2svgfont.round

Тип: Number
Значение по умолчанию: 10e12

Установка пути SVG.

svgicons2svgfont.descent

Тип: Number
Значение по умолчанию: 0

Шрифт спуск. Полезно самостоятельно исправить базовую линию шрифта.

Предупреждение: спуск - положительное значение!

svgicons2svgfont.scent

Тип: Number
Значение по умолчанию: fontHeight - descent

Подъем шрифта. Используйте эти варианты, только если вы знаете, что делаете. Подходящее значение для этого вычисляется для вас.

svgicons2svgfont.metadata

Тип: String
Значение по умолчанию: undefined

Метаданные шрифта. Вы можете установить любые данные символов, но это подходящее место для упоминания об авторском праве.

svgicons2svgfont.log

Тип: Function
Значение по умолчанию: console.log

Позволяет предоставить свою собственную функцию журнала. Установить на function(){} , чтобы отключить ведение журнала.

Svgooptions

Тип: OptimizeOptions Значение по умолчанию: undefined

Некоторые параметры могут быть настроены с помощью svgoOptions , хотя это. SVGO

SVG2TTF

Это настройка для svg2ttf

svg2ttf.copyright

Тип: String

Авторская строка

svg2ttf.ts

Тип: String

Unix TimeStamp (в секунды), чтобы переопределить время создания

svg2ttf.version

Тип: Number

Строка версии шрифта может быть версией xy или xy .

веб -сайт

Определите предварительный просмотр веб -контента. Пример:

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

сайт.template

Тип: String
Значение по умолчанию: index.njk

Пользовательский шаблон может настроить параметры. Вы можете определить свой собственный шаблон на основе шаблона по умолчанию.

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

веб -сайт.индекс

Тип: String
Значение по умолчанию: font-class , Enum { font-class , unicode , symbol }

Установите домашнюю страницу по умолчанию.

Использование шрифта

Предположим, что имя шрифта определяется как svgtofont , домашняя страница по умолчанию - unicode , будет генерировать:

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

Предварительный просмотр DEMO font-class.html , symbol.html и index.html . Автоматически сгенерированный стиль svgtofont.css и svgtofont.less .

Символ 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 >

Название класса

.css .less

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

Использование с React

Значки используются в качестве компонентов. v3.16.7+ поддержка.

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

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

В проекте, созданном с помощью Create-React-App

 import logo from './logo.svg' ;

< img src = { logo }  />

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

< ComLogo />

В проекте, созданном 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 />

Использование с реагированием

Уникальный компонент, названный в честь имени шрифта.

Реквизиты являются Textprops и используются в качестве встроенного стиля.

Кроме того, опора Iconname является обязательной и относится к именам SVG, написанным на 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 ;

Участники

Как всегда, благодаря нашим удивительным участникам!

Сделано с участниками.

Лицензия

Лицензирован по лицензии MIT.

Расширять