Vue 中 iconfont 使用

news2024/11/19 19:43:00

图标库的发展过程，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;}
复制代码

3) 使用方式

与在线引用方式是一样的，都是使用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、生成成功后，在线链接按钮后面会多一个「预览字体」菜单，打开即可测试实际彩色字体的效果啦。

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/409116.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

npm run 是什么？为什么使用npm run 这一命令，就能够将 webpack 跑起来并进行下一步的操作？

npm run 是什么？为什么使用npm run 这一命令，就能够将 webpack 跑起来并进行下一步的操作？

npm run 实际上是衔接 node 和 webpack 的连接点。先看看终端运行的npm是什么，如下图： 图中的关键点是最后一行 C:\Users\***\AppData\Roaming\npm\node_modules\npm。从它可以推断出系统环境变量下配置的npm的路径为C:\Users\***\AppData\Roaming\npm，可以去环境变量中确认…
阅读更多...
css实现炫酷充电动画

css实现炫酷充电动画

先绘制一个电池&#xff0c;电池头部和电池的身体 这里其实就是两个div&#xff0c;使用z-index改变层级&#xff0c;电池的身体盖住头部&#xff0c;圆角使用border-radius完成 html部分,完整的css部分在最后 <div class"chargerBox"><div class"ch…
阅读更多...
Vue ref获取元素和组件实例

Vue ref获取元素和组件实例

获取元素 获取元素还不简单&#xff1f;直接document.querySelector(“#id”)不就获取到了吗&#xff1f;例如下面的代码。在写Vue的过程中&#xff0c;我们从来不会写这种代码&#xff0c;但是下面的代码在vue里面是可以运行的。 methods:{getEl(){let title document.queryS…
阅读更多...
CSS实现: 水平居中 的几种方法

CSS实现: 水平居中 的几种方法

实现方法&#xff1a; 1、添加 margin 值 auto 2、定位 position(子绝父相) 偏移值 left margin-left 回退 [ 需要计算&#xff0c;有点 麻烦 ] 3、定位 position(子绝父相) 偏移值 left CSS-2d transform 4、文字居中 text-align:center; 行内块元素 5、弹性盒子布局 [ 推…
阅读更多...
vue之@click绑定的函数，如何实现加不加括号都可执行

vue之@click绑定的函数，如何实现加不加括号都可执行

这篇文章的由来&#xff0c;其实是朋友在群里好奇click绑定方式的种类&#xff0c;大家七嘴八舌讨论出来的&#xff0c;觉得过程还是比较有意义&#xff0c;就记录下来&#xff1a; 1、原生js绑定点击事件 好久不用原生js绑定事件&#xff0c;基本都已经忘了怎么绑定。还把括号…
阅读更多...
es6的some和every方法使用；

es6的some和every方法使用；

文章略长&#xff0c;但比较简单。 es6中的数组方法some()和every()都接收一个回调函数作为参数&#xff0c;该回调函数又接收三个参数&#xff0c;分别是数组元素、数组元素的索引、调用some或every方法的数组本身。它们的区别就是&#xff1a; some方法用于判断数组中是否存…
阅读更多...
node-sass安装报错及其解决方案

node-sass安装报错及其解决方案

一、下载依赖报错 这里报错了也就没后面的剧情了&#xff0c;就像电视剧刚开局主角就嗝屁了&#xff0c;看看执行 npm i 的时候报错类容&#xff1a; 二、解决方案 1、下载源在国外&#xff0c;更换中国镜像源&#xff0c;删除package.json中的node-sass,分别下载node包和node-…
阅读更多...
你的应用太慢了，给我司带来了巨额损失，该怎么办

你的应用太慢了，给我司带来了巨额损失，该怎么办

记得很久之前看过谷歌官方有这么样的声明&#xff1a;如果一个页面的加载时间从 1 秒增加到3 秒&#xff0c;那么用户跳出的概率将增加 32%。 但是早在 2012 年&#xff0c;亚马逊就计算出了&#xff0c;页面加载速度一旦下降一秒钟&#xff0c;每年就会损失 16 亿美元的销售额…
阅读更多...
〖大前端 - 基础入门三大核心之CSS篇⑳〗- 2D变形

〖大前端 - 基础入门三大核心之CSS篇⑳〗- 2D变形

说明&#xff1a;该文属于 大前端全栈架构白宝书专栏&#xff0c;目前阶段免费开放&#xff0c;购买任意白宝书体系化专栏可加入TFS-CLUB 私域社区。福利&#xff1a;除了通过订阅"白宝书系列专栏"加入社区获取所有付费专栏的内容之外&#xff0c;还可以通过加入星荐…
阅读更多...
HTML 基本开发方式，学会常用的 HTML 标签

HTML 基本开发方式，学会常用的 HTML 标签

