如何通过vite-plugin-svgr从SVG尺寸生成viewBox属性？

核心问题分析 #

你的配置存在两处错误：

• SVGO 3.x的插件配置格式不符合要求，之前的写法无法正确启用插件
• 未开启svgr自动生成viewBox的关键选项

正确配置方案 #

修改vite.config.ts中的svgr配置如下：

svgr({
  include: '**/*.svg?react',
  svgrOptions: {
    // 开启自动生成viewBox：若SVG无viewBox但有width/height，自动生成viewBox="0 0 宽 高"
    viewBox: true,
    svgo: true,
    svgoConfig: {
      plugins: [
        // 正确配置removeDimensions插件：仅当viewBox存在时移除width和height
        {
          name: 'removeDimensions',
          active: true
        }
      ]
    },
    // 给生成的React SVG组件固定宽高（按需保留）
    svgProps: { height: '12', width: '12' },
  },
})

关键配置说明 #

• viewBox: true：这是实现“根据宽高生成viewBox”的核心，svgr会自动检测SVG的width/height属性，若不存在viewBox则自动生成viewBox="0 0 [width值] [height值]"。
• SVGO 3.x插件格式：所有SVGO插件必须放在plugins数组中，以{name: 插件名, active: 布尔值}的形式声明，之前的直接赋值或数组语法均无效。
• removeDimensions插件：仅当SVG已存在viewBox时才会移除width/height属性；若原SVG无viewBox，该插件会等待svgr生成viewBox后再执行移除操作。如果需要保留原始宽高，可将active设为false。

特殊场景处理 #

若原始SVG既无viewBox也无width/height属性，需先为SVG添加基础宽高值，或通过svgProps指定宽高，再配合viewBox: true生成对应的viewBox。

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