阿里矢量图标Iconfont详细使用教程

最新推荐文章于 2025-06-18 17:09:56 发布

原创最新推荐文章于 2025-06-18 17:09:56 发布 · 1.9k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #阿里云

JavaScript 同时被 2 个专栏收录

6 篇文章

订阅专栏

React

3 篇文章

订阅专栏

Iconfont 是阿里巴巴推出的一个矢量图标管理平台，它允许设计师和开发者方便地使用、管理和分享图标资源。通过 Iconfont，用户可以将图标当作字体来使用，从而轻松地在网页或应用程序中添加高质量的图标。

官网地址：iconfont

一、主要特点：

丰富的图标库：提供了大量来自不同设计者的图标集合，涵盖了各种主题和用途。
易于集成：支持多种格式（如 SVG、TTF、WOFF 等）和多种技术栈（如 CSS, HTML, React 等），使图标易于集成到项目中。
团队协作：支持创建团队项目，团队成员可以共享和协作编辑图标集。
个性化定制：用户可以根据自己的需求调整图标的颜色、大小等属性，还可以自定义图标字体。
API 支持：提供 API 接口，便于开发者进行自动化集成和管理。

二、前期准备

（1）首先在官网注册登录

（2）搜索自己想要的图标，加入购物车

（3）将购物车的图标添加到项目中

（4）点击生成三种使用方式的代码链接

三、使用方式一（最简单直接的方式）：

此种方式适合用在图标引用特别少，以后也不需要特别维护的场景。

比如设计师用来做demo原型。
前端临时做个活动页。
当然如果你只是为了下载图标做PPT,也是极好的。

单个图标用户可以自行选择下载不同的格式使用，包括 png、ai、svg。点击下载按钮，可以选择下载图标。

四、使用方式二（unicode引用）：

unicode 是字体在网页端最原始的应用方式，特点是：

兼容性最好，支持 IE6+，及所有现代浏览器。
支持按字体的方式去动态调整图标大小，颜色等等。

注意：新版iconfont支持彩色字体图标，兼容所有现代浏览器。详见：iconfont-阿里巴巴矢量图标库

unicode使用步骤如下：

1.拷贝项目下面生成的font-face

@font-face {font-family: 'iconfont';
    src: url('iconfont.eot');
    src: url('iconfont.eot?#iefix') format('embedded-opentype'),
    url('iconfont.woff') format('woff'),
    url('iconfont.ttf') format('truetype'),
    url('iconfont.svg#iconfont') format('svg');
}

2.定义使用iconfont的样式（全局）

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

3.挑选相应图标并获取字体编码，应用于页面

<i class="iconfont">&#x33;</i>

五、使用方式三（font-class 引用）：

font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。

与unicode使用方式相比，具有如下特点：

兼容性良好，支持ie8+，及所有现代浏览器。
相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。
因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。
不过因为本质上还是使用的字体，所以多色图标还是不支持的。

使用步骤如下：

1.将官网生成的链接放入 `index.html` 中的 `<head>`：

<link rel="stylesheet" href="//at.alicdn.com/t/font_1234567_abcd1234.css" />

2.在组件中使用图标类名

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

六、使用方式四（symbol 引用）：

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章这种用法其实是做了一个svg的集合，与上面两种相比具有如下特点：

支持多色图标了，不再受单色限制。
通过一些技巧，支持像字体那样，通过font-size,color来调整样式。
兼容性较差，支持 ie9+,及现代浏览器。
浏览器渲染svg的性能一般，还不如png。

1.同方式三先引入链接例如at.alicdn.com/t/font_8d5l8fzk5b87iudi.js 在index.html

2.加入通用css代码（引入一次就行）也在index.html：

<style type="text/css">
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
</style>

3.自定义 React 组件 Icon.tsx

//位置建议： src/components/Icon.tsx
import React from 'react';

interface IconProps {
  name: string;
  size?: number;
  color?: string;
  className?: string;
}

const Icon: React.FC<IconProps> = ({ name, size = 16, color = '#000', className = '' }) => {
  return (
    <svg className={`icon ${className}`} style={{ width: size, height: size, fill: color }} aria-hidden="true">
      <use xlinkHref={`#icon-${name}`} />
    </svg>
  );
};

export default Icon;

4. 使用组件

import Icon from '@/components/Icon';

<Icon name="home" size={20} color="#1890ff" />

注意：封装组件已经拼上#icon

七、使用方式五（使用 iconfont 的 React 组件方案）：

在项目页面里下载 ZIP 包

解压后复制 iconfont.js 到 src/assets 目录

封装使用：

import React from 'react';
import './iconfont'; // 引入 iconfont.js

const IconFont = ({ type, ...rest }: { type: string } & React.SVGProps<SVGSVGElement>) => (
  <svg {...rest} className="icon" aria-hidden="true">
    <use xlinkHref={`#icon-${type}`} />
  </svg>
);

export default IconFont;

或者这样封装

import { createFromIconfontCN } from '@ant-design/icons';

interface IconProps {
  type: 'operationControl' | 'riskAssess' | 'stateEvaluation' | 'dianbiao' | 'download' | 'palette' | 'language';
  style?: React.CSSProperties;
}

const IconFont = (props: IconProps) => {
  const IconFont = createFromIconfontCN({
    scriptUrl: './iconfont.js',
  });

  return <IconFont type={props.type} style={props.style} />;
};

export default IconFont;

<IconFont type="home" style={{ width: 20, height: 20 }} />

八、总结

推荐后三种方式：

方法	适用情况	特点
Font Class	简单项目或新手推荐	使用 `className` 即可
Symbol 模式	推荐在业务项目中使用	SVG 矢量更清晰，样式可控强
React 模式	使用 React 的代码组件调用	最干净的方式，适合组件库开发