iconfontアイコンライブラリをvueに導入するエレガントな実践記録

序文

この記事を書いた本来の目的は、チーム メンバーにプロジェクト アイコンの管理に SVG スプライトの使用を推奨することです。実際の作業では多くのプロジェクトで依然としてフォント クラスが使用されているため、無意識のうちに問題点が生じています。

プロジェクトの第一フェーズが完了すると、しばらくして第二フェーズに入ります。新しい開発要件により必然的に新しいアイコンが追加され、フォント クラスにはフルボリューム パッケージ化されたアイコンのフォント ファイルが必要になります。

新しい要件でアイコンが 1 つだけ追加される場合でも、フロントエンド開発者は古いアイコンを新しいアイコンと結合し、再パッケージ化してフォント ファイルを生成する必要があります。この結果は受け入れられません。
SVG スプライトはこの問題を完璧に解決できます。全体的な考え方としては、プロジェクト内のアイコンごとに SVG ファイルを生成し、SVG ファイルの数はアイコンの数と同じになります。

将来的に新しいアイコンを追加する場合は、新しい svg ファイルを追加するだけで済みます。既存のアイコンや svg ファイルは不要です。
この記事では、vue3を基本フレームワークとして、iconfontをアイコンライブラリとして使用し、アイコンの導入、使用、管理の全プロセスを段階的に実践します。また、記事の後半では、マルチテーマカラー変更モードでのsvgアイコンの対応処理も紹介します。

SVGを生成する

SVGスプライトの紹介

SVG スプライト テクノロジーは長い間存在してきました。詳細については、ここをクリックして、2014 年に執筆された Zhang Xinxu の記事「Future Will Be Hot: Introduction to SVG Sprites Technology」をご覧ください。

ここで簡単に紹介し、その後実践に移ります。SVG スプライトは主に、<symbol> と <use> という 2 つのタグ要素に基づいています。

<symbol> は要素をグループ化します。これはインターフェイスには表示されません。これはテンプレートを定義するのと同じです。<use> 要素はアイコンの参照とレンダリングに使用されます。

たとえば、下記のようなハートの形をした svg アイコンがあります (コードは次のとおりです)。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 幅="24px" 高さ="24px" ビューボックス="0 0 24 24">
        <path fill="#E86C60" d="M17,0c-1.9,0-3.7,0.8-5,2.1C10.7,0.8,8.9,0,7,0C3.1,0,0,3.1,0,7c0,6.4,10.9,15.4,11.4,15.8 c0.2,0.2,0.4,0.2,0.6,0.2s0.4-0.1,0.6-0.2C13.1,22.4,24,13.4,24,7C24,3.1,20.9,0,17,0z"></path>
</svg>

ここで、シンボル タグを使用して上記のパスの内容をラップします。コードは次のとおりです。

<svg>
    <シンボル viewBox="0 0 24 24" id="ハート">
        <path fill="#E86C60" d="M17,0c-1.9,0-3.7,0.8-5,2.1C10.7,0.8,8.9,0,7,0C3.1,0,0,3.1,0,7c0,6.4,10.9,15.4,11.4,15.8 c0.2,0.2,0.4,0.2,0.6,0.2s0.4-0.1,0.6-0.2C13.1,22.4,24,13.4,24,7C24,3.1,20.9,0,17,0z"></path>
    </シンボル>
</svg>

次に、 symbol で囲んだコード（コードは以下のとおり）をページに配置し、 display: none を追加して非表示にします。これは、ページに heart という id 名のアイコンを登録するのと同じです。

この時点で、ページの他の部分からこのアイコンを参照できます。参照方法は、svg タグに use タグを配置し、use タグの xlink:href に参照するアイコン ID を入力すると、インターフェイスにハートの形が表示されます。

<本文>
    <svg スタイル="display: none;">
        <シンボル viewBox="0 0 24 24" id="ハート">
            <path fill="#E86C60" d="M17,0c-1.9,0-3.7,0.8-5,2.1C10.7,0.8,8.9,0,7,0C3.1,0,0,3.1,0,7c0,6.4,10.9,15.4,11.4,15.8 c0.2,0.2,0.4,0.2,0.6,0.2s0.4-0.1,0.6-0.2C13.1,22.4,24,13.4,24,7C24,3.1,20.9,0,17,0z"></path>
        </シンボル>
    </svg>

    <svg>
        <use xlink:href="#heart" rel="external nofollow" /> <!-- アイコンを使用する -->
    </svg>
</本文>

プロジェクトアイコンを取得する

フロントエンドの学生は通常、設計図を受け取った後、プロジェクト全体に必要なすべてのアイコンを参照します。

