从gulp SVG -sprite构建过程中排除svg - 腾讯云开发者社区

文章/答案/技术大牛

发布

Web图标的工程化方案

来源：周周酱爱学习 https://juejin.cn/post/6952150039732944910 如何管理图标是我们在web项目开发过程中都会遇到的问题。...gulp （自动化构建工具） gulp-iconfont （使用gulp将svg图标集合创建为 svg/ttf/eot/woff/woff2字体） gulp-iconfont-css （结合gulp-iconfont...微信图片_20191231153104.png svg sprite svg意为可缩放矢量图形，它不会像位图一样因为放大而失真，他在不同分辨率下的表现都一样清晰。...svg-sprite-loader 针对所引用的svg文件，svg-sprite-loader会把你的icon塞到一个个symbol中，最终在你的body中嵌入合并后的symbol。...示例项目使用vue cli 3搭建，vue.config.js相关配置如下，我们会将图标文件放在一个特定的目录中，针对该目录下的文件，会将默认的loader配置排除，使用svg-sprite-loader

1.2K1 0

从 Web 图标演进历史看最佳实践

本文将简单梳理一下图标相关的工作流程的演进，以及我们在百度设计语言系统推进过程中相关的一些尝试。全文7006字，预计阅读时间 14分钟。...SVG Sprite 由于 SVG 支持一个元素，可以从内联的 SVG 中选取特定内容出来作为独立的 SVG 进行显示，所以人们受 CSS sprite 的启发，也设计了一个 SVG sprite...引入整个 SVG sprite 的资源仅需要内联一个 svg> 元素： svg> svg> 同时，也有不少基于 Grunt/Gulp/webpack 的构建方案，来快速生成 SVG sprite。...当然，从各方面综合比较，封装内联 SVG 应该是当前最佳的选择。上文 GitHub 后端 helper 的方案对应当前前端的技术方案，实际上就是基于内联 SVG 的图标组件。

1.9K1 0

您找到你想要的搜索结果了吗？

是的

没有找到

高清ICON SVG解决方案（下） - 腾讯ISUX

height: 16px; display: inline-block; background-repeat: no-repeat; background-image: url(sprite.svg...); background-position: 0 0;} 当然如果你不喜欢用icomoon也可以用自动化工具生成SVG Sprite例如用：gulp-svgstore、grunt-iconizr...、gulp-svg-sprites 第五种SVG Defs/Symbols 这种其实就是在SVG Sprites上面更进一步的使用了，SVG Sprites是需要我们去通过坐标获取对应位置图标的，但是...第五步，对icomoon生成的样式sprite.css进行微调整让其适配所有PC浏览器和Retina下的浏览器： ? 最后的效果： ?...上一篇文章之所以在火狐图标出问题那块讲了许久，并抛出更严谨的图标制作方法的主要原因这个方案需要对合并后的SVG Sprites转成PNG Sprite图片，如果SVG ICON做的有问题，那生成的图片也然出现发虚的情况

1.3K1 0

如何在Vue项目中更优雅地使用svg

，只需要写这么一段代码即可： svg> svg> 但是这里有两个问题：从图标库（比如阿里的 iconfont）下载下来的通常是...这里的关键是使用 svg-sprite-loader 这个插件。...icons 为例，从 iconfont 下载 .svg 文件后放到这个文件夹即可。...svg 文件都用来做图标吧），所以我们要排除掉 file-loader 对 src/assets/img/icons 这个文件夹的处理。.../icons')) .end() .use('svg-sprite-loader') .loader("svg-sprite-loader") .options({symbolId

13.6K2 1

Vue | 使用 SVG sprite loader 来引入 svg

但是我们现在在用的是 Vue 官方的代码是这样的 // webpack >= 2 { test: /\.svg$/, loader: 'svg-sprite-loader', options...config.plugin('svg-sprite').use(require('svg-sprite-loader/plugin'), [{plainSprite: true}]) config.module.rule...('svg').exclude.add(dir) // 其他 svg loader 排除 icons 目录 // config.module // .rule('svg-sprite...$/) // .include.add(dir).end() // .use('svg-sprite-loader-mod').loader('svg-sprite-loader-mod...(dir) // 其他 svg loader 排除 icons 目录 } } 收工，效果如下 PS: vue.config.js 报 eslint 错误怎么办？

3.6K2 0

52·旺财记账-导航栏

