VUE-cli3使用使用 svg-sprite-loader
VUE-cli3使用 svg-sprite-loader
svg-sprite-loader 的插件，用来根据导入的 svg 文件自动生成 symbol 标签并插入 html，接下来就可以在模版中方便地使用
svg-sprite 技术了。
使用使用 svg-sprite 的好处的好处
页面代码清爽
可使用 ID 随处重复调用
每个 SVG 图标都可以更改大小颜色
安装插件安装插件
npm install svg-sprite-loader --save-dev
webpack 配置,在Vue.config.js加入处理 svg 的 loader：
const path = require('path')
function resolve(dir) {
return path.join(__dirname, '.', dir)
}
module.exports = {
chainWebpack: config => {
config.module.rules.delete("svg"); //重点:删除默认配置中处理svg,
//const svgRule = config.module.rule('svg')
//svgRule.uses.clear()
config.module
.rule('svg-sprite-loader')
.test(/\.svg$/)
.include
.add(resolve('src/icons')) //处理svg目录
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
},
configureWebpack: () => ({
// resolve: {
// alias: require('./alias.config').webpack
// }
// module: {
// rules: [{
// test: /\.svg$/,
// use: [{
// loader: "svg-sprite-loader",
// options: {
// symbolId: 'icon-[name]'
// }
// }] // }] // }
})
}
这时候发现还是不行啊， body 中并没有看到 symbol 标签。
资源评论
weixin_38633083
- 粉丝: 0
- 资源: 896