Iconfont は、Alibaba のエクスペリエンス チームによって作成されたベクター アイコン ライブラリで、フロントエンド エンジニアが選択して使用できる多数のアイコンが含まれています。

ブラウザで iconfont の公式 Web サイトを開き、プロジェクトで使用するアイコンを選択して、マウスをアイコンに移動し、「ライブラリに追加」をクリックします。

すべてのアイコンを収集したら、ヘッドの右側にあるナビゲーション バーのショッピング カートをクリックすると、ポップアップ ボックスが表示されるので、[プロジェクトに追加] をクリックします。すべてのアイコンがプロジェクトに追加されることが確認されると、ページは自動的にナビゲーション バーの [リソース管理] - [マイ プロジェクト] の下のページにジャンプします (以下を参照)。

私たちの目標は、アイコンに対応する svg ファイルを生成することなので、ここでいくつかの設定を行う必要があります。上の図のプロジェクト設定オプションを開くと、ポップアップ ウィンドウが次のように表示されます。

ポップアップ フォント形式の列で、SVG オプションのみをオンにし、他のオプションはオフにします。設定後、[保存] ボタンをクリックします。

この時点でページが更新され、ページ上の「ローカルにダウンロード」ボタンをクリックすると、すべてのアイコンの svg ファイルをダウンロードして解凍します。解凍されたファイルの構造は以下のようになります。

上の図のファイル構造を観察すると、すべての SVG アイコン コードが iconfont.svg ファイルに書き込まれていることがわかりますが、これは予想外のことです。現在のようにすべてを 1 つのファイルにまとめるのではなく、1 つのアイコンが 1 つの SVG ファイルに対応することを期待します。

iconfont は現在ファイル分離メカニズムを提供していませんが、他のプラットフォームを使用して、結合された svg ファイルを個別のファイルに分離することができます。

Iconmoon ウェブサイトにはこの機能があり、iconfont に似たアイコン ライブラリ ウェブサイトでもあります。

ブラウザでiconmoon公式サイトを開き、上部ナビゲーションバーの右側にあるIcoMoon Appを選択してアイコン選択ページに入り、ページヘッダーナビゲーションバーの左側にあるImports Iconsをクリックし、iconfontからダウンロードしたiconfont.svgファイルをインポートします。結果は以下のようになります。

アイコンフォントの列を見ると、インポートしたアイコンがページに表示されているのがわかります。次に、インポートしたアイコンをマウスでクリックして選択済みとしてマークし、ページの左下隅にある「SVG とその他の生成」ボタンをクリックします (下図参照)。

ボタンをクリックすると、ページがジャンプします。このときも、左下隅のダウンロード ボタン (下図参照) をクリックして、アイコンをダウンロードします。

ダウンロード後、ディレクトリを解凍します。解凍されたディレクトリに SVG フォルダが表示されます。フォルダを開くと、すべてのアイコンが個別のファイルに分割されていることがわかります (以下を参照)。

プロジェクトのセットアップ

svg ファイルが正常に取得されました。次に、vue3 プロジェクト ディレクトリ構造の src -> asset フォルダーに新しいフォルダー fonts とサブフォルダー fonts/svg を作成し、上記で生成されたすべての svg 単一ファイルを fonts/svg に投入します。
ファイルの設定は完了です。次は、Vue3 がアイコンをスムーズに管理・使用できるようにプロジェクトの設定を始めましょう。

• 最初のステップは、プロジェクトのルート ディレクトリでコマンド ラインを開き、npm i svg-sprite-loader -D を実行することです。依存関係 svg-sprite-loader をインストールする必要があります。これは、svg ファイルのコードをシンボル タグに自動的に挿入できるためです。
• 2 番目のステップは、プロジェクトのルート ディレクトリに新しいファイル vue.config.js を作成することです。vue に精通している学生であれば、ビルド環境を構成するために vue.config.js が使用されることを知っているはずです。

vue.config.js の詳細な設定パラメータについては、vue-cli の公式 Web サイトをクリックして参照してください。ここでは、svg-sprite-loader の設定方法のみを知っておく必要があります。

ご存知のとおり、vue-cli の構築環境は webpack に基づいています。vue.config.js ファイルにさまざまな構成パラメータを追加すると、vue-cli は最終的にこれらのパラメータを webpack 構成にマージします。

このように、webpack 設定ファイルを直接操作することなく、vue.config.js を通じて開発環境を設定するという目的を達成できます。

依存関係 svg-sprite-loader がインストールされました。次に、このローダーを webpack 構成にロードする必要があります。これは、vue.config.js に次のコードを入力することで実現できます。

