Vue2搭建基础架构（8）--- 使用svg-sprite-loader

说明

这里记录下自己在Vue2的项目使用svg-sprite-loader来全局使用svg雪碧图，方便以后直接使用。这里承接自己的博客Vue2搭建基础架构（7）— 使用vuex-persistedstate这篇博客，在该博客项目的基础上增加使用svg-sprite-loader。

svg-sprite-loader官方网站：https://gitcode.com/gh_mirrors/svg/svg-sprite-loader

安装svg-sprite-loader

命令如下，-D表示该依赖添加在package.json里面的devDependencies。

devDependencies下的依赖包，只是我们在本地或开发坏境下运行代码所依赖的，若发到线上，其实就不需要devDependencies下的所有依赖包；(比如各种loader，babel全家桶及各种webpack的插件等)只用于开发环境，不用于生产环境，因此不需要打包。

npm install svg-sprite-loader -D

在webstorm里面的Terminal输入npm install svg-sprite-loader -D命令安装该依赖。如下:

package.json会增加svg-sprite-loader版本号

使用svg-sprite-loader

在src目录下的assets文件夹下新建icons文件夹来存放svg图片。这里随便放了2个svg图片。

在vue.config.js添加如下代码：

代码如下：

const { defineConfig } = require('@vue/cli-service')
// 导入nodejs工具path模块
const path = require('path')

module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    resolve: {
      // 别名配置,配置@指向src
      alias: {
        '@': path.resolve(__dirname, 'src')
      },
      // 引入文件的时候，可以忽略掉以下文件后缀
      extensions: ['.js', '.mjs', '.vue', '.json', '.less', '.css']
    }
  },
  // svg图片配置
  chainWebpack(config) {
    // 修改当前项目默认的svg配置,排除我们刚设的icons目录
    config.module
        .rule('svg') // 自定义规则名称
        .exclude.add(path.resolve(__dirname,'src/assets/icons'))// 排除icons目录下的svg文件
        .end()
    // 新增一个规则名为icons的规则,使用svg-sprite-loader来添加icons里面的svg
    config.module
        .rule('icons') // 自定义规则名称
        .test(/\.svg$/) // 匹配后缀为.svg的文件
        .include.add(path.resolve(__dirname,'src/assets/icons'))// svg图标位置
        .end() // end()用来退到上层链式，即回到和include平级那层
        .use('svg-sprite-loader')
        .loader('svg-sprite-loader')
        .options({
          symbolId: 'icon-[name]' // 要制定下图标id，[name]就是读到的svg文件名
        })
        .end()
    }
})

这里向大家推荐使用一个vue-cli提供的命令vue inspect来查询，它可以用来查询所有的隐藏的webpack配置，因为我只要查rules相关的命令，所以只需要使用vue inspect --rules命令即可。如下：

配置好规则后，可以使用cmd.exe来查看刚刚项目配置的两个规则，一个规则名为svg的，一个规则名为icons的，命令如下：

不要在项目里面的Terminal控制台输入vue inspect --rule svg命令，否则会出现如下错误：

添加svg-icon组件和全局注册svg图标js文件

在components文件夹下新建一个svg-icon文件夹，在svg-icon文件夹下面创建一个index.vue写svg组件内容，代码如下：

<!--svg组件-->
<template>
  <svg
      :class="svgIconClass"
      aria-hidden="true"
  >
    <use :xlink:href="svgIconName" />
  </svg>
</template>

<script>
  export default {
    name: "SvgIcon",
    props: {
      // icon图标名称
      iconName: {
        type: String,
        required: true,
      },
      // class样式名称,如果svg标签需要添加class样式,那么就需要该属性来添加svg的样式
      className: {
        type: String,
        default: ''
      }
    },
    computed: {
      // svg图片名称计算属性
      svgIconName() {
        return `#icon-${this.iconName}`
      },
      // svg样式名称计算属性
      svgIconClass() {
        if (this.className) {
          return 'svg-icon ' + this.className
        } else {
          return 'svg-icon'
        }
      }
    }
  }
</script>

<style scoped>
  /*设置默认svg图标样式,不可删除,否则就会显示原图标样式*/
  .svg-icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
</style>

在src/assets/icons文件夹下新建一个index.js全局组件文件，代码如下：

import Vue from 'vue'
import SvgIcon from '@/components/svg-icon'// svg组件

// 全局注册svg组件
Vue.component('SvgIcon', SvgIcon)

// ./表示svg图标所在的文件夹icons,然后匹配icons文件夹下的的svg图标文件,如果你想把svg放在icons下的svg目录中,这里的./就得改为./svg
const svgRequire = require.context('./', false, /\.svg$/)
// 完成本地svg图标的导入
svgRequire.keys().forEach(svgIcon => svgRequire(svgIcon))

在main.js里面将svg注册的js文件引入

测试svg雪碧图

如果想要修改svg图片颜色，需要修改svg图片里面的fill属性改为currentColor，如下：

在views下home文件下的index.vue直接添加svg标签代码，如下：

浏览器结果如下，显示默认svg图片大小和颜色:

如果想要修改svg图片样式，增加一个class样式即可。代码如下：

浏览器结果如下：
发现图片大小和颜色都被改变了，效果达到了。

全局使用svg图片说明就到这里了。

原文地址：https://blog.csdn.net/weixin_48040732/article/details/144909887

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！