vite-svg-loader、プロジェクトで svg を使いやすく、ts プロジェクトには特別な注意が必要です。

序文

 vite-svg-loader プラグインを使用すると、vue コンポーネントのように svg グラフィックを使用できるようになり、非常に便利です。

インストール

npm install vite-svg-loader --save-dev

使用

1. vite.config.ts の設定

import svgLoader from 'vite-svg-loader'

export default defineConfig({
  plugins: [vue(), svgLoader()]
})

2. vite-env.d.ts で設定します。注意を払う！

/// <reference types="vite/client" />
/// <reference types="vite-svg-loader" />

これが構成されていない場合、パッケージはエラーを報告します。

3. コンポーネントでの使用

コンポーネントのように使用するには、パスの後に「?component」を忘れずに追加してください。

スタイルを直接追加して変更できます。

<script setup lang="ts">
  import IconMsg from '@/assets/icons/xiaoxi-zhihui.svg?component'
</script>

<template>
  <IconMsg class="msg" />
</template>

<style scoped>
  .msg {
    width: 50px;
    height: 50px;
  }
</style>