定数resolve = require("path").resolve;

モジュール.エクスポート = {
   チェーンWebpack(config){
        //アイコンを導入する config.module.rule("svg").exclude.add(resolve("./src/assets/fonts/svg"));
        config.module.rule("アイコン").test(/\.svg$/)
        .include.add(resolve("./src/assets/fonts/svg")).end()
        .use("svg-sprite-loader")
        .loader("svg-sprite-loader")
        .オプション({
            シンボルID:'アイコン-[名前]'
        });
   }
}

webpack の設定を体系的に学習したことがある人なら、上記のコードの意味は簡単に理解できるでしょう。上記のコードは、まず、rule で設定された svg ルールを「./src/assets/fonts/svg」ディレクトリから除外します。

次に、すべての svg ファイルを保存するフォルダーである「./src/assets/fonts/svg」ディレクトリを含める新しいルール アイコンを追加します。

次に、コードは .use と .loader を使用して svg-sprite-loader をプロジェクト環境に構成し、symbolId を icon-[name] に設定します。

ここでの symbolId は、<symbol> タグによって生成される ID 名に関連しています。symbolId が icon-[name] に設定されている場合、アイコンは、icon- とファイル名を使用してページ上の <use> タグによって参照されます。

• 3 番目のステップは、assets/fonts の下に新しいファイル index.js を作成し (ファイル構造は以下のとおりです)、次の 2 行のコードを入力することです。

これら 2 行のコードは主に webpack の require.context 関数を使用しており、これによりファイル モジュールを自動的に導入できるようになります。

require.context の最初のパラメーターは対象ファイルのディレクトリを表し、2 番目のパラメーターはサブフォルダーに適用するかどうかを表し、3 番目のパラメーターはファイル形式と一致します。

const load = require.context("./svg",false,/\.svg$/);
load.keys().map(ロード);

require.context を実行すると、結果 load が返されます。戻り値 load 自体はモジュールを導入する関数です。また、keys 属性も含まれています。load.keys() を実行して返される結果は次のようになります。

 ["./arrow.svg", "./arrowon.svg", "./downarrow.svg", "./jiantou.svg", "./trash.svg", "./yiwenicon.svg"]

ここから、load.keys() は fonts/svg フォルダー内のすべてのアイコンの相対パスを返し、loda 関数を使用してこれらのパス内のファイルをロードし、fonts/svg フォルダー内の .svg で終わるすべてのファイルを動的にインポートできることがわかります。

将来新しいアイコンを追加する必要がある場合は、まず iconfont の Web サイトから 1 つの svg ファイルをダウンロードし、それを fonts/svg フォルダーにドロップして自動的にインポートします。

最後のステップは、プロジェクトのエントリ ファイル main.js の 3 番目のステップで新しく作成された index.js を呼び出して、すべての svg ファイルを自動的にインポートすることです (コードは次のとおりです)。

'vue' から {createApp} をインポートします。
import App from './App.vue'; // ルートコンポーネント import "@/assets/fonts/index"; // 自動インポート import router from '@/router/index'; // ルーティング createApp(App).use(router).mount('#app');

上記の 4 つの手順により、基本的にプロジェクトの構成が完了し、全体の操作プロセスを簡単に整理できます。

エントリ ファイル main.js が起動したら、assets/fonts/index.js を実行して、すべての svg ファイルの自動インポートを開始します。

svg-sprite-loader は、.svg で終わるファイルがプロジェクトに導入されたことを検出すると、これらの svg のすべてのコード コンテンツを <symbol> タグにカプセル化し (以下に示すように)、それらをまとめてページ ドキュメントに挿入します。

これは、ページ上のすべての svg アイコンを登録するのに役立つ svg-sprite-loader と同等であり、残りの作業はページ上のアイコンを参照することです。

アイコンリファレンス

ホーム ページに次のコードを入力します (効果は以下のとおりです)。#icon- プレフィックスと fonts/svg 下の対応するファイル名を連結した文字列を xlink:href 属性に割り当てると、ファイルに対応するアイコンがレンダリングされます。

<テンプレート>
  <div class="home">
    <p class="title">こんにちは世界</p>
    <svg>
        <use xlink:href="#icon-trash" rel="external nofollow" /> <!-- アイコンを使用する -->
    </svg>
  </div>
</テンプレート>

コンポーネントリファレンス

ページ上のアイコンを参照するために svg とタグを使用する方法はあまりエレガントではありません。これをコンポーネントに変換できます。

グローバル コンポーネント フォルダー components に新しいファイル Icon/index.vue を作成します。このコンポーネントは、name と color という 2 つのパラメーターを受け入れます (コードは次のとおりです)。

