如何在Vite React项目中集成SVGO并实现SVG组件化导入

以下是具体实现步骤，和CRA的使用体验完全对齐：

1. 安装依赖 #

首先安装vite-plugin-svgr插件，它同时支持SVG转React组件和SVGO优化：

npm install vite-plugin-svgr --save-dev
# 或者用yarn
yarn add vite-plugin-svgr --dev
# 或者pnpm
pnpm add vite-plugin-svgr -D

2. 配置Vite #

在项目根目录的vite.config.js（或vite.config.ts）中添加插件，并配置SVGO优化规则（按需调整）：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import svgr from 'vite-plugin-svgr'

export default defineConfig({
  plugins: [
    react(),
    svgr({
      // 自定义SVGO优化配置，示例规则可根据需求修改
      svgoConfig: {
        plugins: [
          // 保留viewBox属性，避免SVG缩放异常
          { name: 'removeViewBox', active: false },
          // 移除SVG默认的fill属性，方便通过CSS类控制颜色
          { name: 'removeAttrs', params: { attrs: 'fill' } },
          // 其他SVGO优化插件，比如移除注释、压缩路径等（默认已启用）
        ]
      }
    })
  ],
  // 可选：配置@别名，和CRA保持一致
  resolve: {
    alias: {
      '@': '/src'
    }
  }
})

3. TypeScript类型声明（可选但推荐） #

如果是TypeScript项目，为了避免导入SVG时的类型报错，在src目录下创建svg.d.ts文件，添加类型声明：

declare module '*.svg' {
  import React from 'react'
  const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>
  export default ReactComponent
  export { ReactComponent }
}

4. 使用方式和CRA完全相同 #

直接按你习惯的方式导入并使用SVG组件：

import { ReactComponent as NotFound } from '@/assets/images/not-found.svg'

function Error() {
  return (
    <div>
      <NotFound className="logo" />
    </div>
  )
}
export default Error

说明 #

• vite-plugin-svgr默认会启用SVGO的基础优化规则，如果不需要自定义配置，可以省略svgoConfig选项
• 通过SVGO配置可以大幅压缩SVG体积，同时保留必要的属性保证渲染正常

内容的提问来源于stack exchange，提问作者GuangWu