本文为Varlet组件库源码主题浏览系列第三篇，读完本篇，你能够理解到如何将svg图标转换成字体图标文件，以及如何设计一个简洁的Vue图标组件。

Varlet提供了一些罕用的图标，图标都来自 Material Design Icon。

转换SVG为字体图标

图标原文件是svg格局的，但最初是以字体图标的形式应用，所以须要进行一个转换操作。

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

打包命令为：

接下来具体看一下lib/index.js文件都做了哪些事件。

// lib/index.jsconst commander = require('commander')commander.command('build').description('Build varlet icons from svg').action(build)commander.parse()

应用命令行交互工具commander提供了一个build命令，处理函数是build：

// lib/index.jsconst webfont = require('webfont').defaultconst { 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.jsmodule.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"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" ><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="0" />    <missing-glyph horiz-adv-x="0" />    <glyph glyph-name="播放"      unicode="&#xE001;"      horiz-adv-x="150" d=" M110.2968703125 71.0175129375C113.2343765625 72.853453875 113.2343765625 77.131555125 110.2968703125 78.967497L63.4218703125 111.779997C60.2997703125 113.7313095 56.25 111.486733875 56.25 107.8050045L56.25 42.1800046875C56.25 38.49827625 60.2997703125 36.253700625 63.4218703125 38.205013125L110.2968703125 71.0175129375z" />    <glyph glyph-name="地址"      unicode="&#xE002;"      horiz-adv-x="150" d=" M0 150H150V0H0V150z M75 112.5C92.3295454375 112.5 106.25 98.9382045 106.25 83.119658125C106.25 58.529589375 83.238636375 42.758655625 75 37.5C66.7613636875 42.758655625 43.75 58.529589375 43.75 83.119658125C43.75 98.9382045 57.6704545625 112.5 75 112.5zM75 93.75C68.1250000625 93.75 62.5 88.1249999375 62.5 81.25C62.5 74.3750000625 68.1249999375 68.75 75 68.75C81.8749999375 68.75 87.5 74.3750000625 87.5 81.25C87.5 88.1249999375 81.8749999375 93.75 75 93.75z" />  </font></defs></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.jsconst { 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.jsconst 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.jsawait 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，反对字体图标也反对传入图片：

<var-icon name="checkbox-marked-circle" /><var-icon name="https://varlet-varletjs.vercel.app/cat.jpg" />

实现也很简略：

<template>  <component    :is="isURL(name) ? 'img' : 'i'"    :class="      classes(        n(),        [isURL(name), n('image'), `${namespace}-${nextName}`],      )    "    :src="isURL(name) ? nextName : null"  /></template>

通过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,  }}

反对设置图标大小：

<var-icon name="checkbox-marked-circle" :size="26"/>

如果是图片则设置宽高，否则设置字号：

<template>  <component    :style="{      width: isURL(name) ? toSizeUnit(size) : null,      height: isURL(name) ? toSizeUnit(size) : null,      fontSize: toSizeUnit(size),    }"  /></template>

反对设置色彩，当然只反对字体图标：

<var-icon name="checkbox-marked-circle" color="#2979ff" />
<template>  <component    :style="{      color,    }"  /></template>

反对图标切换动画，当设置了 transition(ms) 并通过图标的 name 切换图标时，能够触发切换动画：

<script setup>import { ref } from 'vue'const name = ref('information')const toggle = () => {  name.value = name.value === 'information'     ? 'checkbox-marked-circle'     : 'information'}</script><template>  <var-icon     :name="name"     :transition="300"     @click="toggle"  /></template>

具体的实现是监听name属性变动，而后增加一个扭转元素属性的css类名，具体到这里是增加了一个设置放大为0的类名--shrinking：

.var-icon {    &--shrinking {        transform: scale(0);    }}

而后通过css的transition设置过渡属性，这样就会以动画的形式放大为0，动画完结后再更新nextName为name属性的值，也就是变成新的图标，再把这个css类名去掉，则又会以动画的形式复原为原来大小。

<template>  <component    :class="      classes(        [shrinking, n('--shrinking')]      )    "    :style="{      transition: `transform ${toNumber(transition)}ms`,    }"  /></template>
const nextName: Ref<string | undefined> = ref('')const shrinking: Ref<boolean> = 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 })

图标组件的实现局部还是比较简单的，到这里图标局部的详解就完结了，咱们下一篇再见~