パラメータ name はレンダリングするアイコン名に対応し、color はレンダリングする色です。ここで注意すべき点は、svg の色は fill 属性を通じてのみ変更でき、color 属性が割り当てられている場合は機能しないということです。

<テンプレート>
    <svg :style="{fill:color?color:''}">
        <use :xlink:href="'#icon-'+name" rel="external nofollow" rel="external nofollow" />
    </svg>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
 小道具:{
     name:String, //アイコン名 color:{ //アイコンの色 type:String,
         デフォルト:null
     }
 }
}
</スクリプト>

次に、ホームページのアイコン コンポーネントを参照します (コードは次のとおりです)。

レンダリングされたアイコンの名前は「ゴミ箱」で、色は青です (下の画像を参照)。

<テンプレート>
  <div class="home">
    <p class="title">こんにちは世界</p>
    <Icon name="trash" color="blue"/><!-- アイコンを使用する -->
  </div>
</テンプレート>
<スクリプト>
「@/components/Icon/index」からIconをインポートします。
エクスポートデフォルト{
    コンポーネント:{
        アイコン
    }
}
</スクリプト>

複数のテーマのサポート

上記の説明から、<svg> タグにスタイル属性 fill を指定すると、最終的なアイコンの色も変更され、複数のテーマの開発ニーズを満たすことができることがわかります。

次に、ボタンをクリックしてオンラインでテーマを切り替えることができるシーンを構築し、テーマの変更に合わせて SVG アイコンも変更できるようにします。

複数のテーマスタイルの設定

まず、プロジェクトフォルダ src/assets に新しいファイル scss/variable.scss を作成します。コードの内容は次のようになります。

コードでは、デフォルト テーマ、テーマ 1、テーマ 2 の 3 つのテーマが定義されています。各テーマは、独自のアイコンの色と背景色を定義します。

コードの下部では、塗りつぶし、色、背景色のプロパティを設定するために使用される 3 つのミックスインが定義されています。各ミックスインでは、異なるテーマによって設定された色は、それぞれのテーマの色設定を使用します。

// デフォルトのテーマ $icon-color:red;
背景色:#fff;

// テーマ1
アイコンの色をグレーにします。
背景色1:#eee;

// テーマ2
アイコンの色を青に変更します。
$背景色2:#999;

// svgを色で塗りつぶすために使用します @mixin fill {
    fill:$icon-color; // デフォルトの色はデフォルトのテーマを使用します [data-theme = "theme1"] & { // テーマ 1 に切り替えるときの色 fill:$icon-color1;
    }
    [data-theme = "theme2"] & { //テーマ2に切り替えるときの色の塗りつぶし: $icon-color2;
    }
}
//色属性を設定する @mixin color {
    color:$icon-color; //デフォルトの色はデフォルトのテーマを使用します [data-theme = "theme1"] & { //テーマ1に切り替えるときの色 color:$icon-color1;
    }
    [data-theme = "theme2"] & { //テーマ2に切り替えるときの色 color:$icon-color2;
    }
}

//背景色を設定する @mixin backgroudColor {
    background-color:$background-color; // デフォルトの色はデフォルトのテーマを使用します [data-theme = "theme1"] & { // テーマ 1 に切り替えるときの色 background-color:$background-color1;
    }
    [data-theme = "theme2"] & { //テーマ2に切り替えるときの色 background-color: $background-color2;
    }
}

variable.scss はグローバルなマルチテーマ設定ファイルであり、各テーマでレンダリングされる色を設定できるだけでなく、フォント サイズ、よく使用される幅と高さなども設定できます。

設定ファイルを書き込んだら、プロジェクトでこのファイルを参照する必要があります。エディターでルート ディレクトリの vue.config.js プロジェクト設定ファイルを開き、次のコードを追加します。

定数resolve = require("path").resolve;

モジュール.エクスポート = {
   チェーンWebpack(config){
        //アイコンを導入する config.module.rule("svg").exclude.add(resolve("./src/assets/fonts/svg"));
        config.module.rule("アイコン").test(/\.svg$/)
        .include.add(resolve("./src/assets/fonts/svg")).end()
        .use("svg-sprite-loader")
        .loader("svg-sprite-loader")
        .オプション({
            シンボルID:'アイコン-[名前]'
        });
   },
   css: {
    ローダーオプション: {
        SCSS: {
            prependData: `@import "@/assets/scss/variable.scss";`
        },
    }
   } 
}

module.exports に新しい構成プロパティ css を追加し、上記で記述したマルチテーマ構成ファイルのパスを prependData の対応する値に入力します。

