svgtofont

خط مجاني

اقرأ مجموعة من أيقونات SVG و OUPUT خط 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 ؛
    A [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 الخاصة بك بسهولة أيقونات." _فارغ
    انقر فوق "https://yesicon.app/" "216،162 رموز المتجهات عالية الجودة من أفضل فرق التصميم." _فارغ
    ج .-> IDE1
    Subgraph IDE1 [Project]
        SVG -> A2 [SVGTofont إنشاء خط]
        A2 .-> B3 [استخدم الخط]
    نهاية

خط الرمز الذي أنشأته SVGTofont

• File-icons أيقونات الملفات في شجرة الملف.
• UIW-ICONFONT خط الأيقونة الممتازة لمكتبة مكون uiwjs. دعم React & TypeScript .
• رموز Bootstrap الخط الرسمي Open Source SVG Icon Library for Bootstrap.
• اختبار مثال للحصول على مثال اختبار بسيط ، قم بتشغيل npm run test في دليل الجذر لمعرفة النتائج.

ثَبَّتَ

npm i svgtofont

ملحوظة

هذه الحزمة v5+ هي ESM فقط: هناك حاجة إلى Node 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

دالة الاتصال السجل

dist

اكتب: String
القيمة الافتراضية: dist => fonts

دليل الإخراج.

Outvgreact

النوع: Boolean
القيمة الافتراضية: false

react ./dist/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

النوع: Boolean
القيمة الافتراضية: false

reactNative ./dist/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

النوع: 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 ( ) ;

cenderateinfodata

النوع: Boolean
القيمة الافتراضية: false

الإخراج ./dist/info.json ، المحتوى كما يلي:

 {
  "adobe" : {
    "encodedCode" : "\ea01" ,
    "prefix" : "svgtofont" ,
    "className" : "svgtofont-adobe" ,
    "unicode" : ""
  } ,
  ...
}

SRC

اكتب: String
القيمة الافتراضية: svg

مسار الإخراج

فارغة

اكتب: String
القيمة الافتراضية: false

محتويات دليل الإخراج

fontname

اكتب: String
القيمة الافتراضية: iconfont

اسم عائلة الخط الذي تريده.

styletemplates

اكتب: القيمة الافتراضية String : undefined

مسار القوالب ، راجع src/styles أو test/templates/styles للحصول على مرجع حول كيفية إنشاء قالب ، يمكن أن يكون لأسماء filename.scss.template .

startUnicode

النوع: Number
القيمة الافتراضية: 0xea01

رقم بدء Unicode

geticonunicode

احصل على أيقونة Unicode

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

usenameasunicode

النوع: Boolean
القيمة الافتراضية: false

هل يجب استخدام الاسم (اسم الملف) كوحدة يونيكود؟ يسمح هذا المفتاح بدعم Ligatures.

لنفترض أن لديك SVG مع اسم ملف add وتريد استخدام Ligatures لذلك. يمكنك إعداد المعالجة الخاصة بك كما هو مذكور أعلاه وتشغيل هذا المفتاح.

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

أثناء إضافة المزيد من SVGs ومعالجتها في خطك ، يمكنك فقط استخدام نفس النمط.

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

usecssvars

النوع: Boolean
القيمة الافتراضية: false

لوحات المفاتيح كلما {{CSSSTRING}} يخرج القالب أحرف Unicode أو CSS VARS

classnameprefix

اكتب: String
القيمة الافتراضية: اسم الخط

إنشاء بادئة اسم فئة الخط ، اسم خط القيمة الافتراضية.

CSS

النوع: Boolean|CSSOptions
القيمة الافتراضية: false

قم بإنشاء CSS/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
القيمة الافتراضية: القيمة

معرف الخط الذي تريده.

svgicons2svgfont.fontstyle

اكتب: String
القيمة الافتراضية: ''

نمط الخط الذي تريده.

svgicons2svgfont.fontweight

اكتب: String
القيمة الافتراضية: ''

وزن الخط الذي تريده.

svgicons2svgfont.fixedwidth

النوع: Boolean
القيمة الافتراضية: false

يخلق خطًا مونوسباس لعرض أكبر أيقونة الإدخال.

svgicons2svgfont.centerhorizontally

النوع: Boolean
القيمة الافتراضية: false

احسب حدود الحروف الرسومية ومركزها أفقياً.

svgicons2svgfont.normalization

النوع: Boolean
القيمة الافتراضية: false

قم بتطبيع الرموز عن طريق تحجيمها إلى ارتفاع أعلى أيقونة.

svgicons2svgfont.fontheight

النوع: Number
القيمة الافتراضية: MAX(icons.height)

ارتفاع الخط المخرج (الافتراضيات إلى ارتفاع أعلى أيقونة الإدخال).

svgicons2svgfont.round

النوع: Number
القيمة الافتراضية: 10e12

إعداد SVG مسار تقريب.

svgicons2svgfont.descent

النوع: Number
القيمة الافتراضية: 0

نزول الخط. من المفيد إصلاح خط الأساس بنفسك.

تحذير: الهبوط هو قيمة إيجابية!

svgicons2svgfont.ascent

النوع: 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

TIMESTAMP UNIX (بالثواني) لتجاوز وقت الخلق

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

موقع الويب

اكتب: 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 and index.html . تم إنشاؤه تلقائيًا svgtofont.css و svgtofont.less .

رمز SVG

< svg class = " icon " aria-hidden = " true " >
  < use xlink : href = " svgtofont.symbol.svg#svgtofont-git " ></ use >
</ svg >

يونيكود

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

اسم الفصل

الدعم لـ .less و .css Styles المراجع.

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

باستخدام رد فعل

يتم استخدام الرموز كمكونات. 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 Prop إلزامي ويشير إلى أسماء SVG مكتوبة في Camelase

 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 ; 

المساهمين

كما هو الحال دائمًا ، بفضل مساهمينا المذهلين!

صنع مع المساهمين.

رخصة

مرخصة بموجب ترخيص معهد ماساتشوستس للتكنولوجيا.