一、HTML 基本开发方式 1、如何编写 HTML 代码 本身的语法比较简单&#xff0c;语法风格和 Java 之类的差别很大&#xff0c;(并不能表达一些逻辑&#xff0c;而只是能表达 “有哪些东西" 一种信息)&#xff0c;使用记事本创建一个文件&#xff0c;后缀名改成 .html 即可…
阅读更多...
Vue报错：Error in v-on handler: “TypeError: Cannot read properties of undefined (reading ‘skuId‘)“

Vue报错：Error in v-on handler: “TypeError: Cannot read properties of undefined (reading ‘skuId‘)“

背景: 当点击按钮时候&#xff0c;正常情况控制台的Network应该要发送一个变化量&#xff0c;现在控制台的Network不仅不显示&#xff0c;而且还报错&#xff0c;报错信息如下&#xff1a; vue.runtime.esm.js?c320:619 [Vue warn]: Error in v-on handler: "TypeError: …
阅读更多...
【React全家桶】Flux与Redux

【React全家桶】Flux与Redux

&#x1f39e;️&#x1f39e;️&#x1f39e;️ 博主主页&#xff1a; 糖 &#xff0d;O&#xff0d; &#x1f449;&#x1f449;&#x1f449; react专栏&#xff1a;react全家桶 &#x1f339;&#x1f339;&#x1f339;希望各位博主多多支持&#xff01;&#xff01;&a…
阅读更多...
Vue3.0 项目启动（打造企业级音乐App）

Vue3.0 项目启动（打造企业级音乐App）

系列文章目录 内容参考链接Vue3.0 项目启动Vue3.0 项目启动&#xff08;打造企业级音乐App&#xff09;Vue3.0项目——打造企业级音乐App&#xff08;一&#xff09;Tab栏、轮播图、歌单列表、滚动组件Vue3.0项目——打造企业级音乐App&#xff08;二&#xff09;图片懒加载、…
阅读更多...
功能：Session与Vue：登录获取权限，并完成session存储

功能：Session与Vue：登录获取权限，并完成session存储

一、需求说明 1、系统登录&#xff0c;每个账号表示一位用户&#xff0c;每位用户分配有不同的权限&#xff0c;不同的权限有着不同的操作。 2、现需要每位用户登录时都能获取到对应的权限&#xff0c;在登录系统中进行使用&#xff0c;退出时则清空权限。 3、项目框架&#x…
阅读更多...
一个非常好看的前端Vue3登录页面

一个非常好看的前端Vue3登录页面

Vue3lessElement Plus <template> <div id"login"><div id"contain"><div id"left_card"><h1>欢迎来到我的Vue3大世界</h1><span>Welcome to my Vue3 world</span></div><div id&quo…
阅读更多...
HTML学习笔记 1-用HBuilderX写的HTML无法在浏览器上运行怎么办？问题出在这里：HBuilderX外部web服务支撑配置

HTML学习笔记 1-用HBuilderX写的HTML无法在浏览器上运行怎么办？问题出在这里：HBuilderX外部web服务支撑配置

初学HTML的时候&#xff0c;用的是HBuilderX开发软件 写了一段简单的代码 <!DOCTYPE html> <html><head><meta charset"UTF-8"><title>这是网页的标题</title></head><body><p>这里是网页的内容</p>&l…
阅读更多...
解决Vue报错：Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location

解决Vue报错：Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location

问题描述&#xff1a;重复点击导航时&#xff0c;控制台出现报错 &#xff0c;虽然不影响功能使用&#xff0c;但也不能坐视不管。解决 Vue 重复点击相同路由&#xff0c;出现 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation 问题 .报错内容&#…
阅读更多...
Nginx部署前端静态网站详细教学（一步步操作）

Nginx部署前端静态网站详细教学（一步步操作）

前言 从零开始使用Xshell、Xftp、Nginx 简单部署静态网站&#xff0c;需准备云服务器(阿里云、腾讯云、华为云等都可) 一.下载安装Xshell和Xftp XShell 用于命令行操作服务器&#xff0c;Xftp 用于对服务器的文件上传和下载 官方下载地址&#xff1a;NetSarang Homepage CN - …
阅读更多...
你评论，我赠书~【哈士奇赠书 - 16期】〖Vue.js 快速入门实战〗等你来拿

你评论，我赠书~【哈士奇赠书 - 16期】〖Vue.js 快速入门实战〗等你来拿

推荐&#xff1a; Python全栈白宝书专栏&#xff0c;免费阶段订阅数量4300&#xff0c;购买任意白宝书体系化专栏可加入TFS-CLUB 私域社区。福利&#xff1a;加入社区的小伙伴们&#xff0c;除了可以获取博主所有付费专栏的阅读权限之外&#xff0c;还有机会加入 星荐官共赢计划…
阅读更多...
html网页调用后端python代码方法

html网页调用后端python代码方法

当我们利用html代码制作网页时&#xff0c;可以用以下方法进行python代码的调用&#xff1a; 1.简单的python代码例如输出‘hello world’时,可以选择直接在网页写入python代码的方式调用&#xff0c;这时候我们就需要了解Pyscript了。以下是在网页里直接运行简易python语段的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023