如何在vue项目中使用svg图片

最新推荐文章于 2025-03-15 07:20:29 发布

weixin_45578530

最新推荐文章于 2025-03-15 07:20:29 发布

阅读量933

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_45578530/article/details/125661243

版权

一、下载插件

npm i svg -sprite-loader@4.1.3

二、配置vue.config.js

顶部加

const path=require('path')
function resolve(dir){
    return path.join(__dirname,dir)
}

module.exports里加

chainWebpack(config){
     config.module
      .rule("svg")
      .exclude.add(resolve("src/assets/icons"))
      .end();
    config.module
      .rule("icons")
      .test(/\.svg$/)
      .include.add(resolve("src/assets/icons"))
      .end()
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader")
      .options({
        symbolId: "icon-[name]"
      })
      .end();  
}

三、创建目录

（1）src/assets/icons

将资源文件放入src/assets/icons下