制作自己的iconfont文件

### 创建自定义 IconFont 文件教程

#### 准备工作
为了创建自定义的 IconFont 文件，首先需要准备所需的矢量图形文件 (SVG 格式)[^5]。这些可以是来自 Iconfont-阿里巴巴矢量图标库下载的 SVG 图标，或者是自行设计并转换成 SVG 格式的图像。

#### 使用在线平台生成字体
一种简便的方法是在线利用工具如 Iconfont 来创建自定义图标集。上传准备好的 SVG 文件到平台上，在该网站上完成图标的管理与编辑之后，可以通过 `@font-face` 嵌入网页中使用[^1]。

#### 利用 Gulp 插件自动化流程
对于更复杂的项目需求，则可能需要用到像 gulp-iconfont 这样的构建工具来自动处理从多个 SVG 文件创建字体的过程。安装此 npm 包后配置相应的 task 可实现批量生产化作业[^4]：

const gulp = require('gulp');
const iconfont = require('gulp-iconfont');

gulp.task('icons', function () {
    return gulp.src('./src/icons/*.svg') // 输入路径
        .pipe(iconfont({
            fontName: 'my-icons',
            formats: ['ttf', 'eot', 'woff', 'svg'],
            normalize: true,
            fontHeight: 1001
        }))
        .on('glyphs', function(glyphs, options) { /* ... */ })
        .pipe(gulp.dest('./dist/fonts')); // 输出目录
});

#### 集成至前端框架
当涉及到集成到特定的设计体系比如 Ant Design 中时，可通过调整组件库提供的 API 参数轻松引入外部资源。例如设置 `createFromIconfontCN` 方法里的 `scriptUrl` 属性指向自己的 CDN 地址即可加载私有化的图标集合[^2]。