svg-sprite-loader 可以多个svg图标合并. 使用时只需根据合并的symbol的id即可.
npm install -D svg-sprite-loader
2. 更改vue.config.js webpack的配置
chainWebpack: config => { config.module.rules.delete(‘svg‘); //重点:删除默认配置中处理svg, config.module .rule(‘svg-sprite-loader‘) .test(/\.svg$/) .include.add(resolve(‘src/assets/icons/svg‘)) //处理svg目录 .end() .use(‘svg-sprite-loader‘) .loader(‘svg-sprite-loader‘) .options({ symbolId: ‘icon-[name]‘, }); }
由于更改了svg的处理方式, 如果不是所有svg都处理成svgicon还要添加 svg的处理
configureWebpack: { module: { rules: [ { test: /\.(svg)(\?.*)?$/, exclude: [resolve(‘src/assets/icons‘)], use: [ { loader: ‘file-loader‘, options: { name: ‘img/[name].[hash:8].[ext]‘, }, }, ], }, ], }, }
* 注意以上路径的区别.
3. 一个一个导入svg太麻烦. 没错有办法.
import Vue from ‘vue‘; import svgIcon from ‘./svgIcon.vue‘; Vue.component(svgIcon.name, svgIcon); const req = require.context(‘@/assets/icons‘, true, /\.svg$/); const requireAll = requireContext => requireContext.keys().map(name => requireContext(name)); requireAll(req);
导入指定目录下的所有svg文件.
4. 当然也可以注册一个全局组件 ,使用时更加简洁.
<template> <svg class="svg-icon" aria-hidden="true" v-on="$listeners"> <use :xlink:href="name" /> </svg> </template>
svg-sprite-loader ( svg-icon) 使用
原文：https://www.cnblogs.com/bzhy/p/11739280.html