異なる sass バージョンによるファイルのインポート失敗を回避するには、 sass と sass-loader のバージョンを統一します。

"サス": "1.26.5",
"sass-loader": "8.0.2",

vue.config.js が設定されたら、アプリケーションを再起動します。variable.scss がアプリケーションにグローバルに挿入されました。次に、ページ コンポーネントにテーマ設定ファイルをインポートするために @import を使用する必要はありません。variable.scss で定義された変数とミックスインは直接使用できます。

アイコン変換

アイコンがテーマの変更に応答するようにするには、グローバル Icon コンポーネントを次のように変更します。color プロパティに値がある場合、アイコンは渡された色に従ってレンダリングされます。色が渡されない場合、アイコンの色を決定する要素はクラス名 icon になります。

<テンプレート>
    <svg class="icon" :style="{fill:color?color:''}">
        <use :xlink:href="'#icon-'+name" rel="external nofollow" rel="external nofollow" />
    </svg>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
 小道具:{
     名前:文字列、
     色：{
         タイプ:文字列、
         デフォルト:null
     }
 }
}
</スクリプト>

<style lang="scss" スコープ>
 。アイコン{
   @include 塗りつぶし;
 }
</スタイル>

クラス名 icon では fill に対応するミックスインが呼び出されており、ファイル variable.scss での fill の定義は以下のようになります。

最後に、fill:color プロパティを返します。デフォルトでは、塗りつぶしの色の値は $icon-color です。

ページ ドキュメントの html タグ上の属性 data-theme の値が theme1 になると、fill でレンダリングされる色は theme 1 で定義された色になります。同様に、theme2 に切り替えると、fill でレンダリングされる色は theme 2 で定義された色になります。

// svgを色で塗りつぶすために使用します @mixin fill {
    fill:$icon-color; // デフォルトの色はデフォルトのテーマを使用します [data-theme = "theme1"] & { // テーマ 1 に切り替えるときの色 fill:$icon-color1;
    }
    [data-theme = "theme2"] & { //テーマ2に切り替えるときの色の塗りつぶし: $icon-color2;
    }
}

上記の構成の目的は、ページによって最終的に生成される DOM 構造を観察することで理解できます。@mixin は最終的にテーマごとにスタイルシートを生成します (以下に示すように)。このように、<html> タグの data-theme が特定のテーマと等しい限り、対応するテーマのスタイルシートが有効になります。

ページ検証

ホームページ コンポーネントに次のコードを入力します。元のページに、既定のテーマ、テーマ 1、テーマ 2 の 3 つのボタンが追加されます。

ボタンをクリックすると updateTheme 関数がトリガーされ、<html> タグ上の data-theme 属性値が変更され、テーマ切り替え機能が実現されます (効果図は次のとおりです)。

<テンプレート>
  <div class="home">
    <p class="title">こんにちは世界</p>
    <Icon name="trash"/><!-- アイコンを使用する -->
    <button @click="updateTheme()">デフォルトのテーマ</button>
    <button @click="updateTheme('theme1')">テーマ 1</button>
    <button @click="updateTheme('theme2')">テーマ 2</button>
  </div>
</テンプレート>
<スクリプト>
「@/components/Icon/index」からIconをインポートします。
エクスポートデフォルト{
    コンポーネント:{
        アイコン
    },
    メソッド: {
        テーマを更新(名前){
            if(name == null){ // デフォルトのテーマを使用しますdocument.documentElement.removeAttribute("data-theme");
            }それ以外{
                document.documentElement.setAttribute("データテーマ",名前);
            }
        } 
    },
}
</スクリプト>
<スタイル スコープ lang="scss">
。家{
    高さ: 100%;
    背景色を含めます。
}
。タイトル{
  色を含めます。
}
</スタイル>

最終結果:

最後に

上記のマルチテーマの実装は操作が非常に簡単ですが、大規模で複雑なプロジェクトには適していません。

大規模なプロジェクトに 12 を超えるテーマが含まれており、各テーマの CSS コードが非常に大きい場合、すべてのテーマのすべてのスタイル コードを一度にアプリケーションに挿入するのは不適切であると想像してください。

ベスト プラクティスとしては、ユーザーが特定の種類のテーマに切り替えるためにクリックすると、その種類のテーマのスタイルがオンデマンドで読み込まれ、レンダリングのためにアプリケーションに挿入されるというもので、これにより全体的なパフォーマンスが大幅に向上します。ベスト プラクティスについては、コミュニティのマルチテーマ切り替えに関する記事を参照してください。

これで、Vue の iconfont アイコンライブラリ導入に関する記事は終了です。Vue の iconfont 導入に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

ソースコード