插件选项
插件选项可以传递给 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 禁用该功能,设置 true 为 currentColor 或者自定义颜色。
failOnError
- 类型:
boolean - 默认值:
false
控制编译阶段遇到错误 SVG 文件或重复生成 symbolId 时的行为:
false:输出告警并跳过错误图标或后出现的重复图标。true:立即抛错并使编译/构建失败。
bakerOptions
- 类型:
BakerOptions - 默认值:
{}
该选项会直接传递给底层 svg-icon-baker。 可用于完整自定义 baker 行为,包括 SVGO 配置项。 更多详情请参阅 svg-icon-baker 选项文档。
注意
如果你不知道这是什么,请不要覆盖此选项。
如果你清楚原理,配置它可能会改善某些“奇怪的SVG”的效果,但它可能会引发更大的问题。 最好的办法是修改SVG文件本身。