แบบอักษรฟรี
อ่านชุดไอคอน SVG และ ouput A TTF/EOT/WOFF/WOFF2/SVG แบบอักษรตัวสร้างแบบอักษรจากไอคอน SVG
ติดตั้ง·การใช้งาน·คำสั่ง·การใช้แบบอักษร· API ·ตัวเลือก· NPM ·ใบอนุญาต
คุณสมบัติ:
WOFF2 , WOFF , EOT , TTF และ SVGReact , ReactNative & TypeScriptLess / Sass / Styluscss 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" "โซลูชั่นไอคอน Perfect Perfect" _blank
คลิก d "https://icongo.github.io" "รวมไอคอนยอดนิยมในไอคอนปฏิกิริยาของคุณได้อย่างง่ายดาย" _ว่างเปล่า
คลิก e "https://yesicon.app/" "216,162 ไอคอนเวกเตอร์คุณภาพสูงจากทีมออกแบบชั้นนำ" _ว่างเปล่า
c .-> ide1
Subgraph IDE1 [โครงการ]
SVG -> A2 [SVGTOFONT สร้างแบบอักษร]
a2 .-> b3 [ใช้แบบอักษร]
จบ
ตัวอักษรไอคอนที่สร้างโดย SVGTOFONT
React & TypeScriptnpm 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" ,
} บันทึก
แพ็คเกจนี้ 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!' ) ;
} ) ; ; 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
ค่าเริ่มต้น:=>distfonts
ไดเรกทอรีเอาต์พุต
ประเภท:
Boolean
ค่าเริ่มต้น:false
เอาท์พุท ./dist/react/ 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 >
) ;ประเภท:
Boolean
ค่าเริ่มต้น:false
เอาท์พุท ./dist/reactNative/ 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 > ) ;
} ;ประเภท:
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 ( ) ;ประเภท:
Boolean
ค่าเริ่มต้น:false
เอาท์พุท ./dist/info.json เนื้อหามีดังนี้:
{
"adobe" : {
"encodedCode" : "\ea01" ,
"prefix" : "svgtofont" ,
"className" : "svgtofont-adobe" ,
"unicode" : ""
} ,
...
}ประเภท:
String
ค่าเริ่มต้น:svg
เส้นทางเอาท์พุท
ประเภท:
String
ค่าเริ่มต้น:false
ล้างเนื้อหาไดเรกทอรีเอาต์พุต
ประเภท:
String
ค่าเริ่มต้น:iconfont
ชื่อตระกูลตัวอักษรที่คุณต้องการ
ประเภท:
Stringค่าเริ่มต้น:undefined
เส้นทางของเทมเพลตดู src/styles หรือ test/templates/styles เพื่อรับการอ้างอิงเกี่ยวกับวิธีการสร้างเทมเพลตชื่อไฟล์สามารถมีส่วนขยาย. template เช่น filename.scss.template
ประเภท:
Number
ค่าเริ่มต้น:0xea01
หมายเลขเริ่มต้น Unicode
รับไอคอน Unicode
getIconUnicode?: ( name : string , unicode : string , startUnicode : number )
=> [ string , number ] ;ประเภท:
Boolean
ค่าเริ่มต้น:false
ควรใช้ชื่อ (ชื่อไฟล์) เป็น Unicode หรือไม่? สวิตช์นี้ช่วยให้สามารถรองรับ ligatures
สมมติว่าคุณมี SVG ที่มีชื่อไฟล์ add และคุณต้องการใช้ ligatures สำหรับมัน คุณจะตั้งค่าการประมวลผลของคุณตามที่กล่าวไว้ข้างต้นและเปิดสวิตช์นี้
{
...
useNameAsUnicode : true
}ในขณะที่การประมวลผลแทนที่จะใช้ถ่านลำดับเดียวสำหรับ 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 >ประเภท:
Boolean
ค่าเริ่มต้น:false
คอนโซลเมื่อใดก็ตาม
ประเภท:
String
ค่าเริ่มต้น: ชื่อตัวอักษร
สร้างคำนำหน้าชื่อคลาส FONT, ชื่อตัวอักษรค่าเริ่มต้น
ประเภท:
Boolean|CSSOptions
ค่าเริ่มต้น:false
สร้างไฟล์ CSS/น้อยลงจริง 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
ประเภท:
String
ค่าเริ่มต้น:'iconfont'
ชื่อตระกูลตัวอักษรที่คุณต้องการ
ประเภท:
String
ค่าเริ่มต้น: ตัวเลือกค่า fontname
ID ตัวอักษรที่คุณต้องการ
ประเภท:
String
ค่าเริ่มต้น:''
สไตล์ตัวอักษรที่คุณต้องการ
ประเภท:
String
ค่าเริ่มต้น:''
น้ำหนักตัวอักษรที่คุณต้องการ
ประเภท:
Boolean
ค่าเริ่มต้น:false
สร้างตัวอักษร monospace ของความกว้างของไอคอนอินพุตที่ใหญ่ที่สุด
ประเภท:
Boolean
ค่าเริ่มต้น:false
คำนวณขอบเขตของร่ายมนตร์และอยู่ตรงกลางในแนวนอน
ประเภท:
Boolean
ค่าเริ่มต้น:false
ทำให้ไอคอนปกติโดยการปรับสเกลให้อยู่ที่ความสูงของไอคอนสูงสุด
ประเภท:
Number
ค่าเริ่มต้น:MAX(icons.height)
ความสูงของตัวอักษรที่ส่งออก (ค่าเริ่มต้นถึงความสูงของไอคอนอินพุตสูงสุด)
ประเภท:
Number
ค่าเริ่มต้น:10e12
การตั้งค่าเส้นทางการปัดเศษ SVG
ประเภท:
Number
ค่าเริ่มต้น:0
การสืบเชื้อสายตัวอักษร มันมีประโยชน์ในการแก้ไขพื้นฐานตัวอักษรด้วยตัวคุณเอง
คำเตือน: การสืบเชื้อสายเป็นค่าบวก!
ประเภท:
Number
ค่าเริ่มต้น:fontHeight - descent
ตัวอักษรขึ้น ใช้ตัวเลือกนี้เฉพาะเมื่อคุณรู้ว่าคุณกำลังทำอะไรอยู่ ค่าที่เหมาะสมสำหรับสิ่งนี้ถูกคำนวณสำหรับคุณ
ประเภท:
String
ค่าเริ่มต้น:undefined
เมตาดาต้าแบบอักษร คุณสามารถตั้งค่าข้อมูลอักขระใด ๆ ใน แต่เป็นสถานที่ที่เหมาะสมสำหรับการกล่าวถึงลิขสิทธิ์
ประเภท:
Function
ค่าเริ่มต้น:console.log
ช่วยให้คุณสามารถให้ฟังก์ชั่นการบันทึกของคุณเอง ตั้งค่าเป็น function(){} เพื่อปิดใช้งานการบันทึก
ประเภท:
OptimizeOptionsค่าเริ่มต้น:undefined
ตัวเลือกบางตัวสามารถกำหนดค่าด้วย svgoOptions แม้ว่ามันจะ SVGO
นี่คือการตั้งค่าสำหรับ svg2ttf
ประเภท:
String
สตริงลิขสิทธิ์
ประเภท:
String
UNIX TIMESTAMP (ในไม่กี่วินาที) เพื่อแทนที่เวลาการสร้าง
ประเภท:
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 ดูตัวอย่างตัวอย่าง font-class.html , symbol.html และ index.html สไตล์ที่สร้างขึ้นโดยอัตโนมัติ svgtofont.css และ svgtofont.less
< 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 " >  </ span > สนับสนุนการอ้างอิงสไตล์ .less และ .css
< 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" / > import logo from './logo.svg' ;
< img src = { logo } /> import { ReactComponent as ComLogo } from './logo.svg' ;
< ComLogo /> 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 />ส่วนประกอบที่ไม่ซ้ำกันตั้งชื่อตามชื่อตัวอักษรถูกสร้างขึ้น
อุปกรณ์ประกอบฉากเป็นข้อความและใช้เป็นสไตล์อินไลน์
นอกจากนี้เสาไอคอนมีข้อบังคับและอ้างถึงชื่อ SVG ที่เขียนในอูฐ
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