【免费下载】 Vite SVG Loader 常见问题解决方案

2026-01-29 12:26:46作者：龚格成

1. 项目基础介绍和主要编程语言

Vite SVG Loader 是一个用于在 Vite 项目中加载 SVG 文件作为 Vue 组件的插件。它支持使用 SVGO 进行优化，并且可以方便地将 SVG 文件转换为 Vue 组件，以便在项目中重用。主要使用的编程语言是 JavaScript 和 TypeScript。

2. 新手常见问题及解决步骤

问题一：如何安装和配置 Vite SVG Loader？

解决步骤：

使用 npm 安装 Vite SVG Loader：
```
npm install vite-svg-loader --save-dev
```

在 Vite 配置文件中（通常是 vite.config.js 或 vite.config.ts），引入并使用 Vite SVG Loader：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import svgLoader from 'vite-svg-loader'

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

问题二：如何导入 SVG 文件？

解决步骤：

导入 SVG 文件作为 Vue 组件：

import MyIcon from '~/path/to/my-icon.svg'

在模板中使用组件：
```
<template>
  <MyIcon />
</template>
```
如果需要导入 SVG 作为 URL 或原始字符串，可以在文件名后添加 .url 或 .raw 后缀。

问题三：如何配置 SVGO？

解决步骤：

在 Vite 配置文件中，可以传递一个配置对象给 svgLoader：
```
svgLoader({
  svgoConfig: {
    multipass: true
  }
})
```
如果需要禁用 SVGO，可以设置 svgo: false。
对于单个文件禁用 SVGO，可以在文件名后添加 .skipsvgo 后缀。