使用阿里巴巴矢量图库

piliqiu 收录于 Iconfon

2024-09-11 约 400 字预计阅读 2 分钟 - 次阅读

线上、线下加载的区别

有两种加载方式：下载到本地与在线引用两种方式。

差异

稳定性：下载到本地的图标文件存储在用户自己的服务器上，这意味着它们的稳定性依赖于用户自己的服务器。如果用户的服务器出现问题，那么图标可能无法正常显示。相比之下，在线引用的图标由阿里巴巴的服务器托管，通常可以提供更稳定的服务。
更新便捷性：在线引用的方式允许用户轻松更新图标库，因为图标文件是由阿里巴巴维护的。如果图标库有更新，用户只需重新引用新的链接即可。而下载到本地的文件需要手动更新，这在图标库频繁更新时可能会比较麻烦。
自定义程度：下载到本地的图标文件可以根据需要进行更多的自定义操作，比如修改颜色或者与其他图形结合。而在线引用的方式通常受到更多限制，因为用户只能通过 CSS 或者 HTML 来控制图标的显示。
加载性能：在线引用的图标是通过网络请求获取的，这可能会受到网络速度的影响，导致加载时间变长。而下载到本地的文件可以直接从用户的服务器加载，通常可以减少加载时间。

总的来说，下载到本地的方式更适合对图标有特殊定制需求、关注稳定性和加载性能的用户。而在线引用则适合那些希望快速开始项目、不需要频繁更新图标且依赖阿里巴巴稳定服务的用户。用户应根据自己的具体需求和使用场景来选择合适的方式。

比如我在小程序使用，最常用的是线上引入，因为小程序打包对主包是有要求的，图标包过大也不行
比如我在 app 使用，会下载到本地，当然也是按需加载的，
但是对于 pc 端，我最常用的是下载到本地，可以减少网络请求，加载速度快；而且放本地了，浏览器会缓存，第二次打开网页就会更快

三种引入的方式的区别

有三种引入方式：Unicode、Font-Class、Symbol 三种方式。

Unicode 引用：这种方式不支持多色图标，但可以像调整字体大小一样动态调整图标的大小和颜色。使用这种方法时，每个图标都有一个唯一的 Unicode 编码，可以在 HTML 中直接使用该编码来显示相应的图标。
Font-Class 引用：这是 Unicode 使用方式的一种变种，它通过为图标定义一个类名来使用。这种方式语义明确，易于识别和使用特定的图标。在 HTML 中，可以通过类名来引用图标，并通过 CSS 来控制其样式。
Symbol 引用：这是一种较新的使用方式，也是平台目前推荐的用法。Symbol 引用实际上是创建了一个 SVG 的集合，与前两种方法相比，它支持多色图标，并且具有更好的可定制性和灵活性。使用这种方式时，需要在 HTML 中引入 SVG 代码，并在 CSS 中进行相应的设置。

font-class 就是 unicode，没啥区别，unicode 的类名更语意话，下面详细说下 font-class 和 symbol 两种方式的区别

颜色支持：Font-Class 方法主要适用于单色图标，它通过 CSS 的 color 属性来设置图标的颜色，因此只能为整个图标设置一种颜色；而 Symbol 方法允许使用多色图标。因为它是基于 SVG 的，可以直接在 HTML 中嵌入 SVG 代码，每个图标可以有不同的颜色和样式。
兼容性：Font-Class 方法具有较好的浏览器兼容性，因为字体图标已经存在很长时间，几乎所有的现代浏览器都支持；Symbol 方法虽然也支持多色图标，但可能需要更多的考虑以确保在所有目标浏览器中的兼容性。
浏览器支持：Font-Class 作为字体图标，其加载通常与网页其他文字内容的加载方式相同，可能会受益于浏览器的文本渲染优化；Symbol 方法由于使用的是 SVG，在某些情况下可能需要额外的 HTTP 请求或者内联 SVG 代码到 HTML 中，这可能对性能有一定影响。

在实际项目中选择哪种方法取决于具体需求。如果项目需要多色图标并且不需要特别广泛的浏览器支持，Symbol 可能是更好的选择。如果只需要单色图标且希望最大程度的兼容性， Font-Class 则是一个不错的选择。

使用

Unicode

线上引入

创建 /iconfont/iconfont.css，把刚刚复制的 css 字体图标放上来

1
2
3
4
5
6
7


/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
@font-face {
  font-family: 'iconfont';  /* Project id 4680882 */
  src: url('//at.alicdn.com/t/c/font_4680882_8wx9toayb98.woff2?t=1726112664337') format('woff2'),
       url('//at.alicdn.com/t/c/font_4680882_8wx9toayb98.woff?t=1726112664337') format('woff'),
       url('//at.alicdn.com/t/c/font_4680882_8wx9toayb98.ttf?t=1726112664337') format('truetype');
}

记得在 /font/iconfont.css 里面加上下面的样式代码，不然字体不生效

1
2
3
4
5
6
7


.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

在 html 页面使用字体图标

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./font/iconfont.css">
</head>
<body>
    <!-- class="iconfont" 代表使用了字体样式 里面的内容就是刚刚复制的字体图标编码 -->
    <span class="iconfont">&#xe62f;</span><br>
    <i class="iconfont">&#xe62f;</i><br>
    <div class="iconfont">&#xe62f;</div>
</body>
</html>

提示

上面的字体图标是在线链接，如果项目中觉得链接太慢了之类的可以下载换成本地文件使用相对路径 ./ 进行引入，但是提醒一下，建议项目完成之后再去下载成本地字体文件，否则每次新增字体文件还要重新下载一次

本地引入

放入到项目中

/images/posts/使用阿里巴巴矢量图库/10.jpg — (`图10`)

在要使用的文件里或全局 main.js 中引入 iconfont.css 这个 css 文件

1

import '@/assets/iconfont/iconfont.css'

使用

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


@font-face {
  font-family: "iconfont";
  src: url('......') format('woff2'),
       url('......') format('woff'),
       url('......') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-ceshiban:before {
  content: "\e6bb";
}

1

<i class="iconfont icon-ceshiban"></i>

Font Class

线上引入

/images/posts/使用阿里巴巴矢量图库/11.jpg — (`图11`)

在 vue 项目中，index.htnl 入口文件里，引入这个线上链接

/images/posts/使用阿里巴巴矢量图库/12.jpg — (`图12`)

使用文字标签包裹，iconfont 是固定的，后面空格加你要引入图标的名称

1

<div><i class="iconfont icon-ceshiban"></i></div>

本地引入

/images/posts/使用阿里巴巴矢量图库/13.jpg — (`图13`)

下面的步骤和 Unicode 本地引入一样，将下载的文件解压后放入项目，在使用的文件或全局文件 main.js 中引入，在要使用的页面使用

symbol

本地引入

1.同 Unicode 引入，先下载资源到本地，解压后放置项目中
2.在项目中的 main.js (或者指定页面)文件中引入 iconfont 「注意：引入路径以自己的项目为准」

1

import './assets/fontIcon/myhaha/iconfont'

3.在项目中需要使用的地方应用即可，根据自己下载的图标名称引入，也可以在 iconfont.svg 修改图标名

1
2
3


<svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-gaosugonglu" />
</svg>