ホーム>Web サイト構築リソース>フォントのダウンロード
ダウンロード

無料のフォント

SVGアイコンのセットを読み、svgアイコンのフォントのジェネレーターであるTTF/eot/woff/woff2/svgフォントをourutします。

インストール・使用量・コマンド・フォントの使用法・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"をクリックします。 _空白
    e "https://yesicon.app/" "216,162トップデザインチームから高品質のベクトルアイコンをクリックします。 _空白
    c .-> ide1
    サブグラフIDE1 [プロジェクト]
        svg-> a2 [svgtofont create font]
        a2 .-> b3 [フォントを使用]
    終わり
読み込み

svgtofontによって作成されたアイコンフォント

  • ファイルツリー内のファイルアイコンファイルアイコン。
  • uiw-iconfont @uiwjsコンポーネントライブラリのプレミアムアイコンフォント。 React ＆ TypeScriptをサポートします。
  • ブートストラップアイコンフォント公式オープンソースSVGアイコンライブラリ用ブートストラップ。
  • テスト例簡単なテストの例では、ルートディレクトリでnpm run testを実行して結果を確認します。

インストール

npm i svgtofont

注記

このパッケージv5+はESMのみです。ノード18+はそれを使用する必要があり、 require代わりにimport必要があります。 

 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

タイプ： config?: AutoConfOption<SvgToFontOptions>

デフォルトでは、設定は.svgtofontrcおよびpackage.jsonから自動的にロードされます。 package.jsonに構成を追加できます。 ＃48

.svgtofontrcおよびその他の構成ファイルのサポート。

ログ

タイプ： Boolean

falseの値はログを無効にします

ロガー

タイプ： (msg) => void

ログコールバック関数

区別

タイプ： String
デフォルト値： dist => fonts

出力ディレクトリ。

autsvgreact

タイプ： Boolean
デフォルト値： false

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

output ./dist/reactNative/は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 > ) ;
} ;

autsvgpath

タイプ： Boolean
デフォルト値： false

output ./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 ( ) ;

GeneateInfodata

タイプ： Boolean
デフォルト値： false

output ./dist/info.json 、コンテンツは次のとおりです。 

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

SRC

タイプ： String
デフォルト値： svg

出力パス

emptydist

タイプ： String
デフォルト値： false

クリア出力ディレクトリの内容

fontname

タイプ： String
デフォルト値： iconfont

あなたが望むフォント姓。

styletemplates

タイプ： Stringデフォルト値： undefined

テンプレートのパス、 src/stylesまたはtest/templates/stylesを参照して、テンプレートを作成する方法について参照するには、ファイル名がfilename.scss.templateなどの拡張機能を持つことができます。

startunicode

タイプ： Number
デフォルト値： 0xea01

Unicode開始番号

getConunicode

アイコンUnicodeを取得します

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

usenameasunicode

タイプ： Boolean
デフォルト値： false

名前（ファイル名）はUnicodeとして使用する必要がありますか？このスイッチにより、字字のサポートが可能になります。

addのファイル名が付いたSVGがあり、そのためにライガチュアを使用するとしましょう。上記のように処理をセットアップし、このスイッチをオンにします。 

 {
  ...
  useNameAsUnicode : true
}

処理中、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 >

USECSVARS

タイプ： Boolean
デフォルト値： false

{{cssstring}}テンプレートがUnicode文字またはCSS varsを出力するたびにコンソール

classNamePrefix

タイプ： 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値

必要なフォントID。

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

UNIXタイムスタンプ（秒単位）で作成時間をオーバーライドします

svg2ttf.version

タイプ： Number

フォントバージョン文字列、バージョンxyまたはxyにすることができます。

Webサイト

プレビューWebコンテンツを定義します。例： 

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

website.template

タイプ： String
デフォルト値：index.njk

カスタムテンプレートはパラメーターをカスタマイズできます。デフォルトのテンプレートに基づいて、独自のテンプレートを定義できます。 

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

website.index

タイプ： 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

プレビューDEMOFONT 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 >

クラス名

.lessおよび.cssスタイル参照のサポート。 

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

ReactNativeで使用します

フォント名にちなんで名付けられた一意のコンポーネントが生成されます。

小道具はテキストプロップであり、インラインスタイルとして使用されます。

さらに、iconname Propは必須であり、Camelcaseで書かれた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ライセンスに基づいてライセンスされています。

拡大する
追加情報
関連アプリ
おすすめ
関連情報 すべて