Iconfont使用的三种方式
程序员文章站
2022-05-07 20:11:14
...
Iconfont使用的三种方式
作为一个前端开发，项目中用矢量图标是家常便饭，最近笔者项目中正好有使用，所以就抽空总结了一下阿里图标库的三种使用方法（笔者项目中用到的是Symbol 引用方式）
矢量图标库使用步骤如下：
- 首先需要登录阿里矢量图标库
阿里矢量图标库：https://www.iconfont.cn/
-
挑选你需要的矢量图标并加入购物车
- 点击步骤1把心仪的图标加入购物车
- 加入完毕后，点击步骤2
-
准备下载你选好的图标代码
- 点击步骤3所示的下载代码按钮，把你选好的图标的实现代码下载到项目本地
- 点击步骤3所示的下载代码按钮，把你选好的图标的实现代码下载到项目本地
-
在自己的项目中引入第三步下载好的图标代码文件（
iconfont文件）,然后创建一个html和css文件
具体三种使用方式如下：
-
Unicode引用方式（主要依赖下载下来的iconfont文件里面的iconfont.css文件）
- 兼容性最好，支持 IE6+，及所有现代浏览器。
- 支持按字体的方式去动态调整图标大小，颜色等等。
- 但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。
// html.index
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Iconfont</title>
<link rel="stylesheet" type="text/css" href="./iconfont/iconfont.css">
<style>
.self-style {
color: aquamarine;
}
</style>
</head>
<body>
<div>Iconfont</div>
<i class="iconfont self-style"></i>
</body>
</html>
// index.css
//项目下面生成
@font-face {
font-family: 'iconfont';
src: url('iconfont.eot');
src: url('iconfont.eot?#iefix') format('embedded-opentype'),
url('iconfont.woff2') format('woff2'),
url('iconfont.woff') format('woff'),
url('iconfont.ttf') format('truetype'),
url('iconfont.svg#iconfont') format('svg');
}
//项目下面生成
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
效果图如下：
-
font-class引用（主要依赖下载下来的iconfont文件里面的iconfont.css文件）
- 兼容性良好，支持 IE8+，及所有现代浏览器。
- 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
- 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
- 不过因为本质上还是使用的字体，所以多色图标还是不支持的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Iconfont</title>
<link rel="stylesheet" href="./iconfont/iconfont.css">
<style>
.self-style2 {
// 可以设置颜色
color: pink;
// 可以设置大小
font-size: 40px;
}
</style>
</head>
<body>
<div>Iconfont</div>
<span class="iconfont self-style2 icon-lvzhi1"></span>
</body>
</html>
效果图如下：
-
Symbol引用（主要依赖下载下来的iconfont文件里面的iconfont.js文件）symbol是一种全新的使用方式，是未来的主流，推荐使用
- 支持多色图标了，不再受单色限制。
- 通过一些技巧，支持像字体那样，通过
font-size,color来调整样式。 - 兼容性较差，支持 IE9+，及现代浏览器。
- 浏览器渲染 SVG 的性能一般，还不如 png。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Iconfont</title>
<style>
.icon-style {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
<script src="./iconfont/iconfont.js"></script>
</head>
<body>
<div>Iconfont</div>
// 其中aria-hidden="true"这个属性由语义理解是影藏，所以个人理解是，当只有一个图标而没有其他额外说明的时候，自动忽略这个Icon，避免由图标引起的不必要的误导
<svg class="icon-style" aria-hidden="true">
<use xlink:href="#icon-lvzhi3"></use>
</svg>
</body>
</html>
效果图如下：
4.结合react和antd的Icon，自定义组件用symbol的方式使用iconfont
antd的自定义icon,版本3.xx的用法如下图（4.xx版本自行查阅官网，用法大同小异）：
项目中代码如下：
- 首先自定义一个
SelfIcon组件
// 定义组件SelfIcon
import { Icon } from 'antd';
const SelfIcon = Icon.createFromIconfontCN({
// 特别要注意的是这个scriptUrl是项目在线生成的js地址，是build文件里面的iconfont路径
scriptUrl: './iconfont.js',
extraCommonProps: {
// 这里可以去定义这个icon的大小等样式
style: {
fontSize: '2em',
},
},
});
export default SelfIcon;
- 在页面中使用定义好的自定义
SelfIcon组件
// 使用
import SelfIcon from '@/components/SelfIcon';
import React, { Component } from 'react';
class Index extends Component {
render() {
return (
// 注意与传统的symbol不同的是，拷贝的时候不要加上最前面的#号
// 比如这个icon图标symbol的表示代码是：#icon-lvzhi3
// 使用的时候type=“icon-lvzhi3”即可
<SelfIcon type="icon-lvzhi3" />
);
}
}
export default Index;
效果图如下：