要动态修改 SVG 文件中的 path 值，需要使用 webpack 和 svg-sprite-loader 插件。以下是完整的配置：
1. 安装 svg-sprite-loader 插件
```bash
npm install svg-sprite-loader --save-dev
```
2. 在 vue.config.js 中添加配置
```javascript
const path = require('path')
function resolve(dir) {
return path.join(__dirname, '.', dir)
}
module.exports = {
chainWebpack: config => {
const svgRule = config.module.rule('svg')
svgRule.uses.clear()
svgRule
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: '
icon-[name]',
extract: true,
spriteFilename: 'img/
icons.svg',
runtimeCompat: true,
publicPath: process.env.NODE_ENV === 'production' ? '/your/public/path/' : '/',
symbolDest: 'img/
icons/[name].svg',
pluginHooks: {
// 用于动态修改 path 值
beforeSanitizeElements: [function (sprite) {
sprite.querySelectorAll('path').forEach((path) => {
path.setAttribute('d', 'M0 0H10V10H0z')
})
}]
}
})
const fileRule = config.module.rule('file')
fileRule.uses.clear()
fileRule
.use('file-loader')
.loader('file-loader')
.options({
name: 'img/[name].[
hash:8].[ext]'
})
},
configureWebpack: {
resolve: {
alias: {
'@': resolve('src')
}
}
}
}
```
这里解释一下每个配置项的含义：
- `symbolId`：设置 SVG sprite 的 symbol id 的名字，这里使用 `
icon-[name]` 的方式命名
- `extract`：是否将构建后的 sprite 文件提取出来，默认为 true
- `spriteFilename`：提取出来的 sprite 文件名称，默认为 `img/
icons.svg`
- `runtimeCompat`：兼容各种运行时，可以让你在 Vue 中使用 SVG sprite，如果使用了 Vue CLI 4.x，建议开启
- `publicPath`：构建后的 publicPath，建议使用绝对路径
- `symbolDest`：构建后的 sprite 文件存储路径，这里设置为 `img/
icons/[name].svg`
- `pluginHooks.beforeSanitizeElements`：使用插件钩子，在 sanitizeElements 之前修改 path 值
3. 在组件中使用 SVG sprite
```vue
<template>
<div>
<svg aria-hidden="true" class="
icon">
<use xlink:href="#
icon-xxx"></use>
</svg>
</div>
</template>
<script>
export default {
name: 'ComponentName'
}
</script>
<style scoped>
.
icon {
width: 20px;
height: 20px;
fill: currentColor;
}
</style>
```
其中，`xlink:href` 中的 `#
icon-xxx` 对应到 SVG sprite 中的 symbol id，`fill: currentColor` 可以自动填充颜色。
注意：如果要修改 SVG sprite 中的 path 值，需要在插件钩子中进行修改，具体的修改方式可以根据实际情况进行调整。
扫一扫
4749
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
