1.0.11 • Published 6 months ago
@tenado/svg2font v1.0.11
介绍
svg2font, 根据 svg 生成字体图标库，可以内置在项目中的脚手架工具
使用
1、安装
# 安装依赖
npm install @tenado/svg2font -D
或
yarn add @tenado/svg2font -D2、初始化
执行如下命令，会在项目目录下生成一个svg2font.config.js文件，里面记录了脚本执行时候需要的配置
npx svg2font init3、配置 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 sync5、项目 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