loader:'svg-sprite-loader', include: [resolve('src/icons')], options: { symbolId:'icon-[name]'//去掉svg这个图片加载不出来} }, { test:/\.(png|jpe?g|gif|svg)(\?.*)?$/, loader:'url-loader',//这个不处理svg图片,因为我们独立拆开让svg-sprite-loader来处理了exclude: [resolve('src/i...
将图标放在特定文件夹下,这里以 @/assets/svg 中导入的 svg 为例 2、安装 svg-sprite-loader npmisvg-sprite-loader 3、配置 vue.config.js module.exports= {// 配置使用stylus全局变量chainWebpack: config => {constsvgRule=config.module.rule("svg"); svgRule.uses.clear(); svgRule .use("svg-spr...
先安装svg-sprite-loader:yarn add svg-sprite-loader -D (我vue2用的yarn,vue3用的pnpm,当然你用什么随便你) 目录assets下创建icons文件夹用于存放svg components下创建SvgIcon文件夹,内创建index.vue作为全局svg组件: <template> <svg :style="{ width: width, height: height }"> <use :xlink:href="pr...
完整代码:https://github.com/mouday/vue2-svg-demo 在线demo: https://mouday.github.io/vue2-svg-demo/dist/ 参考: 【vue】webpack 插件 svg-sprite-loader—实现自己的 icon 组件 手摸手,带你优雅的使用 icon 使用svg-sprite-loader、svgo-loader 优化 svg symbols...
Vue2 引入下载的SVG图像的方式 Step 1:安装依赖 npm i svg-sprite-loader --save 1. Step 2:创建文件路径 // index.js import Vue from 'vue' import SvgIcon from '@/components/SvgIcon'// svg component // register globally Vue.component('svg-icon', SvgIcon) ...
对于Vue2项目,常用的库是svg-sprite-loader,它可以将多个SVG图标合并成一个SVG Sprite,从而减少HTTP请求,提高页面加载速度。 bash npm install svg-sprite-loader --save-dev 2. 配置webpack 在Vue项目中,通常通过vue.config.js或webpack.base.conf.js(取决于你的项目结构和Vue CLI版本)来配置svg-sprite-loade...
1.安装 svg-sprite-loader npm install svg-sprite-loader --save vue.config.js配置 // vue.config.jsconstpath=require('path')constresolve=dir=>{returnpath.join(__dirname,dir)}module.exports={chainWebpack:(config)=>{// svg图标加载config.module.rule('svg').exclude.add(resolve('src/icons')...
config.plugins.delete('preload')//TODO:need testconfig.plugins.delete('prefetch')//TODO:need test// set svg-sprite-loaderconfig.module.rule('svg') .exclude.add(resolve('src/assets/icons')) .end() config.module.rule('icons') .test(/\.svg$/) ...
npm install svg-sprite-loader -D vue.config.js中添加配置 module.exports={chainWebpack:config=>{constsvgRule=config.module.rule("svg");svgRule.uses.clear();svgRule.use("svg-sprite-loader").loader("svg-sprite-loader").options({symbolId:"icon-[name]"});},} ...
config.module.rules.delete("svg"); //重点:删除默认配置中处理svg config.module .rule('svg-smart') .test(/\.svg$/) .include.add(resolve('src/icons')) //处理svg目录 .end() .use('svg-sprite-loader') .loader('svg-sprite-loader') ...