在vue项目中使用svg图标不显示

在vue项目中配置使用svg图标，项目只有config文件夹，没有vue.config.js文件，chainWebpack下面这段代码应该配置在哪里呢 ？
chainWebpack: (config) => {
const svgRule = config.module.rule('svg');
svgRule.uses.clear();
svgRule
.test(/.svg$/)
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
});
}问题相关代码，请勿粘贴截图

我新建了一个vue.config.js文件，配置下面代码，结果显示
chainWebpack: (config) => {
// config.resolve.alias
// .set('@', resolve('src')) //3.0的写法 映射路径 @代表src 比如要写一个图片 就会读取src下assets下img下的图片
const svgRule = config.module.rule('svg');
svgRule.uses.clear();
svgRule
.test(/.svg$/)
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
});

结果：在页面中不显示，也不报错

我在config文件夹下的index.js中放了这段代码，图标也没有显示

我想要达到的结果
显示svg图标

放在vue.config.js文件中的，页面不显示你看看路径或者引用svg的方式是否正确

vue.config.js是老版本的文件了，现在已经换别的了，你可以CSDN里搜一下