Skip to content

插件选项

插件选项可以传递给 createSvgIconsPlugin 方法.

iconDirs

  • 类型: string[]
  • 必填: true

配置插件遍历用来生成 SVG精灵图 的 SVG文件 所在的文件夹。

  • 相对路径 统一基于 Vite 配置选项 root 解析。
  • 绝对路径 保持不变,适合 monorepo 中引用共享图标目录。

示例:

ts
// ...
createSvgIconsPlugin({
  iconDirs: ['src/icons'],
})
// ...

注意

插件会在编译阶段检测重复生成的 symbolId。 默认行为是输出告警并跳过后出现的重复图标;设置 failOnError: true 后会直接抛错并中断编译/构建。

symbolId

  • 类型: string
  • 默认值: icon-[dir]-[name]

SVG精灵图中的子节点 <symbol>id 属性。
选项值可以包含占位符 [name][dir]

  • [name]: SVG文件 的文件名, 不含扩展名.
  • [dir]: 配置的iconDirs文件夹到所含 SVG文件 的相对路径

示例:

ts
// ...
createSvgIconsPlugin({
  iconDirs: ['src/icons'],
  symbolId: 'icon-[dir]-[name]',
})
// ...
src/icons/
├── dir/
│ └── icon1.svg # icon-dir-icon1
├── icon1.svg # icon-icon1
└── icon2.svg # icon-icon2

注意

symbolId 除了占位符本身外,必须是合法的 ASCII 字母数字下划线连字符
symbolId 必须包含 [name] 占位符, 否则会抛出错误。

inject

  • 类型: string
  • 默认值: body-last
  • 选项: body-first | body-last

SVG 精灵图注入到 HTML 的位置。

注意

该选项仅作用于 客户端渲染(CSR)自动注入。
如果通过 virtual:svg-icons/sprite 手动注入(SSR 模板场景),inject 不生效。

customDomId

  • 类型: string
  • 默认值: __svg__icons__dom__

自定义注入的精灵的根节点 <svg>id 属性。

strokeOverride

  • 类型: boolean | string
  • 默认值: false

覆盖 stroke 属性,设置 false 禁用该功能,设置 truecurrentColor 或者自定义颜色。

failOnError

  • 类型: boolean
  • 默认值: false

控制编译阶段遇到错误 SVG 文件或重复生成 symbolId 时的行为:

  • false:输出告警并跳过错误图标或后出现的重复图标。
  • true:立即抛错并使编译/构建失败。

bakerOptions

  • 类型: BakerOptions
  • 默认值: {}

该选项会直接传递给底层 svg-icon-baker。 可用于完整自定义 baker 行为,包括 SVGO 配置项。 更多详情请参阅 svg-icon-baker 选项文档

注意

如果你不知道这是什么,请不要覆盖此选项。
如果你清楚原理,配置它可能会改善某些“奇怪的SVG”的效果,但它可能会引发更大的问题。 最好的办法是修改SVG文件本身。