iconfountを使用して複数のsvgアイコンをフォントアイコンセットに生成

フォントアイコン(Iconfont)のメリットとデメリット
メリット

ズームがぼやけない

の一連のリソースは、Web、iOS、Androidなどの複数のプラットフォームで

を使用できます.

ワンタッチで肌を入れ替え、画像の色を変更しやすく、画像は

を多重化する.

パケット体積をある程度減らす

プロジェクトのモジュール化に有利

欠点

アイコン作成/更新コストが高い

単色

のみ対応
フォントアイコンを生成するには
1.UIはネーミング仕様のsvgピクチャを提供する

ピクチャネーミング意味化された英語ネーミング

同じ種類のピクチャに対しては、sidebar 1、sidebar 2、sidebar 3・・・

などの先端にパラメータと参照を追加するのに便利なロットネーミングを採用することが望ましい.

すべてのsvg画像を同じフォルダの下に置く

2.フロントエンドにトランスコードツールiconfountを取り付けるiconfountはオフラインicon font生成ツールであり、複数のsvgファイルからフォントセットと対応するスタイルファイルを生成することをサポートします.
グローバルインストールiconfountnpm install -g iconfount or yarn global add iconfount .
iconfountのインストール場所を見つけます
デフォルトパス:C:UsersxxxAppDataRoamingpmode_modules\iconfount
構成アイテムの変更

iconfountフォルダの下にあるsample/svnを見つけて空にし、自分のsvnピクチャを

にすべて追加します.

iconfountフォルダの下のsample/configを修正する.jsonプロファイル

「hinting」:true、false

に変更

"glyphs":以下は元のルールに従って自分のsvgピクチャ名に変更します(すべてのピクチャを記入しなければなりません.このステップは最も煩雑です)

‘’css_prefix_text'':'''iconfount-icon-''は任意の文字に変更できます.推奨は'''icon-''に変更できます.参照構成は次のとおりです.

{
  "name": "iconfount",
  "output": "../build",
  "hinting": false,
  "units_per_em": 1000,
  "ascent": 850,
  "weight": 400,
  "start_codepoint": 59392,
  "glyphs_dir": "./svg",
  "glyphs": [{
    "keywords": ["dingbulan1"],
    "src": "dingbulan1.svg",
    "css": "dingbulan1"
  }],
  "meta": {
    "author": "Youzan FE",
    "license": "MIT",
    "license_url": "https://opensource.org/licenses/MIT",
    "homepage": "http://www.youzan.com",
    "css_prefix_text": "icon-",
    "css_use_suffix": false,
    "columns": 4,
    "filename_hash": true
  }
}       

iconfountフォルダの下のpackageを変更します.jsonプロファイル(コマンドライン操作を容易にするための推奨操作のみ)

"scripts": {
    "start": "node bin/fount.js -c sample/config.json"
 },

ビルド操作の実行
iconfountフォルダの下でコマンドラインを開き、npm startを実行できます.
生成されたbuildファイルの変更
npm startを実行すると、iconfountフォルダの下にbuildファイルが1つ増えていることがわかります.このファイルを開き、demoをオンにします.htmlでは、すべてのフォントアイコンが表示され、クラス名が参照されます.
コンパクトビルドファイル
buildの下にcssフォルダの下にあるiconfount.を保存するだけです.css,fontファイルの下のiconfount-2 e 7 a 085 be.woffファイルとプレビューのdemo.htmlでいいです.残りのファイルは全部削除して、残った3つのファイルの中の役に立たないパスを削除して大功を成し遂げたことを覚えています.