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

<テンプレート>
    <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(パス) を返します。
}

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

'@/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)
}

...
// 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-[名前]'
     })
     。終わり（）
 }
}