1、安装依赖
npm i svg-sprite-loader -D
2、需要配置相关的svg
打开vue.congfig.js文件，配置chainWebpack
需要在src/assets/svg新建文件夹，里面存放svg图
chainWebpack: config => { config.module.rules.delete('svg'); //重点:删除默认配置中处理svg, config.module .rule('svg-sprite-loader') .test(/\.svg$/) .include.add(resolve('src/assets/svg')) // 表示目录中的文件需要进行 svg-sprite-loader .end() .use('svg-sprite-loader') .loader('svg-sprite-loader') .options({ symbolId: 'icon-[name]' }); config.module .rule('images') .test(/\.(png|jpe?g|gif|webp|svg)(\?.*)?$/) .exclude.add(resolve('src/assets/svg')) // 表示目录中的文件不要进行 url-loader .end() .use('url-loader') .loader('url-loader') .options({ limit: 10240, // 设置小于10k的就base64 name: 'img/[name].[hash:7].[ext]', publicPath: assetsPublicPath }); },
3、重点：编写svgIcon组件
svgIcon文件夹包含两个文件：svgIcon.vue和index.js
svgIcon.vue如下
<template> <svg :class="svgClass" aria-hidden="true"> <use :xlink:href="iconName"></use> </svg> </template> <script> export default { name: 'svg-icon', props: { iconClass: { type: String, required: true }, className: { type: String } }, computed: { iconName () { return `#icon-${this.iconClass}`; }, svgClass () { if (this.className) { return 'svg-icon ' + this.className; } else { return 'svg-icon'; } } } }; </script> <style lang="scss" scoped> .svg-icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; //此属性为更改svg颜色属性设置 stroke: currentColor; overflow: hidden; } </style>
index.js如下：
import Vue from 'vue'; import SvgIcon from '@/components/svgIcon/svgIcon.vue'; // 全局注册组件 Vue.component('svg-icon', SvgIcon); // 定义一个加载目录的函数 const requireAll = requireContext => requireContext.keys().map(requireContext); /** * require.context是什么？ * 一个webpack的api,通过执行require.context函数获取一个特定的上下文, * 主要用来实现自动化导入模块, * 在前端工程中,如果遇到从一个文件夹引入很多模块的情况, * 可以使用这个api,它会遍历文件夹中的指定文件, * 然后自动导入,使得不需要每次显式的调用import导入模块 */ const req = require.context('@/assets/svg', false, /\.svg$/); // 加载目录下的所有 svg 文件 requireAll(req);
4、单页使用时
需要在main.js文件里引用
// 全局注册svg组件 import '@/components/svgIcon';
5、示例
在svg文件里添加一张test.svg图片，iconClass跟图片名称保持一致，className可以自己添加类，默认会有一个svg-icon
注意：需要把svg图片文件的(需要修改的)fill以及stroke修改成currentColor。
比如下面的svg文件就stroke="currentColor"
<?xml version="1.0" encoding="UTF-8"?> <svg width="16px" height="14px" viewBox="0 0 16 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g id="test" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round"> <g id="17-test" transform="translate(-1153.000000, -537.000000)" stroke="currentColor"> <g id="icon-test" transform="translate(1154.000000, 538.000000)"> <path d="M14.4576763,0 L6.15140056,0 C5.87525819,-1.94537167e-16 5.65140056,0.223857625 5.65140056,0.5 L5.65140056,5.98362814 C5.65140056,6.25977051 5.42754294,6.48362814 5.15140056,6.48362814 L3,6.48362814 L3,6.48362814" id="路径-4"></path> <path d="M5.48334313,2.84002654 L2.79482046,2.84002654 C2.68270744,2.84002654 2.5738475,2.877706 2.48572375,2.94701353 L0.190903296,4.75184293 C0.0703681963,4.84664132 -1.85064764e-15,4.99150847 -1.77635684e-15,5.14485594 L-1.77635684e-15,10.1645815 C-1.36303406e-15,10.4407239 0.223857625,10.6645815 0.5,10.6645815 L3.10371973,10.6645815 L3.10371973,10.6645815 M6.10371973,10.6645815 L9.30163607,10.6645815 M12.3016361,10.6645815 L14.554688,10.6645815" id="形状"></path> <path d="M6.10371973,10.6645815 L6.10371973,10.8706025 C6.10371973,11.6990296 5.43214685,12.3706025 4.60371973,12.3706025 C3.7752926,12.3706025 3.10371973,11.6990296 3.10371973,10.8706025 L3.10371973,10.6645815" id="路径"></path> <path d="M12.3016361,10.6645815 L12.3016361,10.8706025 C12.3016361,11.6990296 11.6300632,12.3706025 10.8016361,12.3706025 C9.97320895,12.3706025 9.30163607,11.6990296 9.30163607,10.8706025 L9.30163607,10.6645815" id="路径备份"></path> <line x1="9.97537131" y1="5.5" x2="14.4921377" y2="5.5" id="路径-8"></line> </g> </g> </g> </svg>
页面使用以及样式修改
<svg-icon iconClass="test" className='test-name'></svg-icon>
.test-name { width: 14px; height: 14px; color: green; }
