一键集成 iconfont & svg 图标iconfont 在前端工作流当中，实在是太弱了，忍不住搞一个工具来解决它，

吐槽

图标在前端体系中应用非常广泛，几乎每个应用都存在它的身影，目前用的比较多的图标方案大致有这么几种：

iconfont-阿里巴巴矢量图标库
iconify
@svgr/webpack
unocss presets icons
Svg 文件直接当做 img 渲染
使用 UI 库自带的图标，比如 @ant-design/icons
等等…

以上的方式如何使用这里不进行赘述，或多或少，都存在一些小小的问题，比如：

图标上传麻烦（iconfont.cn 审核更麻烦）
一定的上手成本，需要查看一定量的使用文档
直接引用 svg 文件，不直观，复用能力不足，无提示，作为图片使用修改颜色麻烦等
一种方案比较难同时输出字体 font 与 svg
不支持按需加载
与项目集成流程复杂
对图标的管理能力弱，增删改查麻烦
无法检测图标使用情况
团队变迁，项目转交麻烦
等等…

缺点挤了一堆，各种小小的问题都在说明着，iconfont 在前端工作流当中，实在是太弱了。

下面来介绍一个小工具，可以解决以上的小（大）部分问题：iconfont-spanner

介绍

iconfont-spanner 是一个本地图标管理工具，所有图标放在项目中，图标资源为 SVG 文件。

使用

安装 npm i -D iconfont-spanner 并添加配置文件在项目根目录,以下为简要配置：

module.exports = {
 // svg 放置目录
	resourceDir: "src/assets/svgs",
 	output: {
     	// 生成字体
		font: {
                 dir: "src/assets/font"
                 name: "iconfont"
     	},
	 	// 生成组件
	 	component: {...}
 	}
};

启动 npx iconfont-spanner，启动本地服务，在终端可进入管理页面

image 2.png

点击【添加】，支持选择 svg 与拖入文件夹

image 3.png

修改图标名称

image 4.png

image 5.png

删除图标

image 6.png

点击【扫描】查看图标使用情况，这将扫描项目代码，匹配图标名称

image 7.png

点击【转化】按钮生成字体文件或者 SVG 组件，两者可选其一也可同时生成。输出内容：
1. 字体 font
  1. css 文件传统用法，可参考 iconfont.cn
  2. Typescript 文件含有类型声明，可以根据该类型封装组件
  3. ttf,woff,woff2 字体文件（可配置）
2. 组件
  1. 一个 svg 对应一个组件，组件内容可自定义

image 8.png

image 9.png

优点

资源本地管理
本地预览，直观展示，可直接对图标进行更改
可扫描出图标的使用情况
与项目集成简单,设计师给到开发，一键集成
同时支持字体 font 与 svg 组件，svg 组件可达到按需加载的效果
针对字体 font 提供类型声明，图标名称也可校验

一键集成 iconfont & svg 图标

吐槽

介绍

使用

优点

项目地址