目次
需要の背景
エンタープライズプロジェクトの開発プロセス、特に H5 ページやアプレットの開発では、いくつかのアイコンを使用することは避けられませんが、既存の UI コンポーネント ライブラリによっては、直接使用できるいくつかのアイコンも提供されていますが、これらのアイコンが満たせない場合は、基本的にアイコンが使用されます。プロジェクトのニーズに合わせて、いくつかのカスタム アイコンを導入する必要がありますが、この記事では主に、vue3 プロジェクトに Ali のモノクロおよびカラー フォント アイコンを導入する方法を詳しく紹介します。如果觉得本篇文章对您有帮助，还望点赞、收藏+关注一下，希望能够帮助到更多需要的小伙伴,谢谢！
vue3プロジェクトを作成する
この記事のケース コードは、vite を使用して vue3 プロジェクトを作成することです。フォント アイコンの使用は、ビルド ツールとは何の関係もありません。すでにプロジェクトがある場合は、この手順をスキップできます。
次のコマンドを実行して vue3 プロジェクトを作成します。
# npm 6.x
npm create vite@latest iconfont-vue-app --template vue
# npm 7+, npm7+以上版本使用以下命令创建
npm create vite@latest iconfont-vue-app -- --template vue
プロジェクトの作成後、プロジェクトのルート ディレクトリに移動してnpm iインストールの依存関係を実行し、npm run devインストールの完了後にスタートアップ プロジェクトを実行します。
プロジェクト内で参照されるモノクロフォントアイコン
いわゆるモノクロフォントアイコンは、1 色の設定のみをサポートするアイコンです。モノクロフォントアイコンの参照方法には、 1. Unicode による参照方法2. フォントクラスのクラス名による参照方法 の
2 種類があります。
フォントアイコンをダウンロード:
まず、 Alibaba ベクター アイコン ライブラリに移動して、プロジェクトに必要なアイコンをダウンロードします
。 プロジェクトに追加:
ダウンロード アイコン:
ダウンロードして解凍すると、次のディレクトリ構造が得られます。
フォント アイコンをプロジェクトにインポートします。
iconfont.css ファイルと iconfont.ttf ファイルをプロジェクトにコピーします。ここでは、それらを/src/assets/iconfontプロジェクトのルート ディレクトリの下のディレクトリにコピーしました。
次に、iconfont.css ファイルを main.js にグローバルにインポートします。
Unicode 参照方法:
Unicode は、Web ページ上のフォントの最も独創的な適用方法であり、その特徴は次のとおりです:
1. 最高の互換性、IE6 以降およびすべての最新ブラウザをサポートします。
2. フォントに応じてアイコンのサイズ、色などを動的に調整する機能をサポートします。
3. ただしフォントなので多色には対応していません。プラットフォームではモノクロのアイコンのみを使用できます。プロジェクト内に複数色のアイコンがある場合でも、それらは自動的に脱色されます。
テンプレート内のフォント アイコンを参照します。
<span class="iconfont"></span>
フォントクラスのクラス名の参照方法（推奨方法）：
Font-class は Unicode の使用法の一種で、主に Unicode の直感的でない記述とあいまいなセマンティクスの問題を解決します。
Unicode の使用と比較すると、次のような特徴があります。
1. 優れた互換性、IE8 以降およびすべての最新ブラウザをサポートします。
2. Unicode と比較して、セマンティクスが明確で、記述がより直感的です。このアイコンが何であるかは簡単にわかります。
3. クラスはアイコンの定義に使用されるため、アイコンを置き換える必要がある場合は、クラス内の Unicode 参照のみを変更する必要があります。
4. ただし、基本的にはフォントが引き続き使用されているため、多色のアイコンはまだサポートされていません。
テンプレート内のフォント アイコンを参照します。
<span class="iconfont icon-gouwuche"></span>
プロジェクト参照の色付きアイコン
いわゆるカラー アイコンとは、複数の色を使用したアイコンを指します。カラー アイコンの特徴は次のとおりです:
1. 単色の制限がなくなり、複数色のアイコンがサポートされます。
2. いくつかの技術により、フォントのサイズや色などのスタイルを調整することがサポートされています。
3. 互換性は低く、IE9 以降および最新のブラウザをサポートします。
カラーアイコンをダウンロード:
同様に、Alibaba ベクター アイコン ライブラリに移動して、必要な色のアイコンを検索してダウンロードします。
次に、それをプロジェクトに追加し、ダウンロード アイコンをクリックします。
ダウンロードが完了したら、解凍して次のディレクトリ構造を取得します。
プロジェクトに色付きのアイコンを導入します。
彩色图标是不能直接引入到项目中使用的，需要借助第三方的iconfont-tools工具转换为对应的css文件才能引入到项目中使用！
iconfont-tools ツールをグローバルにインストールします。
npm install -g iconfont-tools
次に、解凍したディレクトリでiconfont-toolsコマンド。プロンプトに従って、デフォルトで Enter キーを押すか、目的のファイル名とその他の情報を入力します。
最後に、iconfont-weapp フォルダーが現在のディレクトリに生成されます。
このフォルダー内の iconfont-weapp-icon.css ファイルをプロジェクト/src/assets/iconfontディレクトリにコピーし、スタイル ファイルを main.js ファイルにグローバルにインポートします。
最後に、クラス名を使用してテンプレート内で色付きのアイコンを使用できるようになります。
<span class="t-icon t-icon-feiji"></span>
**最后再啰嗦一下**：
t-icon は、iconfont-tools コマンドの実行時に入力された CSS プレフィックスに対応します。フォント アイコンのクラス名には、プレフィックス t- を付ける必要があります。
まだ理解できない友達も、iconfont-weapp-icon.cssツールで生成されたファイルを開けば理解できるでしょう。
作成するのは簡単ではありませんが、この記事が役に立ったと思われる場合は、「いいね！」、ブックマーク + フォロー、サポートをお願いします。ありがとうございます。