uniapp が Alibaba アイコン ライブラリに基づいたカラフルなアイコン iconfont を導入

1. Alibaba ベクター アイコン ライブラリのリンク: https://www.iconfont.cn/を入力し、アイコンをプロジェクトに追加して、ローカルにダウンロードします。

2. ダウンロードしたファイルを解凍し、解凍したファイルの下にコマンド ラインを入力して、 iconfont-tools ツールをグローバルにインストールするコマンドを実行します。

npm install -g iconfont-tools

3. ツールをグローバルにダウンロードした後、フォルダーをクリックし、フォルダーのナビゲーション バーで cmd をクリックし、次のコードを実行して Enter キーを押します。開いたら、次のコードを実行します

。

iconfont-tools 

4. Enter キーを押します。

5. 最後のステップでは、フォルダーの下に生成した新しいフォルダー内の iconfont.css ファイルを使用します。


6. 次に、APP.vue ファイルの下にファイル名を入力します。

<style>
/* 彩色的图标*/
@import url("~@/static/icon/iconfont-weapp-icon.css");
</style>

7. 使用法: xk857-icon の先頭が必要です。色付きのアイコンは現在、vue ファイルに対して有効です。コンソールは背景について警告します。無視しても問題ありません。

<text class="xk857-icon icon-sheji-xianxing"></text>