Iconfont使用的三种方式

最新推荐文章于 2025-05-12 09:42:57 发布

yuan溜溜

最新推荐文章于 2025-05-12 09:42:57 发布

阅读量1.5k

点赞数 4

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/YMX2020/article/details/106819866

本文详细介绍了阿里矢量图标库Iconfont的三种使用方式：Unicode引用、font-class引用和Symbol引用，每种方式的特点、兼容性和使用场景，并提供了代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

`Iconfont`使用的三种方式

作为一个前端开发，项目中用矢量图标是家常便饭，最近笔者项目中正好有使用，所以就抽空总结了一下阿里图标库的三种使用方法（笔者项目中用到的是Symbol 引用方式）

矢量图标库使用步骤如下：

首先需要登录阿里矢量图标库

阿里矢量图标库：https://www.iconfont.cn/

挑选你需要的矢量图标并加入购物车
- 点击步骤1把心仪的图标加入购物车
- 加入完毕后，点击步骤2
准备下载你选好的图标代码
- 点击步骤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">&#xe623;</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;