Vue.jsはコンポーネントを通じてアイコンを処理します

Vue.jsはコンポーネントを通じてアイコンを処理します

アイコン処理ソリューション

この記録の目的は、element-plus 以外のアイコンをコンポーネントにカプセル化する方法を記録することです。仕事でアイコンの問題に対処するのに役立つことを願っています。

分析の結果、要素プラス アイコンは el-icon を通じて表示できますが、カスタム アイコンの場合は、カスタム svg アイコンを表示するためにカスタム アイコン コンポーネントが必要であることがわかりました。

コンポーネントの機能

  • 外部 SVG アイコンを表示 (外部リンク)
  • プロジェクト内にSVGアイコンを表示する

アイコンコンポーネントのパッケージ化のアイデア

表示用アイコンコンポーネント

components/SvgIcon/index.vueを作成します:

<テンプレート>
    <div
        v-if="isExternal"
        :style="styleExternalIcon"
        クラス="svg-external-icon svg-icon"
        :class="クラス名"
    />
    <svg v-else class="svg-icon" :class="className" aria-hidden="true">
        <use :xlink:href="iconName" rel="external nofollow" />
    </svg>
</テンプレート>
​
<スクリプトの設定>
    '@/utils/validate' から { isExternal を external としてインポートします。
    'vue' から {defineProps, computed} をインポートします。
    const props = defineProps({
        //アイコン アイコン: {
            タイプ: 文字列、
            必須: true
        },
        // アイコンクラス名 className: {
            タイプ: 文字列、
            デフォルト: ''
        }
    })
    /**
     * 外部アイコンかどうかを判定する*/
    const isExternal = computed(() => external(props.icon))
    /**
     * 外部アイコンスタイル */
    const styleExternalIcon = computed(() => ({
        マスク: `url(${props.icon}) 繰り返しなし 50% 50%`,
        '-webkit-mask': `url(${props.icon}) 繰り返しなし 50% 50%`
    }))
    /**
     * プロジェクトアイコン */
    const iconName = computed(() => `#icon-${props.icon}`)
</スクリプト>
​
<style lang='scss' スコープ>
    .svgアイコン{
        幅: 1em;
        高さ: 1em;
        垂直位置合わせ: -0.15em;
        塗りつぶし: 現在の色;
        オーバーフロー: 非表示;
    }
​
    .svg-外部アイコン {
        背景色: 現在の色;
        マスクサイズ: カバー !important;
        表示: インラインブロック;
    }
</スタイル>
​

リソースが外部リソースであるかどうかを判断する

utils/validate.jsを作成します:

/**
 * 外部リソースであるかどうかを判断する*/
エクスポート関数isExternal(path) {
  /^(https?:|mailto:|tel:)/.test(パス) を返します。
}

外部SVGアイコン表示

コンポーネント svg-icon を導入することで、icon はアイコンの外部リンクを渡します。

<span class="svg-container">
    <svg-icon icon="https://xxx.svg"></svg-icon>
</span>

プロジェクト内のSVGアイコンの処理

  • プロジェクトのsrcディレクトリにアイコンフォルダを作成し、svgアイコンファイルをインポートします。
  • iconsの下にindex.jsファイルを作成する

ファイルは2つのことを行う

  • すべてのSVGアイコンをインポート
  • SvgIconのグローバル登録を完了する

index.jsコードは以下のとおりです

リファレンスドキュメント 依存関係管理 | webpack 中国語ドキュメント

'@/components/SvgIcon' から SvgIcon をインポートします。
​
// require.context() 関数を使用して独自のコンテキストを作成します
const svgRequire = require.context('./svg', false, /\.svg$/)
// この時点で、require インポートのリクエスト パラメータを受け入れることができる require 関数が返されます。
// この関数は 3 つのプロパティを提供し、require.keys() を通じてすべての svg アイコンを取得できます // アイコンをトラバースし、アイコンを require import 関数へのリクエストとして渡して、ローカル svg アイコンのインポートを完了します svgRequire.keys().forEach(svgIcon => svgRequire(svgIcon))
​
デフォルトアプリをエクスポート => {
 app.component('svg-icon', SvgIcon)
}

