gulp之向项目中添加 icon 图标

最新推荐文章于 2024-05-16 10:00:36 发布
最新推荐文章于 2024-05-16 10:00:36 发布
阅读量1.2k 收藏
点赞数
分类专栏： js开发框架 文章标签： 矢量图 字体 iconfont
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/easywild/article/details/78207649
版权
本文介绍如何通过gulp将从阿里巴巴矢量图标库下载的iconfont整合到项目中，利用yo包已有的font-family和类名进行扩展，并在scss中合并自定义图标。详细步骤包括新建common.scss文件，引入图标字体文件，以及在HTML中调用。
摘要由CSDN通过智能技术生成

注：这里使用的是从“阿里巴巴矢量图标库”(http://www.iconfont.cn/)下载的图标。
因为之前引入了 yo3（yo包的第三版） 包，yo包中已经定义了一些字体图标，不过就二十几个，远远不够，所以我们要是用的话，一般还是自己再引入。但是还是有好处的，因为yo 包已经为我们定义好了 font-family：yofont 和 类名：yo-ico 。我们在使用的时候，借助 sass 语法中的 merge 合并，可以将我们自己下载的图标添加到项目中供我们使用。
yo 包中定义font-face的文件：node_modules / yo3 / style / lib / core / classes / _iconfont.scss
yo 包中定义font-face的类名（.$_ico）的文件：node_modules / yo3 / style / lib / core /variables.scss
新建一个文件 common.scss ：

    @font-face{
        font-fam
最低0.47元/天 解锁文章
蜗牛慢
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
gulp打包压缩总结---2
DcTbnk的博客
05-12 426
关于 gulp 的打包压缩总结 1, gulp 的作用: 自动,打包压缩,指定的文件,将压缩好的文件,存储到指定的位置 实际项目中,执行的都是打包压缩的文件 为了提高响应时间,改善用户体验度 让页面的加载和执行,时间更短,效率更高 2, gulp 的打包压缩对象 (1), html格式 , js格式 , css格式 (2), 图片,音频,视频,icon字体图标...都是不能打包压缩的,压缩就会影响正常的程序的执行 (3), 还有一些插件等,例如
Gulp-其他文件的打包
weixin_45615650的博客
05-16 124
** 1、图片： ** 图片我们自己是不需要进行压缩的 const imgHandler = function () { return gulp //这里要加return .src('./src/img/**') .pipe(gulp.dest('./dest/img/')) } //将图片文件打包任务导出 module.exports.imgHandler = imgHandler; ** 2、videos： ** video我们自己是不需要进行压缩的
推荐一款神器：gulp-iconfont——SVG图标转字体库的利器！
最新发布
gitblog_00017的博客
05-16 469
推荐一款神器：gulp-iconfont——SVG图标转字体库的利器！ 项目地址:https://gitcode.com/nfroidure/gulp-iconfont 在前端开发中，SVG图标和字体库常常是我们用于构建可伸缩且色彩丰富的UI元素的工具。今天，我要向大家推荐一款开源项目——gulp-iconfont，它能帮助你轻松地将SVG图标转换成TTF、EOT、WOFF和WOFF2等字体格式，...
gulp-font-icon：一个gulp插件，可从SVG文件生成图标字体
02-04
gulp-font-icon gulp-font-icon是一个gulp插件，可从SVG文件生成图标字体。 用法 首先，安装gulp-font-icon作为开发依赖项： npm install --save-dev gulp-font-icon 然后，将其添加到您的gulpfile.js： var fontIcon = require("gulp-font-icon"); gulp.task("fontIcon", function() { return gulp.src(["src/res/icons/*.svg"]) .pipe(fontIcon({ fontName:
gulp iconfont
weixin_33979203的博客
10-22 306
参考如下网站 https://github.com/hjzheng/CUF_meeting_knowledge_share/tree/master/2015-7-24/gulp-test-iconfont gulpfile.js var gulp = require('gulp'); var iconfont = require('gulp-iconfont'); var ...
gulp-svg-sprite-script:Gulp 插件将单独的 svg 图标打包到可缓存的 javascript
06-22
gulp-svg-精灵脚本 Gulp 插件将单独的 svg 图标打包到可缓存的脚本中。 документ . 安装 npm install git://github.com/Ser-Gen/gulp-svg-sprite-script.git 如何使用 选项 插件使用模板和生成脚本。 您可以使用选项jsTmpl和cssTmpl来指定模板的路径。 您必须在脚本模板中使用%SVG_SPRITE%和%STYLE% 。 使用插件 例如，您在文件夹icons有 svg 图标并且想要使用自定义 css 和 js 模板。 Gulpfile 可能看起来像这样： var gulp = require ( 'gulp' ) ; var svgSpriteScript = require ( 'gulp-svg-sprite-script' ) ; gulp . task ( 'createSpr
gulp-cordova-icon:在您的cordova项目中添加图标
04-27
gulp-cordova-icon 自动为您的Cordova构建生成所有图标 安装 $ npm install --save-dev gulp-cordova-icon 该库取决于或 ，因此请确保安装其中一个。 用法 const create = require ( 'gulp-cordova-create' ) , ...
前端开源库-gulp-svgstore
08-29
removeTitle: true, // 移除SVG图标中的元素，防止命名冲突 })) .pipe(gulp.dest('dist')); // 输出合并后的SVG文件到dist目录 }); gulp.task('default', ['svgstore']); // 设置默认任务 ``` 4. **运行Gulp...
gulp_iconfont_test
07-05
4. **使用方法**：在项目中，开发者可以将SVG图标添加到源文件夹，运行`gulp iconfont`命令，Gulp会处理剩下的工作。然后，在HTML文件中，可以像使用普通文字一样使用图标，通过引用生成的`iconfont.css`文件，并...
ng-svg-sprite-icon-system
03-11
本文将围绕“ng-svg-sprite-icon-system”这一主题，深入探讨如何在Angular应用中构建一套完整的SVG精灵图标系统。 首先，我们要理解SVG精灵图标的优点。与传统的单独加载每个SVG图标相比，SVG精灵图标能够显著减少...
Gulp和Bootstrap入门使用的简单示例
08-10
Gulp和Bootstrap入门使用的简单示例
压缩字体 gulp-font-spider
weixin_43968658的博客
11-11 1207
拿UI给的字体直接用，字体太大，直接影响网站首次加载速度。利用 gulp-font-spider提取用到的字体，去除没用到的字体，大大减少了加载字体文件的大小。 如果Vue项目要用压缩字体，用fontmin 。 官网http://font-spider.org 按需压缩：从原字体中剔除没有用到的字符，可以将数 MB 大小的中文字体压缩成几十 KB 简单可靠：完全基于 HTML 与 CS...
gulp 自动化构建组件集合
liuyuqin1991的专栏
11-22 1581
1.node-hbsfy和node-pugify borwserify 支持 require handlebars模板及jade模板 Github： https://github.com/epeli/node-hbsfy https://github.com/domenic/jadeify2.node-glob 使用glob来返回目录中所有子文件（文件或文件夹） Github： htt
gulp自动添加静态文件版本号方案
wangwei249的博客
03-21 3244
系统发版后客户端缓存更新方案一。解决思路： 1. 利用gulp根据静态文件（JS,CSS,图片）内容生成对应的HASH值作为它的版本号，文件内容变化则版本号跟着变（需处理生成版本号的位置，不同路径下同名文件HASH值覆盖问题，JSP文件编码问题等，已在下面给出的gulpfile.js和环境配置中给出处理方案）。 minify类型的引用需做特殊处理，jsp中做过minfy优化后，为它加版本号必须加到
使用gulp对引用的文件添加版本号
面具哥布林的博客
12-22 7044
先贴出gulpfile.js文件：var gulp = require('gulp'); var uglify = require('gulp-uglify'); var concat = require('gulp-concat'); //- 多个文件合并为一个； var minifyCss = require('gulp-minify-css');
gulp定义函数_使用Gulp自定义Bootstrap图标
culi3182的博客
08-14 370
gulp定义函数If you are developing a web project using Bootstrap, you may have the need to add a set of custom icons in the place of the default Glyphicons that come with the framework. 如果使用Bootstrap开发Web...
Gulp打包构建项目
木木三的专栏
05-11 496
转载自：https://blog.csdn.net/sennyla/article/details/82148025 打包压缩js,css,支持sass编译成css,图片压缩，图片组建成精灵图，静态文件拷贝，实时监听变化自动刷新浏览器 //引入相关插件 var gulp = require('gulp'); var rename = require('gulp-rename'); //文件重...
使用gulp 怎样配置文件
mlonly的博客
01-20 6425
引入模块 gulp var gulp = require(‘gulp’); 创建执行目录 需要进行监听的文件 以及目录 //gulp.task(“html”,async()=>{ // gulp.src(“html/**/*”)//文件目录 // .pipe(gulp.dest(“D:\phpStudy\PHPTutorial\WWW\floweritem\html”));。/...
gulp怎么向页面中写入一个变量
06-10
在使用gulp构建工具时，我们可以使用gulp-template插件来向页面中写入一个变量。首先需要安装gulp-template插件： ``` npm install gulp-template --save-dev ``` 然后在gulpfile.js文件中引入插件： ```...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值