封装自己的web字体图标库
1. 字体图标简介
1.1 什么是字体图标
所谓字体图标指的是一种使用字体的编码规则来编码的图形，因此从本质上看其实与其叫做 字体图标还不如叫做 图标字体。图标字体是使用微小图形而不是字母形式的字体。与字符一样，每个图标可以使用 CSS 进行修改大小（font-size）、颜色（color）等等样式。
1.2 字体图的特点
| 特点 | 描述 |
| 灵活 | Web 已针对显示文本进行了优化。轻松更改图标的颜色或应用其他 CSS 效果。Unicode 中有明确的图标和表情符号定义。字体一直是用来表示字母和图标的 |
| 可扩展 | 使用图标字体，更改图标的大小就像更改字体大小一样简单 |
| 矢量 | 字体图标与矢量和分辨率无关。它们在移动和桌面设备上的高和低 PPI 显示器上看起来都不错 |
| 迅速 | 通过将图标设置为字体，您可以使用一个 HTTP 请求加载它们 |
| 无障碍 | 如果操作正确，图标字体可以 100% 访问并与屏幕阅读器兼容 |
| 本地使用 | 通过在您的系统上安装定制的 TTF 字体，您可以在各种不同的设计和编辑应用程序中使用它们 |
2. 绘制或下载矢量图标素材
要制作自己的图标库那么先得有自己的素材。我们的原始素材是SVG格式的矢量图片，它是一种基于基于 XML、由World Wide Web Consortium（W3C）联盟进行开发的矢量图形格式，严格来说应该是一种开放标准的矢量图形语言。能够绘制 SVG 图片的软件有许多
2.1 制合规的作svg图标
2.1.1 使用 Adobe Illustrator 制作
这里介绍使用 Adobe Illustrator 软件来绘制图标矢量文件的流程。
安装打开Adobe Illustrator后
依次点击 对象>轮廓化描边
2.1.2 使用 Inkscape 制作
2.1.2.1 安装软件
Inkscape是一款自由及开源的矢量图形编辑软件，其功能与Illustrator、Freehand、CorelDraw、Xara X等其他软件相似。与Adobe Illustrator不同的是，可以在Inkscape官网免费下载该软件：https://inkscape.org/
点击官网 DOWNLOAD 下的 Current Version：
根据你的系统类型下载相应的版本即可。
2.1.2.2 绘制图形
安装完成后启动该软件，新建文件，使用左侧工具栏中的各种工具，绘制你的SVG矢量图形：
绘制后可以通过 编辑 > 设置为页面选取大小 调整为绘制区域的大小：
2.1.2.2 临摹轮廓
临摹轮廓是一个及其强大的功能，它能使得位图矢量化，如果不适用此功能，之后你的svg图标无法被转换成字体。这和上文中使用 点击Adobe Illustrator 中的 对象>轮廓化描边功能类似。更多关于该功能的介绍推荐阅读博文：inkscape：临摹位图轮廓：https://blog.csdn.net/ouening/article/details/90221773
完成后将其保存以待使用。
2.1.3 使用 microsoft Visio 制作
microsoft Visio 是一款强大的绘图工具，使用它绘制的平面图形多数是可以通过导出 SVG 格式，但是需要通过 Adobe Illustrator 或者 Inkscape 的 轮廓化描边或者 临摹轮廓功能进行处理。
对于很多简单的线性图标，我会选择使用 Microstft Visio 先绘制出图标，在导出 SVG文件，接着交给 Inkscape 以 调整为选取大小，最后 临摹轮廓 得到之后能正常生成字体的 SVG 矢量图。
2.2 从互联网获取现成的svg矢量图片
2.2.1 SvgIcons
SvgIcons 收录了大量免费图片，点击图标按钮即可弹出图标代码。其官网地址为： http://svgicons.sparkk.fr/。
进入其主页后点击左上角的"Icon Sets"：
选择一个图标集：
进队对应的页面下载素材：
2.2.2 Ikonate
Ikonate 提供200多个完全可定制的矢量图标，其地址为：https://ikonate.com/。
进入页面后，可以直接点击Export all Icons导出所有图标：
也可以选择你心仪的图标后，再点击Export：
2.2.3 Iconfont-阿里巴巴矢量图标库
Iconfont-阿里巴巴矢量图标库的官方地址为：https://www.iconfont.cn/。在这个网站你可以直接使用关键字搜索到更多你喜欢的图标，打开网站后，其主页界面如下：
比如在搜索框中输入”购物车“回车提交后进入搜索结果页面：
鼠标移动至某个图标上点击“下载”打开下载子页面：
点击SVG下载即可下载图标。
2.2.4 谷歌图标库
其官方地址为：https://fonts.google.com/icons?selected=Material+Icons
你可以选择你需要的图标，点击它，在右侧点击下载SVG图标：
3. 生成字体文件
4. 图标字体文件的基本使用
你需要引用生成的CSS文件（style.css）：
<link rel="stylesheet" href="https://i.icomoon.io/public/temp/2910d84d51/UntitledProject/style.css">
注意这个CSS样式文件和字体文件所在的目录关系，在该CSS文件中，导入了所使用的字体：
@font-face { font-family: 'jcicon'; src: url('fonts/jcicon.eot?1kky57'); src: url('fonts/jcicon.eot?1kky57#iefix') format('embedded-opentype'), url('fonts/jcicon.ttf?1kky57') format('truetype'), url('fonts/jcicon.woff?1kky57') format('woff'), url('fonts/jcicon.svg?1kky57#jcicon') format('svg'); font-weight: normal; font-style: normal; font-display: block; }
而我们的字体文件就在这个font目录下面：
5. 将字体图标文件封装成 Vue 组件
简单封装示例
定义图标组件
<template> <span :class="[name,{ iconstyle:true, }]" v-if="colorVal && sizeVal" :style="{'color': colorVal}" ></span> <span :class="[name,{ iconstyle:true, }]" v-else-if="colorVal" :style="{'color': colorVal}" ></span> <span :class="[name,{ iconstyle:true, }]" v-else-if="sizeVal" :style="{'font-size': sizeVal}" ></span> <span :class="[name,{ iconstyle:true, }]" v-else ></span> </template> <script lang="ts"> import { defineComponent, ref, } from 'vue'; export default defineComponent({ name: 'my-icon', props:{ name:{ type:String, default:'icon-image' }, size:String, color: String, }, setup(props){ let colorVal = undefined; if(props.size){ colorVal = ref(props.color) } let sizeVal = undefined; if(props.size){ sizeVal = ref(props.size.toString()+'px'); } return { colorVal, sizeVal } } }); </script> <style lang="scss" scoped> @import "./style.css"; .iconstyle{ margin: 0; padding: 0; } </style>
全局安装组件：
import IconVue from 'Icon.vue'; // 你组件文件的位置 import type { App, Component } from 'vue'; const components: Component[] = [ IconVue, // ...其它你想安装的组件 ] export const MyComponents = { install:(app: App<Element>)=>{ components.forEach(component =>{ app.component((component as any).name, component) }) } }
在 main.ts中：
import { createApp } from 'vue' import App from './App.vue' import { MyComponents } from './components'; // 上面定 MyComponents 的 ts 文件地址 const app = createApp(App); app.use(MyComponents); app.mount('#app');
使用举例：
<template> <my-icon name="jcicon-toggle-left"></jc-icon> </template>
