小さなアイコンのフロントエンド処理ソリューションのグラフィカルな説明

序文

この記事を始める前に、複数選択の質問をしてみましょう。フロントエンド開発でビルドツールを使用する目的は何ですか?

A. 今はnode.jsが人気なので、誰もがビルドツールを使っています

B. フロントエンド開発をより高度化し、バックエンドと同様にコンパイルして実行する

C. コードのマージ、ブラウザのプレビュー効果の更新など、反復的な手動操作を自動化ツールに置き換えます。

A または B を選択した場合は、この記事をすぐに閉じてください。C を選択した場合は、読み続けてください。

実際、ツールを使用する目的はただ 1 つ、反復的な操作の一部を自動化し、作業効率を向上させることです。さて、この点を明確にしたので、多数の小さなアイコンを 1 つの画像ファイルに結合し、対応するスタイルを生成する方法をいくつか検討してみましょう。

生成されるファイルと使用方法に応じて、大きく分けて次の 3 種類の処理方法に分けられます。

png スプライト

Synthetic Sprite は、さまざまな PNG アイコンを 1 つの PNG 画像に結合する、最も古くて成熟したソリューションです。

手動操作

企業によっては、UI デザイナーに小さなアイコンの結合を依頼するところもあります (UI デザイナーは自動化ツールになっていて、恥ずかしいですね～)。これにより、フロントエンドの作業負荷は軽減されますが、いくつかの問題も発生します。

コミュニケーションの問題。アイコンの色やサイズを単純に変更したいだけの場合は、デザイナーとコミュニケーションを取る必要があり、時間コストが増加します。
スタイルの問題。デザイナーが提供する小さなアイコンはそのまま使用することはできず、特定のスタイル (オフセット値、サイズ) と組み合わせて使用する必要があります。
命名の問題。 CSSファイルを提供してくれる有能なデザイナーがいても、スタイルクラスの命名がフロントエンド開発の標準や要件を満たすのは難しいです（そのようなデザイナーがいたら、ぜひプライベートメッセージで推薦してください（●^◡^●））

したがって、このアプローチは推奨されず、ここでの議論の範囲外となります。

自動化ツール

自動化ツールがあれば、いくつかの問題を解決してプロセス全体を最適化することができます。

psd に従って小さなアイコンを切り取り (フロントエンドに必須、自分で行う、十分な食料と衣服を用意する)、小さなアイコンをソースフォルダーに配置します。
ビルドツールは、画像と CSS ファイルを自動的に生成し、小さなアイコン名に基づいて対応するスタイル名を生成します。
スタイルと画像をコードにインポートします。

設定ファイル

プロセス全体を実装するには、npm の gulp.spritesmith モジュールを例に挙げます。

これは gulpfile.js で設定されたタスクです。

var gulp = require('gulp');
var $ = require('gulp-load-plugins')();

