アイコン処理ソリューションこの記録の目的は、element-plus 以外のアイコンをコンポーネントにカプセル化する方法を記録することです。仕事でアイコンの問題に対処するのに役立つことを願っています。 分析の結果、要素プラス アイコンは el-icon を通じて表示できますが、カスタム アイコンの場合は、カスタム svg アイコンを表示するためにカスタム アイコン コンポーネントが必要であることがわかりました。 コンポーネントの機能
アイコンコンポーネントのパッケージ化のアイデア表示用アイコンコンポーネント
<テンプレート> <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; 表示: インラインブロック; } </スタイル> リソースが外部リソースであるかどうかを判断する
/** * 外部リソースであるかどうかを判断する*/ エクスポート関数isExternal(path) { /^(https?:|mailto:|tel:)/.test(パス) を返します。 } 外部SVGアイコン表示コンポーネント svg-icon を導入することで、icon はアイコンの外部リンクを渡します。 <span class="svg-container"> <svg-icon icon="https://xxx.svg"></svg-icon> </span> プロジェクト内のSVGアイコンの処理
ファイルは2つのことを行う
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" />
インストール: 定数パス = 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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: Docker Compose のインストールと使用手順
セルでは、明るい境界線の色を個別に定義できます。 > 基本構文<TD ボーダーカラーライ...
まずアイデアはこの効果を実現するには、 <input type="checkbox&...
この投稿では、通知、画像とビデオ、フォーム フィールド、タイトル、段落、箇条書きリスト、ナビゲーショ...
Nginxはバージョン情報を隠すだけでなく、カスタムWebサーバー情報もサポートします。まずは最終的...
私はプロジェクトを実行するために react を使い始めたばかりで、非常に未熟で完全な初心者です。私...
目次1. 終了2. クロージャの使用シナリオ1.タイムアウトを設定する2. コールバック3. 手ぶれ...
目次アイデア傍受を要求するレスポンスインターセプションhttpClient.tsを使用してリクエスト...
目次1. ブール2. 表現3. マルチクラスパッケージ4. v-bind でクラス class を直...
MySQL x64 はインストーラーを提供していません、インストーラーを提供していません、インストー...
目次通常の読み込み遅延読み込みプリロードプリロードを使用しないプリロードの使用要約する通常の読み込み...
<br />原文: プログレッシブエンハンスメントを理解するアーロン・ガスタフソン翻訳:...
MySql Nullフィールド判定とIFNULL失敗処理ps: (プロセスを表示したくない場合は、S...
目次DockerのインストールNvidia-docker のインストールDockerのインストール1...
1. Windows システムでは、JDK のインストールなど、多くのソフトウェアのインストールで...
この記事では、要素をドラッグするときにプレビューを追加する小さなデモを紹介します。効果は次のとおりで...