Webpackインポートsvgアイコン

svgはXML形式に基づく画像記述音声で、ベクトルマップであり、canvasと比較して拡大時に歪みはなく、画像に比べてテキスト形式が存在するため、サイズが小さくなる.従来の使用方法では、svgを必要な場所にコピーしたり、importをあちこちにコピーしたりして、コードが美しくないだけでなく、メンテナンスが面倒で、特にアイコンが多くなったときです.次に、コンポーネントでsvgアイコン(vueを例にreactと同様)を使用する方法について説明します.
実現原理:svgのuseタグを利用して、idを通じて対応するsvgアイコンを参照する

上記のsvgコードでは、htmlページに埋め込まれた2つのアイコンは表示されません.あるアイコンを使用する必要がある場合(id=「icon-close」)を例にとると、htmlページで以下のように参照できます.

まず、すべてのsvgファイルをsvgラベルにパッケージ化し、symbolラベルごとにidを設定します.ここでは、webpackのsvg-sprite-lpaderで実現できます.

 {
     test: /\.svg$/,
          loader: 'svg-sprite-loader',
          include: [resolve('src/icons/svgs')],
          options: {
               symbolId: 'icon-[name]'
          }
 }

一般的には、アイコンとして使用するsvgファイルをすべてフォルダの下に置き、includeでこのファイルの下のsvgファイルを処理し、この方法で使用する必要のない他のsvgが処理されないようにします.
次に、svgファイルをすべてインポートする方法を考えます.ここではwebpackのrequireを使用します.contextで実現

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'
Vue.component('svg-icon',SvgIcon)


let req = require.context('./svgs',false,/\.svg$/)
let importAll = r => r.keys().map(r)
importAll(req)

まず、SvgIconをグローバルコンポーネントに登録します.これにより、importをあちこちで使用する必要はありません.次の3行のコードはrequireです.contextはsvgsの下に動的に導入する.svgの最後のファイルです.ここでは、このコンテキストに基づいてインポートされたsvgsフォルダパスというローカルwebpackコンテキストを生成します.最後にindexでjsはこのファイルを導入すればよい
最後にSvgIconコンポーネントを実装

export default {
    name: 'SvgIcon',
    props: {
        icon: {
            type: String,
            required: true
        },
        w: {
            type: [Number, String],
            default: '20px'
        },
        h: {
            type: [Number, String],
            default: '20px'
        }
    },
    computed: {
        iconName() {
            return '#icon-' + this.icon
        }
    }
}

次に、コンポーネントで使用できます.