的路径，不过这不是我们想要的，我们需要的是一个svg use的使用方法，此时我们需要svg sprite loader ---- 安装svg sprite loader MacBook-pro:morney...svg-sprite-loader').loader('svg-sprite-loader').options({extract: false}).end() // 使用svg-sprite-loader...: true}]) // 排除其他的svg，只要不在icons目录下的svg都不走这个规则 config.module.rule('svg').exclude.add(dir...: true}]) // 排除其他的svg，只要不在icons目录下的svg都不走这个规则 config.module.rule('svg').exclude.add(dir...: true}]) // 排除其他的svg，只要不在icons目录下的svg都不走这个规则 config.module.rule('svg').exclude.add(dir

1.5K2 0

为你重新系统梳理下， Web 体验优化中和图有关的那些事（万字长文）

本文从 Web 常见的图片格式入手，引出与图片优化相关的有效方案，期望对大家能有一点帮助。先来点背景知识 “注：如下说明整理于网络公开信息。...： const gulp = require('gulp'); const spritesmith = require('gulp.spritesmith'); // gulp任务定义 gulp.task...('sprite', () => { return gulp.src('images/*.png') .pipe(spritesmith({ imgName: 'sprite.png...', cssName: 'sprite.css' }) ).pipe(gulp.dest('./')); }); 运行后会得到sprite.png、sprite.css...Sprite 技术的使用的确为更多网站的优化加载速度的体验贡献甚大，但我们要承认，这个过程中我们忽略并损害了使用高对比度模式用户的体验。

1.5K2 0

使用svg-sprite-loader 遇到的问题

趁记忆还热乎赶紧过来记录一下自己踩坑的记录现有的项目是从另一个项目移植过来的, 并不是完全移植为了减小项目的体积前端组长将一些暂时用不到的组件 node包都剔除了这也就引出了一下的问题...svg内容没有出来, 于是继续把样式扒过来, 样式对了但svg内容就是死活出不来, 于是我一直搜这个svg在哪个地方引入的怎么注入到页面的折腾了一上午,终于让我发现了一句话原项目中这样写...把svg-sprite-loader 引入引入之后配置好编译好的目录 { test: /\.svg$/, loader: 'svg-sprite-loader',...[ext]') } }, 二个loader都处理了svg文件导致svg-sprite-loader'在编译的时候并不是svg源文件于是出错了解决方案: 为二个loader...设置编译的文件 exclude: [resolve('src/icons')], 排除目录src/icon include: [resolve('src/icons')], 只对src

1.7K2 0

Vue 项目引入 SVG 图标

和 svg-sprite-loader，这两个工具包都是给 webpack 打包 svg 图标资源使用。...svgo: Node.js tool for optimizing SVG files. svg-sprite-loader: Webpack loader for creating SVG sprites..."devDependencies": { "svgo": "^1.2.1", "svg-sprite-loader": "^4.1.3" } 然后配置 webpack 对于 svg 文件的 loader...() // 清除已有 loader svgRule.exclude.add(/node_modules/) // 排除 node_modules 目录 svgRule // 添加新的 svg...loader .test(/\.svg$/) .use('svg-sprite-loader') .loader('svg-sprite-loader')

2.3K2 0

前端不止：请告诉我，你要什么样的图标

制作雪碧图的工具有很多，我比较常用的在线雪碧图工具是：Sprite Cow，或者是NodeJS平台下的构建工具插件，如：webpack-spritesmith。...，开源构建工具插件有gulp-iconfont等等。...优化SVG 通常是建议在把SVG从图形编辑器中导出后，再用单独的优化工具来进行优化。比如：删除无用Comments和Metadata，简化代码，简化单个路径等。...更多关于IconFont的绘画规则，请参考：Iconfont.cn文档，Icomoon文档，gulp-iconfont文档，fontello文档。...请看下面这张图，敏捷的开发过程中不同角色共享职责，那么设计师和开发也不例外。

1.8K7 0

前端技能图谱

ES6 / CoffeScript / TypeScript SCSS / SASS CSS3 HTML语义化面向对象编程函数式编程 MVC / MVVM / MV* 矢量图形 / 矢量图形动画（如SVG...安全性（如跨域）授权（如HTTP Basic、JWT等等）工程化代码质量（如JSLint / ESLint / TSLint / CSLint）代码分析（如Code Climate）测试覆盖率构建系统...（gulp、grunt、webpack等等）自动构建（脚本）兼容性跨浏览器测试（Chrome，IE，Firefox，Safari等等）跨平台测试（Windows、GNU/Linux，Mac OS...Android，iOS，Windows Phone）跨版本测试（同一个浏览器的不同版本）前端特定 CSS / CSS3 动画 JavaScript 动画 Web字体嵌入 Icon 字体图形和图表 CSS Sprite...Flexbox布局 SEO Sitemap（站点地图）内部链接建设 MicroData / MicroFormat 页面静态内容生成详细内容，请期待Growth 2.0哈，Android用户可以从

1.9K9 0

Vue项目中优雅使用icon

性能这个也可以不用担心，早在14年张鑫旭的一篇帖子 SVG Sprite介绍完美诠释了svg sprite的工作方式，并且对其很看好，或许这就是大佬的眼光吧 - _ - 单纯使用iconfont官方那种...svg-sprite-loader来单独处理我们的svg图标，它是一个webpack loader，支持将多个svg打包成svg sprites npm下载 npm install svg-sprite-loader...默认规则排除icons目录中svg文件处理 config.module .rule("svg") .exclude.add(resolve("src/icons"))...cli的默认配置，怕改错，可通过vue inspect审查webpack内部配置，详细请看： inspect使用上面代码中我们使用了webpack的链式高级用法来处理loader，首先排除了默认svg...Vue-Awesome 从掘友那了解到了vue-awesome，体验了一番，很nice，内置了fontawesome字体图标库好像也没啥可对比的，svg图标引入原理差不多，vue-awesome除了内置了

2.5K2 0

webpack4.0各个击破（3）—— Assets篇

webpack作为前端最火的构建工具，是前端自动化工具链最重要的部分，使用门槛较高。...本系列是笔者自己的学习记录，比较基础，希望通过问题 + 解决方式的模式，以前端构建中遇到的具体需求为出发点，学习webpack工具中相应的处理办法。...} }] } 执行打包命令可以看到png图片资源的名称被替换为hash并输出至构建文件夹。...矢量图处理开发中常用的矢量图为svg格式，既可以使用inline-svg-loader进行资源嵌入，也可以使用svg-sprite-loader将矢量图资源合并为雪碧图，具体采用哪种方案，需要由项目的实际情况来判断...笔者认为webpack对于静态资源所需要解决的首要问题是资源定位，除此之外其他的工作应该从其中剥离，以缩短打包时间。

