介绍

svg2font, 根据 svg 生成字体图标库，可以内置在项目中的脚手架工具

使用

1、安装

# 安装依赖
npm install @tenado/svg2font -D

或

yarn add @tenado/svg2font -D

2、初始化

执行如下命令，会在项目目录下生成一个svg2font.config.js文件，里面记录了脚本执行时候需要的配置

npx svg2font init

3、配置 svg2font.config.js

| 参数 | 说明 | 默认值 | 是否可选 | | ----------- | ---------------------------------------------------------------------- | ---------- | -------- | | inputPath | svg 文件夹路径 | ~ | 必填 | | outputPath | 生成字体文件存放位置 | ~ | 必填 | | fontFamily | 字体的名称 | tenadoIcon | 可选 | | fontPrefix | 字体的前缀 | ticon- | 可选 | | ejs | 生成 icon 列表页面的模板，默认使用系统的，如果需要自定义，则设置该选项 | ~ | 可选 | | examplePath | 生成静态文件存放的位置，位置应与 outputPath 在同一目录下 | ~ | 可选 | | examplePort | 查看静态文件的端口 | ~ | 可选 | | exampleRun | 是否启动 example 的静态页面 | true | 可选 |

svg2font.config.js 的默认配置如下：

{
  "inputPath": "src/assets/svgs",
  "outputPath": "src/assets/font",
  "fontFamily": "tenadoIcon",
  "fontPrefix": "ticon-"
}

4、转换 svg 成字体文件

npx svg2font sync

5、项目 main 文件中引入字体文件 css

// src/main.js
import "./src/assets/font/index.min.css";

6、在项目中使用字体图标

使用 i 或者 span 标签，且把 svg 名称作为类名，例如<span class="ticon-color-pick"></span>

7、查看当前项目的 icon 列表

更改配置文件 svg2font.config.js，向里面加入 examplePath 和 examplePort，这里注意 examplePath 应尽量与 outputPath 在同一目录下

npx svg2font example