转换SVG为字体图标
图标原文件是svg
格式的,但最后是以字体图标的方式使用,所以需要进行一个转换操作。
处理图标的是一个单独的包,目录为/packages/varlet-icons/
,提供了可执行文件:
![](https://i-blog.csdnimg.cn/blog_migrate/3398f81d10f0b8f87541a403fcab60db.png)
打包命令为:
![](https://i-blog.csdnimg.cn/blog_migrate/752c60aded0ca091afdcc91605eda9a6.png)
接下来详细看一下lib/index.js
文件都做了哪些事情。
// lib/index.js
const commander = require('commander')
commander.command('build').description('Build varlet icons from svg').action(build)
commander.parse()
使用命令行交互工具commander提供了一个build
命令,处理函数是build
:
// lib/index.js
const webfont = require('webfont').default
const { resolve } = require('path')
const CWD = process.cwd()
const SVG_DIR = resolve(CWD, 'svg')// svg图标目录
const config = require(resolve(CWD, 'varlet-icons.config.js'))// 配置文件
async function build() {// 从配置文件里取出相关配置const { base64, publicPath, namespace, fontName, fileName, fontWeight = 'normal', fontStyle = 'normal' } = configconst { ttf, woff, woff2 } = await webfont({files: `${SVG_DIR}/*.svg`,// 要转换的svg图标fontName,// 字体名称,也就是css的font-familyformats: ['ttf', 'woff', 'woff2'],// 要生成的字体图标类型fontHeight: 512,// 输出的字体高度(默认为最高输入图标的高度)descent: 64,// 修复字体的baseline})
}
varlet-icons
的配置如下:
// varlet-icons.config.js
module.exports = {namespace: 'var-icon',// css类名的命名空间fileName: 'varlet-icons',// 生成的文件名fontName: 'varlet-icons',// 字体名base64: true,
}
核心就是使用webfont包将多个svg
文件转换成字体文件,webfont
的工作原理可以通过其文档上的依赖描述大致看出:
![](https://i-blog.csdnimg.cn/blog_migrate/1bd65981e6d73b34c6d2c89e8e958b1a.png)
使用svgicons2svgfont包将多个svg
文件转换成一个svg
字体文件,何为svg
字体呢,就是类似下面这样的:
<?xml version="1.0" standalone="no"?>
<<img src="http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" " style="margin: auto" />
<svg xmlns="http://www.w3.org/2000/svg">
<defs><font id="geniconsfont" horiz-adv-x="24"><font-face font-family="geniconsfont"units-per-em="150" ascent="150"descent&#