对于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、引入依赖 npm install svg-sprite-loader -D 2、在src文件夹下新建文件夹存放svg图 3、封装公共svg组件 3、全局注册使用(避免使用时还需要再去引入封装的svg组件) 4、在vue.config.js 当中增加svg 配置 5、使用用例
第一种方式: 二、安装svg-sprite-loader npm install svg-sprite-loader --save-dev 三、webpack 配置(build/webpack.base.conf.js) { test:/\.svg$/, loader:'svg-sprite-loader', include: [resolve('src/icons')], options: { symbolId:'icon-[name]'//去掉svg这个图片加载不出来} }, { test:...
【vue】webpack 插件 svg-sprite-loader—实现自己的 icon 组件 手摸手,带你优雅的使用 icon 使用svg-sprite-loader、svgo-loader 优化 svg symbols
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')...
vue-cli3 第一次使用成功就是根据这篇文章,为了防止链接找不到,记录一份 使用这种方式,图标可以更容易维护 安装依赖 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: \'svg-sprite-loader\', include: [resolve(\'src/icons\')], options: { symbolId: \'icon-[name]\' } } 并在以下设置中添加exclude: [resolve(\'src/icons\')],,如下所示 { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, ...
loader: 'svg-sprite-loader', options: { symbolId: 'icon-[name]', }, }, // 移除svg的fill属性 { loader: 'svgo-loader', options: { // 必须指定name! plugins: [ { name: 'removeAttrs', params: { attrs: 'fill' }, }, ], ...
npm i svg-sprite-loader-D webpack 配置 // webpack.config.jsconstpath=require('path');module.exports={module:{rules:[// 处理svg图标{test:/\.svg$/,loader:'svg-sprite-loader',include:[// 指定svg图标的路径path.resolve('./src/icons/svg'),],options:{symbolId:'icon-[name]',},},],...
('path'); module.exports = { module: { rules: [ // 处理svg图标 { test: /\.svg$/, include: [path.resolve('./src/icons/svg')], use: [ { loader: 'svg-sprite-loader', options: { symbolId: 'icon-[name]', }, }, // 移除svg的fill属性 { loader: 'svgo-loader', options: ...