使用svg-sprite-loader 遇到的问题
趁记忆还热乎 赶紧过来记录一下自己踩坑的记录
现有的项目是从另一个项目移植过来的, 并不是完全移植 为了减小项目的体积 前端组长将一些暂时用不到的组件 node包都剔除了 这也就引出了一下的问题
今天调试菜单图标的时候 发现项目中菜单的图片渲染用到的是icon-svg 这个组件 但怎么找都找不到这个组件 于是我才原有项目中找了一下 copy过来
但这样子仍然不行啊,svg标签出来了 但样式 svg内容没有出来, 于是继续把样式扒过来, 样式对了 但svg内容就是死活出不来, 于是我一直搜这个svg在哪个地方引入的
怎么注入到页面的 折腾了一上午,终于让我发现了 一句话 原项目中这样写
Vue.component('icon-svg', IconSvg)const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
const iconMap = requireAll(req)generateIconsView.generate(iconMap) // just for views/icons , you can delete it
于是我搜索这句话什么意思
后来我发现我少引入了svg的loader 对比了二个项目中的webpack的webapck.base.conf.js 把svg-sprite-loader 引入
引入之后 配置好编译好的目录
{test: /\.svg$/,loader: 'svg-sprite-loader',include: [resolve('src/icons')],options: {symbolId: 'icon-[name]'}},
启动之后 发现项目起不来了 麻蛋
仔细看错误信息 原来在编译的时候 找不到svg文件里 没有<svg> 标签 怎么会这样 明明有啊
后来我又搜了一下这个出错的问题 又看了一下 webapck.base.conf.js 这个文件 发现还有一个loader 处理了svg文件
{test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,loader: 'url-loader',exclude: [resolve('src/icons')],options: {limit: 10000,name: utils.assetsPath('img/[name].[hash:7].[ext]')}},
二个loader都处理了svg文件 导致svg-sprite-loader'在编译的时候 并不是svg源文件 于是出错了
解决方案:
为二个loader 设置编译的文件
exclude: [resolve('src/icons')], 排除 目录src/icon
include: [resolve('src/icons')], 只对src/icon 目录生效
OK
该做的都做了 再不出现图标 我就真的要哭了
启动
打开首页
....
...
...
.....
.....
出现了 出现了
哈哈哈哈哈哈.............
我最喜欢踩坑了 我最喜欢填坑了 么么哒
使用svg-sprite-loader 遇到的问题相关推荐
- REM+SVG Sprite,web app案例
REM+SVG Sprite,构建新时代web app <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN&quo ...
- SVG Sprite技术介绍
一.Sprite技术 这里所说的Sprite技术,没错,类似于CSS中的Sprite技术.图标图形整合在一起,实际呈现的时候准确显示特定图标. 另,本文图片甚多,爪机党继续浏览需慎重. 二.SVG S ...
- SVG Sprite 使用简介
SVG简介 SVG即可缩放矢量图形 (Scalable Vector Graphics)的简称, 是一种用来描述二维矢量图形的XML标记语言. SVG图形不依赖于分辨率, 因此图形不会因为放大而显示出 ...
- 未来必热:SVG Sprite技术介绍(转自张鑫旭-鑫空间-鑫生活)
一.Sprite技术 这里所说的Sprite技术,没错,类似于CSS中的Sprite技术.图标图形整合在一起,实际呈现的时候准确显示特定图标. 另,本文图片甚多,爪机党继续浏览需慎重. 二.SVG S ...
- vue svg sprite loader_Vue项最佳实践
资源 Vue-CLI 3.0:https://cli.vuejs.org/zh/guide/webpack.html vue-element-admin:https://github.com/PanJ ...
- SVG进阶-sprite 雪碧图
前言 由于SVG自身的矢量性质,不管在什么情况下,图标都很清晰,可以适应不同尺寸大小和不用分辨率.不用担心模糊和锯齿.同时还能更改图标的填充颜色. CSS sprite 和SVG Sprite 传统的 ...
- SVG 图标制作指南
iconfont解决了我们以前大量使用小图标带来的种种问题,但是也有自身的各种缺陷.比如不支持多色,不同浏览器下的表现不同,需要做各种兼容等. 不久的将来iconfont应该会被svg symbol技 ...
- vue23自定义svg图标组件
可参考: 未来必热:SVG Sprites技术介绍 懒人神器:svg-sprite-loader实现自己的Icon组件 在Vue3项目中使用svg-sprite-loader 前置知识 在页面中,虽然 ...
- 使用SVG中的Symbol元素制作Icon
前言 随着大屏幕分辨率的普及以及各种移动设备层出不穷的移动互联网时代的到来,我们在网站设计时更应该关心内容在各种设备上的阅读性和显示效果.我们都希望能在任何时间,任何设备上都能清楚的,高效的传递信息给 ...
- HTML/CSS——网页SVG ICON(小图标)解决方案
一.基本概念 SVG: SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大 ...
最新文章
- python适合做后端开发吗-用Python开发app后端有优势吗
- 使用netty搭建一个简单的聊天室
- python 网站 源码_在线浏览美图源码,附带python源码
- 深入理解计算机系统学习记录(一)
- c语言指针灵活性管窥
- 用C#编写一个抓网页的应用程序
- 小米集团:回购460万股,耗资9818万港元
- 苹果XR信号差,可否要求苹果公司召回?
- PHP JSON中文乱码解决方法大全
- PyQt5将ui文件编译为py文件的方法
- JavaSE基础——异常、File文件类
- 分式怎么开根号_如何开根号
- Echarts 用GeoJson数据绘制地图
- 最新最全的前端面试题集锦之 微信小程序 篇(从基础到高级)
- 分解质因数(java解决)
- 深度学习秋招面试题集锦(一)
- Problem 1004: 蛤玮打扫教室(区间覆盖端点记录)
- 大学计算机在线作业答案,上海交通大学《计算机》在线作业二参考答案
- AI初探——百度、阿里、腾讯开放平台OCR功能解析
- Java--微信支付--小程序支付--v3版--完整的代码例子