パッケージsvgコンポーネント

svgアイコンコンポーネントをカプセル化する方法
svgアイコンコンポーネントをカプセル化する方法はいろいろありますが、単純にsvgアイコンを使用したい場合は、svgをfontsフォントアイコンにエクスポートして使用することができますが、svgの本来のスタイルやサイズを失い、img画像や背景として導入することもできますが、これは非常に煩雑です.
最近のプロジェクトでは、svgアイコンを大量に使用する必要があります.ここでは、vueコンポーネントでsvgアイコンを使用する方法について説明します.
まずsvgアイコンのuse要素について説明します.

"0" width="50" height="50" />
        "0" cy="0" r="50" />
    
  

  "#shape" x="50" y="50" />
  "#shape" x="200" y="50" />

たとえば、idがshapeのsvg要素を描きました.多重化したい場合、コードをコピーして貼り付けることはできません.use要素を使用して、xlink:hrefを#shapeに指定します.それは対応するsvg要素を探してクローン化し、多重化を実現します.
use要素は便利なことに、同じドキュメントにある限り、useは単一の要素を再利用することもできるし、または要素のセットを再利用することもでき、idセレクタを介して標時参照を行うだけでよい.
具体的には、useクローンの内容がどこにあるのか、svgの下位にあるのかを知りたい場合は、CSSでSVGの内容にスタイルを追加することを参照してください.
パッケージvueコンポーネント
まず、UIで提供される使用するsvgファイルを1つのフォルダに統合します.

├── src
    ├── svg
        ├── user.svg
        └── course.svg

vueコンポーネントの開発:

// svg-icon.vue



import <span class="hljs-string">'./icons'</span>;

<span class="hljs-built_in">export</span> default {
  name: <span class="hljs-string">'SvgIcon'</span>,
  props: {
    // svg    
    name: {
      default: <span class="hljs-string">''</span>
    },
    //      
    className: {
      <span class="hljs-built_in">type</span>: String,
      default: <span class="hljs-string">''</span>
    }
  },
  computed: {
    <span class="hljs-function"><span class="hljs-title">iconName</span></span>() {
      <span class="hljs-built_in">return</span> `<span class="hljs-comment">#icon-${this.name}`;</span>
    },
    <span class="hljs-function"><span class="hljs-title">svgClass</span></span>() {
      <span class="hljs-built_in">return</span> [
        <span class="hljs-string">'svg-icon'</span>,
        this.className ? this.className:<span class="hljs-string">''</span>
      ]
    }
  }
};

svg-iconコンポーネントを用いてすべてのsvgファイルを統一的に使用し,nameを指定することで対応するsvgファイルを変更することを期待する.
svgファイルを使用するには、すべてのsvgファイルをメモリに統合してロードする必要があります.

// icons.js

const req = require.context('@svg', false, /\.svg$/);
const requireAll = requireContext => requireContext.keys().map(requireContext);
requireAll(req);

この場合、svg-iconコンポーネントでnameを指定する方法で両替用svgファイルを参照することはできません.また、svgファイルごとにさらに処理し、ファイル内容のiconをimport 'svg/user.svg'要素にカプセル化し、次の使用効果を達成する必要があります.

"http://www.w3.org/1999/xlink">
    "icon" viewBox="0 0 970 740" id="icon-user">...

Webpackプラグイン:svg-sprite-loader
改造プロジェクトのwebpack構成
プロジェクトはvue-cli 3に基づいてカスタマイズされているため、vue-cli 3でrequire.contextを構成する方法についてのみ説明します.
コードは次のとおりです.

module.exports = {
    ...
    chainWebpack: config => {
        ...
        config.module
          .rule('svg')
          .exclude.add(resolve('src/svg'))
          .end();
        config.module
          .rule('svgs-loader')
          .test(/\.svg$/)
          .include.add(resolve('src/svg'))
          .end()
          .use('svg-sprite-loader')
          .loader('svg-sprite-loader')
          .options({
            symbolId: 'icon-[name]'
          })
          .end();
    }
}

ここで注意してください.svgを構成する前に、vue-cli 3自体のsymbolルールを置き換えます.このsvg-sprite-loaderはsvgをピクチャリソースと同じように単独で出力します.ここではsvg-sprite-loaderを構成してsvgの下のすべてのsvgファイルを無視すればいいです.
最後に、vueではsvg-iconコンポーネントで対応するsvgアイコンを使用できます.
関連記事

未来必熱:SVG Sprite技術紹介

CSSでSVGのコンテンツにスタイルを追加

文章の内容に誤りがあれば、ご了承ください.
転載は出典を明記してください
転載先:https://juejin.im/post/5cf79b8c518825382565ba19