1.4K2 0

前端项目搭建实战（Vue）

图标了，我们还需要做的就是将 svg 文件加载到内存中， svg-sprite-loader 的官方解释是：一个用于创建 svg 雪碧图的 Webpack 加载器。...通俗的讲：svg-sprite-loader 会把你引入的 svg 塞到一个个 symbol 中，合成一个大的 svg，最后将这个大的 svg 放入 body 中。...chainWebpack(config) { // 配置路径别名 config.resolve.alias.set('components', resolve('src/components')); // 已有配置排除掉...svg config.module.rule('svg').exclude.add(resolve('src/svg')); // 添加svg-sprite-loader config.module...end() // add完上下文进入数组，使用end回退 .use('svg-sprite-loader') // 添加loader .loader('svg-sprite-loader')

1.9K7 3

位图和SVG用法比较

然而，如果从稍远的位置观看它，位图图像的颜色和形状又显得是连续的。提到SVG，我想大多数人的第一印象是矢量缩放。是的，SVG是制作Logo、图标及按钮的理想选择。...> svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> sprite" id="circle">...> 因此，如果我们可以通过定制链接来显示目标对象，例如，SVG文件名称为 sprite.xml，我们通过在URL中添加哈希值来指定目标对象，如sprite.xml#circle ，我们就可以仅显示圆形所在图层...sprite.svg#triangle"> iframe sprite.svg#circle" width="100" height="100... sprite.svg#circle" width="100" height="100" /> sprite.svg#square" width="100

3.2K6 0

SVG 图标在React项目中的优化

从最后渲染到 html 中的代码来看，svg-react-loader 是有对 svg 原文件进行优化的。从打包后的文件大小可以看出来文件有被压缩： ? 这种方式的缺点：SVG 资源不可被缓存。...> 在需要引入单个图标的时候：这里我们使用 svg-sprite-loader 来自动生成 svg 雪碧图。.../, use: [{ loader: 'svg-sprite-loader', }], } react 组件中引入： import "....从 svg-sprite-loader 文档中看到可以利用 spriteloaderplugin 插件将所有 SVG 文件打包输出为一个大的 SVG：这里的 loader 配置： { test...('svg-sprite').innerHTML = data; }); 这样的方式是我们自己手动去请求的，思考下能否使用 webpack 配置或者一些插件就能达到 svg 与 js 资源分离的目的呢。

