Vue で SVG アイコンを導入する 2 つの方法

yarn に svg-sprite-loader --dev を追加します

<!-- svg コンポーネント -->
<テンプレート>
 <svg class="svg-icon" :class="svgClass" aria-hidden="true">
  <:xlink:href="アイコン名" /> を使用します
 </svg>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
 名前: 'SvgIcon',
 小道具: {
  // svg名 svgName: {
   タイプ: 文字列、
   必須: true
  }
 },
 計算: {
  アイコン名() {
   `#icon-${this.svgName}` を返します
  },
  svgクラス() {
   if (this.svgName) {
    'svg-icon' + this.svgName を返します
   } それ以外 {
    'svg-icon' を返す
   }
  }
 }
}
</スクリプト>

<style lang="less" スコープ>
.svgアイコン{
 幅: 100ピクセル;
 高さ: 100px;
 垂直位置合わせ: -0.15em;
 塗りつぶし: 現在の色;
 オーバーフロー: 非表示;
}
</スタイル>

'vue' から Vue をインポートします
'@/components/SvgIcon' から SvgIcon をインポートします。

// グローバルに登録する Vue.component('svg-icon', SvgIcon)

const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
すべて必須(必須)

モジュール.エクスポート = {
	チェーンWebpack: config => {
	 	構成モジュール
   .rule('svg')
   .exclude.add('src/assets/icons' を解決します)
   。終わり（）
  構成モジュール
   .rule('アイコン')
   .test(/\.svg$/)
   .include.add('src/assets/icons' を解決します)
   。終わり（）
   .use('svg-sprite-loader')
   .loader('svg-sprite-loader')
   .オプション({
    シンボルID: 'icon-[名前]'
   })
   。終わり（）
	}  
}

<!-- svg-name は svg 名です -->
<svg-icon svg-name="ic_home_news" />

定数パス = require('path');
関数resolve(dir) {
 // __dirname プロジェクト ルート ディレクトリの絶対パス return path.join(__dirname, dir);
}
モジュール.エクスポート = {
 チェーンWebpack: config => {
 svgRule は config.module.rule('svg') に追加されます。
 // 既存のローダーをすべてクリアする
 // これを行わないと、後続のローダーはこのルールの既存のローダーの後に追加されます svgRule.uses.clear();
 svgルール
  .test(/\.svg$/)
  .include.add(path.resolve(__dirname, './src/icons/svg'))
  。終わり（）
  .use('svg-sprite-loader')
  .loader('svg-sprite-loader')
  .オプション({
  シンボルID: 'icon-[名前]'
  });
 config.module.rule の 'file' を設定します。
 ファイルルールはクリア() を使用します。
 ファイルルール
  .test(/\.svg$/)
  .exclude.add(path.resolve(__dirname, './src/icons/svg'))
  。終わり（）
  .use('ファイルローダー')
  .loader('ファイルローダー');
 },
}

<テンプレート>
 <svg :class="svgClass" xmlns="http://www.w3.org/2000/svg">
 <use :xlink:href="iconName" xmlns:xlink="http://www.w3.org/1999/xlink" />
 </svg>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
 名前: 'SvgIcon',
 小道具: {
 アイコンクラス: {
  タイプ: 文字列、
  必須: true
 },
 クラス名: {
  タイプ: 文字列、
  デフォルト： ''
 }
 },
 計算: {
 アイコン名() {
  `#icon-${this.iconClass}` を返します。
 },
 svgクラス() {
  if (this.className) {
  'svg-icon ' + this.className を返します。
  } それ以外 {
  'svg-icon' を返します。
  }
 }
 }
};
</スクリプト>
<スタイルスコープ>
.svgアイコン{
 幅: 1em;
 高さ: 1em;
 垂直位置合わせ: -0.15em;
 塗りつぶし: 現在の色;
 オーバーフロー: 非表示;
}
</スタイル>

'vue' から Vue をインポートします。
import SvgIcon from '@/components/SvgIcon'; // svg コンポーネント // グローバルに登録
Vue.component('svg-icon', SvgIcon);
const req = require.context('./svg', false, /\.svg$/);
const requireAll = requireContext => requireContext.keys().map(requireContext);
すべて要求します(req);

'./icons' をインポートします。 

<svg-icon icon-class="features_ic_risk@1x" class-name="icon"></svg-icon>