グローバルに登録されたプロジェクトアイコン

このファイルをmain.jsにインポートします

...
// svgIcon をインポート
'@/icons' から installIcons をインポートします
...
アイコンをインストール(アプリ)
...

内部アイコンを使用する

// ユーザー名 <svg-icon icon="user" />
// パスワード<svg-icon icon="password" />

svg-sprite-loaderを使用して svg アイコンを処理する

svg-sprite-loader svgアイコンの処理に特化したwebpackloaderです。

インストール: npm i --save-dev [email protected]

vue.config.jsファイルでloaderを構成する

定数パス = require('path')
関数resolve(dir) {
 path.join(__dirname, dir) を返します
}
​
モジュール.エクスポート = {
 チェーンWebpack(config) {
   // svg-sprite-loader をセットアップする
   構成モジュール
     .rule('svg')
     .exclude.add('src/icons' を解決します)
     。終わり()
   構成モジュール
     .rule('アイコン')
     .test(/\.svg$/)
     .include.add('src/icons' を解決します)
     。終わり()
     .use('svg-sprite-loader')
     .loader('svg-sprite-loader')
     .オプション({
       シンボルID: 'icon-[名前]'
     })
     。終わり()
 }
}

これは内部の svg アイコンを処理します。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue3でアイコンを使用する2つの例
  • Vueでアイコンをカスタマイズする手順
  • Vue要素プロジェクトにアイコンアイコンを導入する方法
  • Vueでカスタムアイコンを使用する方法
  • Vueプロジェクトにアイコンを導入する方法

<<:  HTML マーキータグの使用例

>>:  Docker Compose のインストールと使用手順

推薦する

Linux でのログ サーバーの設定に関するグラフィック チュートリアル

序文この記事では、Linux 構成ログ サーバーに関する関連コンテンツを主に紹介し、参考と学習のため...

シンプルなショッピングフォームを実装するJavaScript

この記事では、簡単なショッピングフォームを実装するためのJavaScriptの具体的なコードを参考ま...

MySQLはインデックスプッシュダウンを数秒で理解するのに役立ちます

目次1. インデックスプッシュダウン最適化の原理2. インデックスプッシュダウンの具体的な実践1. ...

Reactはダブルスライダークロススライドを実装します

この記事では、Reactでダブルスライダークロススライドを実装するための具体的なコードを参考までに共...

CSSセレクターでの正規表現の使用

はい、CSS にも正規表現があります (アーメン) CSS で目立つための 2 つの強力なツール: ...

Vue2.x - アンチシェイクとスロットリングの使用例

目次ユーティリティ: vue での使用:説明する:画像安定化:スロットル:ユーティリティ: // 手...

MySql 学習ノートにおけるトランザクション分離レベルの詳細な説明

背景トランザクションについて話すとき、誰もがそれに精通している必要があります。MySQL データベー...

Baidu サイト検索が https をサポートしていない問題の解決策 (テスト済み)

最近、携帯電話で https が有効になりました。緑色のロックを取得するには、次の問題を解決する必要...

Linux での Makefile の書き方と使い方の詳細な説明

目次メイクファイルMakefile の命名とルールMakefile の仕組みMakefile変数Ma...

Reactでパスワード強度検出器を実装する方法

目次序文使用コンポーネントの記述データ構造分析プロセス分析基礎コードの分析他の要約する序文パスワード...

json.stringify() と json.parse() の違いと使い方

1. JSON.stringify() と JSON.parse() の違い私たちは皆、JSON.s...

Windows 10 で MySQL をダウンロードするための詳細なチュートリアル

MySQL のバージョンは、Enterprise Edition と Community Editi...

Vueプロジェクトはログインと登録の効果を実現します

この記事の例では、ログインと登録の効果を実現するためのvueプロジェクトの具体的なコードを共有してい...

Dockerコンテナのディスクがいっぱいになった場合の状況のまとめ

序文この記事では、最近私が遭遇した 2 つの状況について説明します。今後、新たな発見があれば追加して...

Node.js の TCP 接続処理のコア プロセス

数日前、友人と Node.js の epoll とリクエスト処理に関する知識を交換しました。今日は、...