Vueベースのカスタムコンポーネントを実装してアイコンを導入する

// vue.config.js
const { 解決 } = require('path')

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

<テンプレート>
  <i class="icon">
    <!-- aria-hidden、障害のある人の読み取りを支援するため（デバイスは混乱を避けるためにコンテンツを読み取るときにこのタグをスキップします） -->
    <svg aria-hidden="true" :width="サイズ" :height="サイズ" :fill="塗りつぶし色">
      <use :xlink:href="iconName" rel="external nofollow" ></use>
    </svg>
  </i>
</テンプレート>

<script lang="ts">
'vue' から { PropType, toRefs } をインポートします。

エクスポートデフォルト{
  小道具: {
    サイズ： {
      タイプ: Number as PropType<number>、
      デフォルト: 14
    },
    塗りつぶし色: {
      タイプ: String as PropType<string>、
      デフォルト: '#000'
    },
    アイコン名:
      タイプ: String as PropType<string>、
      必須: true
    }
  },
  セットアップ(props: 任意) {
    const { サイズ、塗りつぶし色、アイコン名: _iconName } = toRefs(props)
    const iconName = `#${_iconName.value}`

    戻る {
      サイズ、
      塗りつぶし色、
      アイコン名
    }
  }
}
</スクリプト>

// インデックス.ts
'@/components/SvgIcon.vue' から SvgIcon をインポートします。
'vue' から { App } をインポートします

エクスポートデフォルト (app: App) => {
  app.component('svg-icon', SvgIcon)
}

const ctx = require.context('./svg', false, /\.svg$/)
const requestAll = (ctx: __WebpackModuleApi.RequireContext) => ctx.keys().forEach(ctx)

リクエストすべて(ctx)

//メイン.ts
'vue' から {createApp} をインポートします。
'./App.vue' からアプリをインポートします。
'@/icons/index' から installSvgIcon をインポートします

const app = createApp(App)

installSvgIcon(アプリ)
app.mount('#app')

<テンプレート>
  <img alt="Vue ロゴ" src="./assets/logo.png">
  <svg-icon icon-name="アイコンダッシュボード"></svg-icon>
  <HelloWorld msg="Vue.js + TypeScript アプリへようこそ"/>
</テンプレート>