vue项目中svg图（svg标签）的使用方法

最新推荐文章于 2023-09-26 15:15:21 发布

VIP文章梨花先雪bling

最新推荐文章于 2023-09-26 15:15:21 发布

阅读量4.7k

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/weixin_44242897/article/details/125441481

版权

几天前，ui无法把我拉进项目iconfont库，只好切了一份svg图包给我，于是琢磨了怎么用，简单地记录一下

其实所在项目什么都配置好了，真正用到的只有最后一项

1. 安装依赖

npm install --save-dev svg-sprite-loader

文件夹路径：src\assets\icons\index.js

2. 配置依赖

2.1 配置vue.config.js

这里配置的是vue.config.js，根据vue的版本不同，配置也会有所不同

module.exports = {
  chainWebpack: config => {
    const svgRule = config.module.rule('svg')
    svgRule.uses.clear()
    svgRule.exclude.add(/node_modules/)
    svgRule
      .test(/\.svg$/)
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]',
      })

    // 修改images loader 添加svg处理
    const imagesRule = config.module.rule('images')
    imagesRule.exclude.add(resolve('src/assets/icon'))
    config.module
      .rule('images')
      .test(/\.(