在以往项目实践中，经常使用iconfont，但是其中有个问题就是当我们项目逐渐扩大，需要图标越来越多时，每次有新图标都要下载后手动更新icon文件，有些麻烦。今天整理下svg在项目中的优雅使用，每次更新图标，只需把新图标扔进对应的svg文件夹，无需替换所有文件，且在项目中一次引用，随时使用，也是真的简单方便啦。。。 （1）下载svg图片；项目中创建src/icons/svg文件，用来存放svg （2）因为使用vue-cli3.0创建的项目，需要在vue.config.js中进行配置，改掉原有项目对svg的配置，加上自己对svg的处理配置
//vue.config.js文件 const path = require('path') // 传递一个相对路径，会处理得到一个相对路径 function resolve(dir) { return path.join(__dirname, dir) } module.exports = { chainWebpack(config) { //1，对svg规则进行配置，让他排除对icons文件的处理 config.module.rule('svg') //在module的rule中找到关于svg的 .exclude.add(resolve('src/icons')) //在排除设置里，添加一条需要排除内容的绝对路径 .end() //退回到上一级 // 2，添加对icons规则，对svg文件进行处理 config.module .rule('icons') .test(/\.svg$/) .include.add(resolve('src/icons')) .end() .use('svg-sprite-loader') .loader('svg-sprite-loader') .options({ symbolId: 'icon-[name]' //icon图标使用时的命名 }) .end() } }此时其实已经可以使用了
//template中 <svg> <use xlink:href="#icon-qq"></use> </svg> //在script中 import "@/icons/svg/qq.svg";但是这样使用有个问题，如果图片多了，每次使用都要引入的话，失去了这样做的意义，而且使用时，样式控制和名称指定并不方便，为了更优雅的代码，可以继续敲下去。。。 （3）在icons文件夹下创建一个index.js文件，并在main.js中使用
//icons/index.js文件 //require.context 是require下的用一个方法，用于指定上下文；参数（指定的上下文，是否有下层文件，正则匹配后缀名） const req = require.context('./svg', false, /\.svg$/) req.keys().map(req); //会加载文件中符合规定的所有文件，最后展示为如下形式['qq.svg','wb.svg'] //main.js文件 import 'icons'现在已经加载出所有的svg图片，在组件中使用时，不需要引入也可以根据名称直接使用，但是，如果想要更方便的修改svg的大小样式，对svg进行组件封装 （4）封装组件，在components文件夹里创建svgIcon.vue文件
<template> <svg :class="svgClass" aria-hidden="true" v-on="$listeners"> <use :xlink:href="iconName"></use> </svg> </template> <script> export default { name: "SvgIcon", props: { iconClass: { type: String, required: true }, ClassName: { type: String, default: "" } }, computed: { iconName() { return `#icon-${this.iconClass}`; }, svgClass() { if (this.ClassName) { return "svg-icon" + this.ClassName; } else { return "svg-icon"; } } } }; </script> <style lang="less" scoped> .svg-icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } </style>还需全局注入组件
//在icons/index.js中引用这个组件 import Vue from 'vue'; import SvgIcon from '@/components/SvgIcon.vue'; //全局的引入svgicon组件 Vue.component('svg-icon', SvgIcon)（5）在组件中可以直接使用了,可以添加class设置自己需要的样式
<svg-icon icon-class="qq" class="my-style"></svg-icon>以上就是vue-cli3.0项目中svg使用，没事就试试吧。。。
