0
0

Vue 中 iconfont 使用

图标库的发展过程，iconfont图标库的重要性（项目常用）

对于前端而言，图标的发展可谓日新月异。从img标签，到雪碧图，再到字体图标，svg，甚至svg也有了类似于雪碧图的方案svg-sprite-loader。在项目实践中，bootstrap，font-awesome，element-ui等UI库都基本标配了字体图标。

一、Iconfont - 图标管理工具

阿里巴巴旗下阿里妈妈MUX团队打造的图标管理平台。

这是一个专门为设计师和前端开发者打造的在线工具。设计师将图标上传到 Iconfont，可以自定义下载多种格式的icon，也可将图标转换为字体，方便前端工程师自由调整与使用。

通过这个免费的工具，设计师不仅可以浏览下载大量优秀设计师的图标作品，还可以管理和展示自己设计的图标。已经成为很多UI设计师和前端开发者日常工作的必备工具。

大量优质的原创图标库

特点

  1. 矢量图标在线存储管理。
  2. 设计师绘制的大量图标都可以上传，解决了管理和查找图标非常困难的痛点；
  3. 按项目管理图标，支持自定义尺寸和颜色，无论是前端工程师还是UI设计师，再也不用苦逼地切图搬砖了，需要什么尺寸，可以在平台上自行下载；
  4. 对于开发者来说，可以把需要的矢量图标以项目的方式管理，一键生成在web上通过css字体控制的矢量图标，支持在web/h5/小程序/App上调用，使用简单便捷，再也不需要用模糊的图片图标了；
  5. 对于设计师来说，平台上有上千上万设计师分享自己设计的图标，绝对是图标设计学习和灵感的利器。

二、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">&#xe7ee;</i>        
        <i class="iconfont">&#xe7ed;</i>        
        <i class="iconfont">&#xe7ec;</i>        
        <i class="iconfont">&#xe7eb;</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;}
复制代码
  1. 使用方式

与在线引用方式是一样的，都是使用unicode码去展示图标。

<template><i class="iconfont">&#xe7ee;</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.vue'Vue.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、生成成功后，在线链接按钮后面会多一个「预览字体」菜单，打开即可测试实际彩色字体的效果啦。

设计因无限的想象力而伟大，而技术就是想象力翅膀。展翅高飞，让我们一起来探索更多有趣的创意！

标签： vue.js 前端 ui
本文转载自: https://blog.csdn.net/sinat_17775997/article/details/127344128
版权归原作者 barnett_y 所有， 如有侵权，请联系我们删除。
登录后发布评论

“Vue 中 iconfont 使用”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航