vue3+vite+ts svg图片作为组件引入

安装

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

配置

// vite.config.ts

import svgLoader from 'vite-svg-loader'
import { resolve } from 'path'

const pathResolve = (dir: string): string => {
  return resolve(__dirname, dir)
}

const alias: Record<string, string> = {
  '@': pathResolve('src')
}

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

使用

<script steup lang="ts">
import IconOpen from '@/assets/open.svg'
script>

<template>
  <IconOpen />
template>