4K1 0

在 Vue 项目中更优雅的使用 icon

前言在 Web 开发中，我们经常会用到 icon，icon 的使用经历了从图片到字体，再到 svg 的演变过程，也产生出相应的 icon 库，如雪碧图、Font Awesome、Iconfont 等等...工具 svg-sprite-loader svgo-loader svg-sprite-loader用来打包 svg 图标，svgo-loader 来精简我们的 svg 内容。...add svg-sprite-loader svgo-loader -D 配置统一将所有的 icon 都以 svg 的形式都放在 src/assets/icons 目录中。....rule('svg-icon') .test(/.svg$/) .include.add(svgPath) .end() .use('svg-sprite-loader...参考资料手摸手，带你优雅的使用 icon 未来必热：SVG Sprites 技术介绍 SVG 精简压缩工具 svgo 简介和初体验 svg-sprite-loader svgo svgo-loader

6784 0

vue菜鸡实践

icon ,配置 svg-sprite-loader // 找到svg 默认的处理规则，将某个目录排除处理里的范围 config.module.rule('svg...') .exclude.add(resolve('src/icons')) // 新加一个icons的处理规则,用svg-sprite-loader处理，将上面那个目录添加...(svg)(\?.*)?.../) .include.add(resolve('src/icons')).end() .use() .loader('svg-sprite-loader...//看看效果按照配置创建文件，src根目录创建icons/svg/文件夹，里面存储svg后缀的文件 image.png 阿里矢量图库随便下载一个小图 svg t="1605408690360"

3933 0

Flutter&Flame游戏实践#13 | 扫雷 - 界面交互

[已完结] 第二季：从休闲游戏实践，进阶 Flutter&Flame 游戏开发。两季知识是独立存在的，第二季不需要第一季作为基础。...并展示出地图中的所有地雷：游戏胜利的条件是排除所有的地雷，将非雷区全部翻开：游戏失败游戏胜利总的来看，它是一个逻辑推理的益智游戏，规则非常精简，所以很容易上手。...它是 Flame 官方基于 flutter_svg 封装的构建： flame_svg: ^1.10.1 我们知道 SpriteComponent 是基于 Sprite 渲染呈现内容; 这里 flame_svg...封装了 SvgComponent 构建，基于 Svg 渲染呈现内容。...Sprite 基于资源图片得到，同理 Svg 可以通过加载 svg 文件得到。

6481 0

BuildAdmin04：vue加载本地svg图标

今天就讲一下如何在Icon中加载本地的svg图标。开篇还是将Icon实现结构图放出来，今天只看svg这条支线。了解svg 首先了解何为svg。...svg是一种基于XML的矢量图像描述语言，从里面可以获取两个关键信息：XML语言、图像。上图为BuildAdmin全屏图标的svg文件，可以看到内容是xml，然后最右边是svg表示一个全屏图标。...文件，所以就用使用webpack的svg-sprite-loader来加载svg。...1. svg-sprite-loader 先安装svg-sprite-loader npm i svg-sprite-loader -D 在vue.config.js中添加loader配置，以前webpack...定义svg组件在components/icon/svg目录下，实现了一个svg的component，定义html原生的svg标签。

7082 0

点击加载更多

Web图标的工程化方案

从 Web 图标演进历史看最佳实践

高清ICON SVG解决方案（下） - 腾讯ISUX

如何在Vue项目中更优雅地使用svg

Vue | 使用 SVG sprite loader 来引入 svg

52·旺财记账-导航栏

为你重新系统梳理下， Web 体验优化中和图有关的那些事（万字长文）

使用svg-sprite-loader 遇到的问题

Vue 项目引入 SVG 图标

前端不止：请告诉我，你要什么样的图标

前端技能图谱

Vue项目中优雅使用icon

webpack4.0各个击破（3）—— Assets篇

前端项目搭建实战（Vue）

位图和SVG用法比较

SVG 图标在React项目中的优化

在 Vue 项目中更优雅的使用 icon

vue菜鸡实践

Flutter&Flame游戏实践#13 | 扫雷 - 界面交互

BuildAdmin04：vue加载本地svg图标

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