vue onfocus(Vue 中 iconfont 使用)
图标库的发展过程 ,iconfont图标库的重要性(项目常用)
对于前端而言 ,图标的发展可谓日新月异 。从img标签,到雪碧图 ,再到字体图标 ,svg ,甚至svg也有了类似于雪碧图的方案svg-sprite-loader 。在项目实践中 ,bootstrap ,font-awesome ,element-ui等UI库都基本标配了字体图标。
一 、Iconfont - 图标管理工具
阿里巴巴旗下阿里妈妈MUX团队打造的图标管理平台 。
这是一个专门为设计师和前端开发者打造的在线工具 。设计师将图标上传到 Iconfont ,可以自定义下载多种格式的icon ,也可将图标转换为字体 ,方便前端工程师自由调整与使用 。
通过这个免费的工具,设计师不仅可以浏览下载大量优秀设计师的图标作品 ,还可以管理和展示自己设计的图标 。已经成为很多UI设计师和前端开发者日常工作的必备工具 。
大量优质的原创图标库
特点
矢量图标在线存储管理 。
设计师绘制的大量图标都可以上传 ,解决了管理和查找图标非常困难的痛点;
按项目管理图标,支持自定义尺寸和颜色 ,无论是前端工程师还是UI设计师 ,再也不用苦逼地切图搬砖了,需要什么尺寸 ,可以在平台上自行下载;
对于开发者来说 ,可以把需要的矢量图标以项目的方式管理 ,一键生成在web上通过css字体控制的矢量图标 ,支持在web/h5/小程序/App上调用 ,使用简单便捷 ,再也不需要用模糊的图片图标了;
对于设计师来说 ,平台上有上千上万设计师分享自己设计的图标 ,绝对是图标设计学习和灵感的利器 。
二 、Iconfont - 基础使用
引入iconfont的三种方式:Unicode 、Font class 、Symbol 。
1 、Unicode方式(不推荐)
在线使用
1)index.scss中引入在线字体
@font-face { font-family: iconfont; /* project id 1254715 */ src: url(//at.alicdn.com/t/font_1254715_s1khj1whikd.eot); src: url(//at.alicdn.com/t/font_1254715_s1khj1whikd.eot?#iefix) format(embedded-opentype), url(//at.alicdn.com/t/font_1254715_s1khj1whikd.woff2) format(woff2), url(//at.alicdn.com/t/font_1254715_s1khj1whikd.woff) format(woff), url(//at.alicdn.com/t/font_1254715_s1khj1whikd.ttf) format(truetype), url(//at.alicdn.com/t/font_1254715_s1khj1whikd.svg#iconfont) format(svg);} 复制代码2)页面中使用
使用时很不友好 ,使用的是unicode码表示,使用图标还必须去iconfont项目去查询下unicode码 。
<template> <div> <i class="iconfont"></i> <i class="iconfont"></i> <i class="iconfont"></i> <i class="iconfont"></i> </div> </template> 复制代码本地使用
有时候网络不是那么给力的 ,或者是内网环境 ,那么就不要考虑用在线引用的方式了。
1)本地使用需要先将字体库下载并放到项目中 。
2)在全局样式文件中定义如下代码
@font-face { font-family: "iconfont"; src: url(../fonts/iconfont.eot); /* IE9*/ src: url(../fonts/iconfont.eot#iefix) format(embedded-opentype), /* IE6-IE8 */ url(../fonts/iconfont.woff) format(woff), /* chrome, firefox */ url(../fonts/iconfont.woff2) format(woff2), /* chrome, firefox */ url(../fonts/iconfont.ttf) format(truetype), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ url(../assets/fonts/iconfont.svg#iconfont) format(svg); /* iOS 4.1- */} .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;} 复制代码3) 使用方式
与在线引用方式是一样的,都是使用unicode码去展示图标 。
<template><i class="iconfont"></i></template> 复制代码*总结
1)兼容性最好 ,支持ie6+ ,及所有现代浏览器。
2)支持按字体的方式去动态调整图标大小,颜色等等 。
3)因为是字体 ,所以不支持多色 。只能使用平台里单色的图标 ,就算项目里有多色图标也会自动去色。
2 、Font class方式(较友好)
一种更友好的封装 ,类似于font-awesome ,我们只要使用class ,就可以调用图标了 。其原理就是利用before伪元素来显示图标 。
在线使用
超级简单 ,只要在线生成代码 ,引用在线的css文件即可使用 。
1)在index.html中引用
<link rel="stylesheet" href="//at.alicdn.com/t/font_1261797_48wm20jf8z.css"> 复制代码2)项目中就可以使用字体图标
<template> <i class="iconfont cl-icon-fold"></i> <i class="iconfont cl-icon-delete-solid"></i> </template> 复制代码本地使用
与unicode方式类似 ,下载代码到本地 。因为我是用scss管理样式的 ,需要在下载的代码中提取出关键部分 。除了引用字体库,还要将其中的iconfont.css中定义的before伪元素全部复制到自己的scss文件中 。
@font-face { font-family: "iconfont"; src: url(../fonts/iconfont.eot); /* IE9*/ src: url(../fonts/iconfont.eot#iefix) format(embedded-opentype), /* IE6-IE8 */ url(../fonts/iconfont.woff) format(woff), /* chrome, firefox */ url(../fonts/iconfont.woff2) format(woff2), /* chrome, firefox */ url(../fonts/iconfont.ttf) format(truetype), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ url(../assets/fonts/iconfont.svg#iconfont) format(svg); /* iOS 4.1- */} .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}// 列了一部分举例 .cl-icon-user:before { content: "\e64b";} 复制代码*总结
1)兼容性良好 ,支持ie8+ ,及所有现代浏览器 。
2)相比于unicode语意明确,书写更直观 。可以很容易分辨icon是什么 。
3)因为使用class来定义图标 ,所以当要替换图标时 ,只需要修改class里面的unicode引用。
4)不过因为本质上还是使用的字体,所以多色图标还是不支持的 。
**建议
由于加了新的图标需要重新在iconfont.cn重新生成代码 ,所以这种方式也不算很方便 ,但是相对于unicode还是高级不少 。根据我的经验 ,建议在调试时 ,应该先使用在线使用的方式 ,调试完毕确认无误后 ,再下载到本地使用 ,这样对于效率提升有很大帮助。
3 、symbol方式(支持多色图标)
svg的symbol提供了类似于雪碧图的功能 ,让svg的使用变得更简单 ,也可以满足做图标系统的需求 。
在线使用
1)在iconfont项目中选择symbol方式,并在线生成js代码
2)在index.html中引入这个js文件
<script src="//at.alicdn.com/t/font_1254715_oewlgci0ut.js"></script> 复制代码这个js的作用是在文档中生成svg symbol
3)在页面中通过use标签使用svg图标了 。xlink:href的值设置为对应的symbol的id即可。
<svg aria-hidden="true"> <use xlink:href="#test-icon-word-ext"></use> </svg> 复制代码本地使用
本地使用也是一样的道理 ,主要是依赖这个在线生成的js文件 ,将在线js文件的链接在浏览器空标签中打开,就可以得到其内容 ,然后复制内容 ,自己命名一个js文件,并把它放在本地项目静态资源目录下 ,引用即可 。
4 、图标自动管理(必看)
上面3种使用方式的图标都依赖与iconfont以项目的形式管理 ,如果项目中新增了一个图标 ,还得重新生成图标相关资源 ,在代码中更新引入 。不能很方便的进行图标管理 。
svg-sprite-loader + require.context 优雅地解决了此问题 。
项目使用Vue CLI 搭建
引用步骤
1)安装svg-sprite-loader
npm install svg-sprite-loader -save-dev 复制代码2)在src目录下新建svg文件夹 ,这里存放所有svg文件 。
3)在vue.config.js文件中配置加载svg文件对应svg-sprite-loader规则
chainWebpack: config => { config.module.rules.delete(svg); //重点:删除默认配置中处理svg, config.module .rule(svg-sprite-loader) .test(/\.svg$/) .include.add(resolve(src/assets/icons/svg)) //处理svg目录 .end() .use(svg-sprite-loader) .loader(svg-sprite-loader) .options({ symbolId: icon-[name],}); } 复制代码使用方法
1)封装SvgIcon.vue组件
<template> <svg :class="svgClass" aria-hidden="true" v-on="$listeners"> <use :xlink:href="iconName" /> </svg> </template> <script> export default { name: SvgIcon, props: { svgName: { type: String, required: true }, className: { type: String, default: } }, computed: { iconName() { return `#icon-${this.svgName}` }, svgClass() { if (this.className) { return svg-icon + this.className } else { return svg-icon } } }} </script> 复制代码2 、在main.js中把SvgIcon注册成全局组件
import svgIcon from ./components/SvgIcon.vueVue.component(svg-icon, svgIcon) 复制代码3)在main.js中全局加载所有svg文件 ,不用每次使用都import一下
// 全局加载svg ,不用每次都importconst req = require.context(./svg, false, /\.svg$/)const requireAll = requireContent => requireContent.keys().map(requireContent)requireAll(req) 复制代码三、Iconfont - 项目实践
1 、问题痛点
icon 的管理是设计稿转代码过程中 ,重要但容易被忽视的环节 。
实际的业务代码中 icon 问题的解决方案 ,比如导出为 png, svg 格式的文件,在项目中作为静态资源直接引用 ,或者上传到 CDN 作为外链引用 。显然这些方案多少都存在着一些小问题:
1)在用户体验上 ,包括在高分辨率屏幕上显示模糊 、增加额外的 http 请求、异步加载造成页面抖动等;
2)在开发体验上,包括无法通过 CSS 控制样式以便和文本保持一致 、难以复用和更新等 。
对于团队而言 ,淘宝免费的 `iconfont` 网站无疑是快速的解决方案:上传 icon ——生成项目——一键下载 ,非常方便 。然而有几个问题阻碍了它成为企业级的解决方案:
1)一个是项目间无关联,相同 icon 无法复用和统一更新;
2)一个是无法强绑定企业账户 ,在团队协作和人员更迭交接时不可控;
3)最后一个是 icon 的版权问题 ,所有人都可以免费使用所有人上传到平台的 icon ,这可能不是公司所希望的。
2 、预期目标与解决方案(参考 转转FE 解决方案)
在平台上线之后 ,我们也面向 UI 团队和 FE 团队分别做了推广 ,明确了各方的职责 ,以更好地相互配合 。这样的工作流是十分清晰的:
1)UI 负责统一管理 icon 资源——把 icon 上传到平台 ,通过不同的“大库 ”区分业务线 ,形成 icon 池;
2)FE 只需关心自己的项目——从池中挑选 icon ,生成项目,导出外链 ,引入到项目中使用 。
icon:对上传的 svg 文件统一处理 ,保存完整的路径信息;
大库:和 icon 建立映射关系,对 icon 进行分组、编辑 、更新 ,主要面向 UI;
项目:也是和 icon 建立映射关系 ,面向 FE,挑选 icon 创建项目 ,负责生成外链 、下载图标等能力;
用户:对接企业微信扫码登录系统 ,负责角色和权限管理;
日志:记录图标的上传 、审核 、编辑;人员角色的变动;项目的更新等日志信息 ,使系统的所有操作可追溯;
svg2ttf:解析 svg 路径 ,转换成 ttf woff eot 等通用的字体文件 ,并打包上传到 CDN;
3 、项目实践落地 (反思本身 ,解决方案)
1)UI 负责统一管理 icon 资源——把 icon 上传到Iconfont平台 ,根据业务线形成 icon 池;
2)FE 负责 icon 代码资源统一——从池中挑选 icon ,生成项目 ,导出外链,引入到项目中使用。
在提高 UI 团队和 FE 团队的配合效率 、提高 iconfont 资源的可维护性和最终呈现的用户体验等环节 ,都有显著的成效 。
四 、Iconfont - 全新的彩色字体图标
彩色字体(colors fonts 或 chromatic fonts)是一种字体技术 ,它允许在每个字形中使用多种颜色 。它不仅可以用在图标和表情符号(emoji)的设计中,也可以用在普通的文本字体中。
彩色字体格式
目前支持彩色字体的格式主要有以下几种 ,它们都是 OpenType 规范的一部分:
SVG:由 Adobe 和 Mozilla 主导的矢量字体标准 ,全称是 OpenType SVG(以下简称 OT-SVG) 。其中不仅包含了标准的 TrueType 或 CFF 字形信息,还包含了可选的 SVG 数据 ,允许为字体定义颜色 、渐变甚至是动画效果 。SVG 标准中的配色信息也将存储在 CPAL 表中 。注意:Apple 的实现遵循 W3C 的 SVG Native 规范 ,这是 SVG 1.1 的子集 。
COLR/CPAL(version 0):由微软主导的矢量字体标准 。其中 COLR 记录图层数据 ,CPAL 记录配色信息 ,对其的支持集成在 Windows 8.1 及之后的版本中(该版本不支持渐变) 。
CBDT/CBLC:由 Google 主导的位图字体标准 。其中 CBDT 记录彩色位图数据 ,CBLC 记录位图定位数据 ,这其实是 EBDT/EBLC 的彩色版本 。
SBIX:由 Apple 主导的位图字体标准 ,也就是 Apple Emoji 使用的格式 。SBIX 即标准位图图像表其中包含了 PNG 、JPEG 或 TIFF 的图片信息 ,对其的支持集成在 macOS 和 iOS 中。
COLRv1 (version 1):由 Google 推动的基于 COLR/CPAL 表的升级版 ,支持渐变、仿射变换(Affine transformation)和多种混合模式 。目前已经进入了 OpenType 1.9 Alpha 规范中 。
*如何使用
1 、打开一个多色图标库,选择几个喜欢的图标加入购物车。
2 、点击右侧的购物车按钮 ,打开购物车浮层 。
3、在购物车浮层中 ,点击新建项目按钮,输入项目名称 ,然后点击确定按钮 。这样一个测试的彩色字体图标项目就建好了。
4 、然后会自动跳转到新建的项目 ,点击右上角的「项目设置」 。
5 、勾选字体格式中的「彩色」选项,点击「保存」按钮 。
6、点击「暂无代码 ,点此生成」 ,稍后片刻 ,彩色字体生成会稍慢 。
7 、生成成功后 ,在线链接按钮后面会多一个「预览字体」菜单 ,打开即可测试实际彩色字体的效果啦 。
设计因无限的想象力而伟大 ,而技术就是想象力翅膀 。展翅高飞 ,让我们一起来探索更多有趣的创意!
创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!