在Vue项目中使用svg sprite

在Vue项目中使用svg sprite

一、什么是svg sprite？

二、svg sprite对比其它几种图片的使用方法的优缺点：

三、在项目中怎么使用？

1、可以在iconFont官网批量下载svg图片。

2、在src/icons/svg文件夹里面放需要使用到的svg图片文件，可以后续往里面新添加，不过需要再次启动项目编译之后，才能在项目中使用新加的svg图片。

3、安装svg-sprite-loader

npm i svg-sprite-loader --dev

4、配置vue.config.js，在其中加入以下代码

// vue.config.js
/*
这里的配置主要是将src/icons/svg里面的图片使用svg-sprite-loader进行编译，最后生成一个
大的svg标签，放在文档的body标签里面的最前面（相当于是生成了一张精灵图，我们一般称
其为svg sprite），然后这个标签里面是一个个的symbol标签，每个标签的id就是'icon-[name]'，
最后就是在svg标签的use标签上用href属性使用这个id属性值来进行对应svg图片的展示。
*/

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

module.exports = {
chainWebpack: config => {
       config.module
           .rule('svg')
           .exclude.add(resolve('src/icons'))
           .end()

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

5、写一个svg的组件，方便项目中的svg图片的使用，比如在src/plugins/svgIcon里面新建一个index.vue作为这个组件。

// src/plugins/svgIcon/index.vue

6、在src/icons/index.js中引入该组件

// src/icons/index.js

import Vue from 'vue';
import SvgIcon from '@/plugins/SvgIcon/index.vue';
Vue.component("icon-svg", SvgIcon);

// 这里是读取src/icons/svg里面的所有svg图片的导出
const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
// console.log("req====>", req.keys().map(req));
requireAll(req)

7、在main.js中引入src/icons/index.js

// main.js

import Vue from 'vue';
import App from './App.vue';
import store from './store/index.js';
import router from './router/index.js';
import axios from 'axios';

import "./icons/index.js";

new Vue({
   router,
   store,
   render: h => h(App)
}).$mount("#app");

8、在组件中使用该svg组件

// 这里的type要和symbol标签的id匹配上