本文为Varlet组件库源码主题阅读系列第三篇，读完本篇，你可以了解到如何将svg图标转换成字体图标文件，以及如何设计一个简洁的Vue图标组件。
Varlet提供了一些常用的图标，图标都来自 Material Design Icon。
转换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' } = config
const { ttf, woff, woff2 } = await webfont({
files: `${SVG_DIR}/*.svg`,// 要转换的svg图标
fontName,// 字体名称，也就是css的font-family
formats: ['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字体呢，就是类似下面这样的：
每个单独的svg文件都会转换成上面的一个glyph元素，所以上面这段svg定义了一个名为geniconsfont的字体，包含两个字符图形，我们可以通过glyph上定义的Unicode码来使用该字形，详细了解svg字体请阅读SVG_fonts。
同一个Unicode在前端的html、css、js中使用的格式是有所不同的，在html/svg中，格式为&#dddd;或&#xhhhh;，&#代表后面是四位10进制数值，&#x代表后面是四位16进制数值；在css中，格式为\hhhh，以反斜杠开头；在js中，格式为\uhhhh，以\u开头。
转换成svg字体后再使用几个字体转换库分别转换成各种类型的字体文件即可。
到这里字体文件就生成好了，不过事情并没有结束。
// lib/index.js
const { writeFile, ensureDir, removeSync, readdirSync } = require('fs-extra')
const DIST_DIR = resolve(CWD, 'dist')// 打包的输出目录
const FONTS_DIR = resolve(DIST_DIR, 'fonts')// 输出的字体文件目录
const CSS_DIR = resolve(DIST_DIR, 'css')// 输出的css文件目录
// 先删除输出目录
removeSync(DIST_DIR)
// 创建输出目录
await Promise.all([ensureDir(FONTS_DIR), ensureDir(CSS_DIR)])清空上次的成果物，创建指定目录，继续：
// lib/index.js
const icons = readdirSync(SVG_DIR).map((svgName) => {
const i = svgName.indexOf('-')
const extIndex = svgName.lastIndexOf('.')
return {
name: svgName.slice(i + 1, extIndex),// 图标的名称
pointCode: svgName.slice(1, i),// 图标的代码
}
})
const iconNames = icons.map((iconName) => ` "${iconName.name}"`)读取svg文件目录，遍历所有svg文件，从文件名中取出图标名称和图标代码。svg文件的名称是有固定格式的：
uFxxx是图标的Unicode代码，后面的是图标名称，名称也就是我们最终使用时候的css类名，而这个Unicode实际上映射的就是字体中的某个图形，字体其实就是一个“编码-字形（glyph）”映射表，比如最终生成的css里的这个css类名：
.var-icon-checkbox-marked-circle::before {
content: "\F000";
}var-icon是命名空间，防止冲突，通过伪元素显示Unicode为F000的字符。
这个约定是svgicons2svgfont规定的：
如果我们不自定义图标的Unicode，那么会默认从E001开始，在Unicode中，E000-F8FF的区间没有定义字符，用于给我们自行使用private-use-area：
接下来就是生成css文件的内容了：
// lib/index.js
// commonjs格式：导出所有图标的css类名
const indexTemplate = `\
module.exports = [
${iconNames.join(',\n')}
]
`
// esm格式：导出所有图标的css类名
const indexESMTemplate = `\
export default [
${iconNames.join(',\n')}
]
`
// css文件的内容
const cssTemplate = `\
@font-face {
font-family: "${fontName}";
src: url("${
base64
? `data:application/font-woff2;charset=utf-8;base64,${Buffer.from(woff2).toString('base64')}`
: `${publicPath}${fileName}-webfont.woff2`
}") format("woff2"),
url("${
base64
? `data:application/font-woff;charset=utf-8;base64,${woff.toString('base64')}`
: `${publicPath}${fileName}-webfont.woff`
}") format("woff"),
url("${
base64
? `data:font/truetype;charset=utf-8;base64,${ttf.toString('base64')}`
: `${publicPath}${fileName}-webfont.ttf`
}") format("truetype");
font-weight: ${fontWeight};
font-style: ${fontStyle};
}
.${namespace}--set,
.${namespace}--set::before {
position: relative;
display: inline-block;
font: normal normal normal 14px/1 "${fontName}";
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
${icons
.map((icon) => {
return `.${namespace}-${icon.name}::before {
content: "\\${icon.pointCode}";
}`
})
.join('\n\n')}
`很简单，拼接生成导出js文件及css文件的内容，最后写入文件即可：
// lib/index.js
await Promise.all([
writeFile(resolve(FONTS_DIR, `${fileName}-webfont.ttf`), ttf),
writeFile(resolve(FONTS_DIR, `${fileName}-webfont.woff`), woff),
writeFile(resolve(FONTS_DIR, `${fileName}-webfont.woff2`), woff2),
writeFile(resolve(CSS_DIR, `${fileName}.css`), cssTemplate),
writeFile(resolve(CSS_DIR, `${fileName}.less`), cssTemplate),
writeFile(resolve(DIST_DIR, 'index.js'), indexTemplate),
writeFile(resolve(DIST_DIR, 'index.esm.js'), indexESMTemplate),
])
我们只要引入varlet-icons.css或less文件即可使用图标。
图标组件
字体图标可以在任何元素上面直接通过对应的类名使用，不过Varlet也提供了一个图标组件Icon，支持字体图标也支持传入图片：
实现也很简单：
通过component动态组件，根据传入的name属性判断是渲染img标签还是i标签，图片的话nextName就是图片url，否则nextName就是图标类名。
n方法用来拼接BEM风格的css类名，classes方法主要是用来支持三元表达式，所以上面的：
[isURL(name), n('image'), `${namespace}-${nextName}`]其实是个三元表达式，为什么不直接使用三元表达式呢，我也不知道，可能是更方便一点吧。
const { n, classes } = createNamespace('icon')
export function createNamespace(name: string) {
const namespace = `var-${name}`
// 返回BEM风格的类名
const createBEM = (suffix?: string): string => {
if (!suffix) return namespace
return suffix.startsWith('--') ? `${namespace}${suffix}` : `${namespace}__${suffix}`
}
// 处理css类数组
const classes = (...classes: Classes): any[] => {
return classes.map((className) => {
if (isArray(className)) {
const [condition, truthy, falsy = null] = className
return condition ? truthy : falsy
}
return className
})
}
return {
n: createBEM,
classes,
}
}支持设置图标大小：
如果是图片则设置宽高，否则设置字号：
支持设置颜色，当然只支持字体图标：
支持图标切换动画，当设置了 transition(ms) 并通过图标的 name 切换图标时，可以触发切换动画：
具体的实现是监听name属性变化，然后添加一个改变元素属性的css类名，具体到这里是添加了一个设置缩小为0的类名--shrinking：
.var-icon {
&--shrinking {
transform: scale(0);
}
}然后通过css的transition设置过渡属性，这样就会以动画的方式缩小为0，动画结束后再更新nextName为name属性的值，也就是变成新的图标，再把这个css类名去掉，则又会以动画的方式恢复为原来大小。
const nextName: Ref = ref('')
const shrinking: Ref = ref(false)
const handleNameChange = async (newName: string | undefined, oldName: string | undefined) => {
const { transition } = props
// 初始情况或没有传过渡时间则不没有动画
if (oldName == null || toNumber(transition) === 0) {
nextName.value = newName
return
}
// 添加缩小为0的css类名
shrinking.value = true
await nextTick()
// 缩小动画结束后去掉类名及更新icon
setTimeout(() => {
oldName != null && (nextName.value = newName)
// 恢复为原本大小
shrinking.value = false
}, toNumber(transition))
}
watch(() => props.name, handleNameChange, { immediate: true }) 图标组件的实现部分还是比较简单的，到这里图标部分的详解就结束了，我们下一篇再见~