gulp.task('png', 関数() {
  gulp.src('./src/*.png')
    .pipe($.spritesmith({
      imgName: 'icon.png', // パラメーター、生成された画像ファイル名 cssName: 'icon.css', // パラメーター、生成されたスタイルファイル名 cssTemplate: './src/png_template.hbs' // パラメーター、スタイルファイルテンプレートのパス、デフォルトは handlerbars テンプレートです }))
    .pipe(gulp.dest('dist/png'));
});

強力な機能を備えています。CSS ファイルに加えて、SCSS ファイルや Less ファイルも生成でき、テンプレートファイルでフォーマットすることもできます。ここでは、次の内容で png_template.hbs ファイルをカスタマイズしました。

// 主にアイコンにインラインブロックレベルのスタイルを与えるために共通のスタイルを追加します。icon {
  表示: インラインブロック;
}
{{#スプライト}}
.icon-{{name}} {
  背景画像: url({{{escaped_image}}});
  背景位置: {{px.offset_x}} {{px.offset_y}};
  幅: {{px.width}};
  高さ: {{px.height}};
}
{{/スプライト}}

開発プロセス

設定が完了したら、デバッグ用に 2 つの小さなアイコン (question.png と hook.png) をソースフォルダーに配置します。

gulp 処理後、icon.css と icon.png の 2 つのファイルが生成されます。 icon.css を開くと、アイコン名に応じて 2 つのスタイルクラスが生成されていることがわかります。

.アイコン {
  表示: インラインブロック;
}
.アイコンフック{
  背景画像: url(icon.png);
  背景位置: -40px 0px;
  幅: 16px;
  高さ: 16px;
}
.icon-質問{
  背景画像: url(icon.png);
  背景位置: 0px 0px;
  幅: 40px;
  高さ: 40px;
}

コード内での使用は簡単です

// 生成された CSS ファイルを参照します <link rel="stylesheet" href="./png/icon.css" charset="utf-8">
...
// タグに直接スタイル クラスを追加します <i class="icon icon-hook"></i>
<i class="icon icon-question"></i>

プレビュー効果については記事の最後にあるスクリーンショットをご覧ください。

質問

技術の進歩と人々の生活水準の向上のおかげで、この効率的な方法はすぐに「天敵」、つまり高 DPR の網膜スクリーンに遭遇しました。

応答性を使用して DPR を決定すると、これまでの作業負荷がすべて 2 倍になり、冗長なスタイルも読み込む必要があります。しかも画面が更新されるごとにDPRも増えて、余計な絵やスタイルを作らないといけないので、考えただけでも疲れます-_-||

では、異なる DPR の画面に適応できる画像はあるのでしょうか? CSS3 の登場により、私たちは新たな方向性を見出すことができました。

フォント

フォントアイコンとも呼ばれるこのテクノロジは、ベクターグラフィックを組み合わせてフォントファイルを生成し、CSS 内の対応するフォントエンコーディングを参照して画像にレンダリングするだけです。フォントはさまざまな画面に適応するため、フォントアイコンもこの利点を継承します。

手動操作

フォントアイコンを作成する Web サイトは多数ありますが、人気のあるものとしては icomoon、Alibaba Icon Library などがあります。

基本的な操作は、アイコンをオンラインで編集し、フォントファイルとスタイルを含む圧縮パッケージをダウンロードすることです。最初の問題は、アイコンのサイズが異なると、font-size 属性を手動で調整する必要があることです。2 つ目は、アップロード - 編集 - ダウンロードという手動操作が頻繁すぎることです。最後の問題は、ネットワーク環境に依存し、ネットワークがないとアイコンを編集できないことです。この場合、自動化ツールを使用してオフラインでファイルを生成しようとしました。

自動化ツール

GitHub で多数のスターを獲得しているモジュール gulp-iconfont は引き続き使用されますが、同時に CSS を生成するために別のモジュール gulp-iconfont-css が必要になります。

設定ファイル

gulpfile.js を設定する

var gulp = require('gulp');
var $ = require('gulp-load-plugins')();

gulp.task('アイコンフォント', 関数() {
  // 最初にスタイルを設定し、次にフォントファイルを設定します return gulp.src(['src/*.svg'])
    .pipe($.iconfontCss({
      fontName: 'iconfont', //フォント名 path: './src/font_template.css', //テンプレートファイルパス cssClass: 'iconfont' //スタイルクラス名 }))
    .pipe($.iconfont({
      fontName: 'iconfont', //フォント名形式: ['ttf', 'eot', 'woff', 'woff2', 'svg'] //出力フォントファイル形式}))
    .pipe(gulp.dest('dist/font'));
});

テンプレートファイルはここでは省略します〜

開発プロセス

設定が完了したら、デバッグ用に 2 つの小さなアイコン (question.svg と hook.svg) をソースフォルダーに配置します。

gulp 処理後、_icon.css、iconfont.eot、iconfont.svg、iconfont.ttf、iconfont.woff、iconfont.woff2 の 6 つのファイルが生成されます。 _icon.css を開くと、アイコン名に応じて 2 つのスタイルクラスが生成されていることがわかります。

@フォントフェイス {
 フォントファミリ: "アイコンフォント";
 ソース: url('./iconfont.eot');
 ソース: url('./iconfont.eot?#iefix') フォーマット('eot'),
  url('./iconfont.woff2') フォーマット('woff2'),
  url('./iconfont.woff') フォーマット('woff'),
  url('./iconfont.ttf') フォーマット('truetype'),
  url('./iconfont.svg#iconfont') フォーマット('svg');
}

.iconfont:before {
 フォントファミリ: "アイコンフォント";
  -webkit-font-smoothing: アンチエイリアス;
  -moz-osx-font-smoothing: グレースケール;
 フォントスタイル: 通常;
 フォントバリアント: normal;
 フォントの太さ: 標準;
 /* 発言: なし; プライベート Unicode 範囲 (firstGlyph オプション) を使用しない場合にのみ必要 */
 テキスト装飾: なし;
 テキスト変換: なし;
}


.iconfont-hook:before {
 内容: "\E001";
}

.iconfont-question:before {
 内容: "\E002";
}

コード内での使用も簡単

// 生成された CSS ファイルを参照します <link rel="stylesheet" href="./font/_icons.css" charset="utf-8">

...

// タグに直接スタイル クラスを追加します <i class="iconfont iconfont-hook"></i>
<i class="iconfont iconfont-question"></i>

プレビュー効果については記事の最後にあるスクリーンショットをご覧ください。

使用上の問題

前に紹介したツールと同様に、テンプレートを使用して、複数の形式で scss、less、css ファイルを生成できます。厄介な問題は、生成されたすべてのフォントアイコンが最も高いアイコンの高さを占有することです。つまり、一部のアイコンの高さをリセットする必要があるということです。自動操作が一瞬で半自動にダウングレードされ、生成された画像がギザギザになった（設定の問題なのかは分かりませんが）ので、失敗した解決策としか言いようがありません。

svg スプライト

ちょうど落ち込んでいたときに、張新旭の「未来のホット：SVGスプライト技術入門」という記事を見つけました。

(最後の結論ではフォントアイコンと svg スプライトを比較しています。興味のある方はご覧ください) 明るい未来があると感じました。より強力な svg スプライトがあることが判明しました。 SVG ベクターアイコンを 1 つの SVG ファイルに統合し、シンボルの形式で表示したり、使用時にタグを使用したりします。

手動操作

このソリューションを検討する際、手動の方法を使用する予定はありませんでした。手動操作が必要な場合は、フォントアイコンを使用する方がよいため、自動化ツールを直接検討しました。

自動化ツール

使用されるモジュールは gulp-svg-sprite で、これは gulp-svgstrore に次いで github で 2 番目に多くのスターを獲得しています。 scss、less、css ファイル形式の出力をサポートします。

設定ファイル

var gulp = require('gulp');
var $ = require('gulp-load-plugins')();

gulp.task('svg', 関数() {
  gulp.src('./src/*.svg') を返します
  .pipe($.svgスプライト({
    モード: {
      シンボル: {
        プレフィックス: `.svg-`,
        寸法: '%s',
        スプライト: '../icon.svg',
        シンボル: true、
        与える： {
          css: {
            保存先: '../icon.css'
          }
        }
      }
    }
  }))
  .pipe(gulp.dest('dist/svg'));
});

開発プロセス

全体のプロセスは上記と同じです。設定が完了したら、デバッグ用に 2 つの小さなアイコン (question.svg と hook.svg) をソースフォルダーに配置します。

gulp 処理後、icon.svg と icon.css の 2 つのファイルが生成されます。 icon.css を開くと、アイコン名に応じて 2 つのスタイルクラスが生成されていることがわかります。

.svgフック{
 幅: 16px;
 高さ: 16px;
}

.svg-質問{
 幅: 40px;
 高さ: 40px;
}

とても簡潔ですね。！！

使い方は少し複雑です:

//スタイルファイルを参照 <link rel="stylesheet" href="./svg/icon.css" charset="utf-8">

...

<svg クラス="svg-hook">
  <xlink:href="./svg/icon.svg#hook" を使用></use>
</svg>
<svg クラス="svg-question">
  <xlink:href="./svg/icon.svg#question" を使用></use>
</svg>

プレビュー効果については記事の最後にあるスクリーンショットをご覧ください。

フォントアイコンと比較すると:

フォントアイコンと比較すると、SVGアイコンはグラデーションやカラーアイコンもサポートしていると言われています。
サイズを変更するには、フォントサイズを調整するという「曲線を節約する」方法ではなく、幅と高さの属性を調整するだけです。
塗りつぶしの色も非常に簡単で、fill 属性の値を設定するだけです (前提として、svg では fill は使用できません。svg に独自の fill 属性がある場合は、設定は無効になります)。

使用上の問題

すべての IE ブラウザ (IE11 を含む) は、外部 SVG ファイルの特定のコンポーネントの取得をサポートしていません。しかし、これも簡単に解決できます。サードパーティの js (svg4everybody) を使用するだけです。

要約する

記事に記載されているコードアドレス：https://github.com/yalishizhude/sprite-demo またはローカルにダウンロードすることもできます