想要字体图标设计师却给了SVG？没关系，自己转

最新推荐文章于 2024-05-26 09:38:55 发布

蚂蚁二娘

最新推荐文章于 2024-05-26 09:38:55 发布

阅读量207

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/web2022050901/article/details/128286722

版权

本文介绍了如何将SVG图标转换为字体图标，包括使用特定工具进行转换的过程，以及生成后的字体文件在前端不同场景下的应用。同时，文章还提到了一个自定义的图标组件Icon，支持字体图标和图片，并详述了其实现细节。最后，作者分享了一份JavaScript与ES的笔记供读者领取。

摘要由CSDN通过智能技术生成

转换SVG为字体图标

图标原文件是svg格式的，但最后是以字体图标的方式使用，所以需要进行一个转换操作。

处理图标的是一个单独的包，目录为/packages/varlet-icons/，提供了可执行文件：

打包命令为：

接下来详细看一下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的工作原理可以通过其文档上的依赖描述大致看出：

使用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&#