アイコン処理ソリューションこの記録の目的は、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 のインストールと使用手順
序文この記事では、Linux 構成ログ サーバーに関する関連コンテンツを主に紹介し、参考と学習のため...
この記事では、簡単なショッピングフォームを実装するためのJavaScriptの具体的なコードを参考ま...
目次1. インデックスプッシュダウン最適化の原理2. インデックスプッシュダウンの具体的な実践1. ...
この記事では、Reactでダブルスライダークロススライドを実装するための具体的なコードを参考までに共...
はい、CSS にも正規表現があります (アーメン) CSS で目立つための 2 つの強力なツール: ...
目次ユーティリティ: vue での使用:説明する:画像安定化:スロットル:ユーティリティ: // 手...
背景トランザクションについて話すとき、誰もがそれに精通している必要があります。MySQL データベー...
最近、携帯電話で https が有効になりました。緑色のロックを取得するには、次の問題を解決する必要...
目次メイクファイルMakefile の命名とルールMakefile の仕組みMakefile変数Ma...
目次序文使用コンポーネントの記述データ構造分析プロセス分析基礎コードの分析他の要約する序文パスワード...
1. JSON.stringify() と JSON.parse() の違い私たちは皆、JSON.s...
MySQL のバージョンは、Enterprise Edition と Community Editi...
この記事の例では、ログインと登録の効果を実現するためのvueプロジェクトの具体的なコードを共有してい...
序文この記事では、最近私が遭遇した 2 つの状況について説明します。今後、新たな発見があれば追加して...
数日前、友人と Node.js の epoll とリクエスト処理に関する知識を交換しました。今日は、...