封装自己的web字体图标库

CSDN：jcLee95

邮箱 ：291148484@163.com

本文地址：https://blog.csdn.net/qq_28550263/article/details/123492756

相关文章推荐：

• flutter中使用图标（含自定义图标图）：https://blog.csdn.net/qq_28550263/article/details/123309530

1. 字体图标简介

• 1.1 什么是字体图标
• 1.2 字体图的特点

2. 绘制或下载矢量图标素材

• 2.1 制合规的作svg图标
  • 2.1.1 使用 Adobe Illustrator 制作
  • 2.1.2 使用 Inkscape 制作
  • 2.1.3 使用 microsoft Visio 制作
• 2.2 从互联网获取现成的svg矢量图片
  • 2.2.1 SvgIcons
  • 2.2.2 Ikonate
  • 2.2.3 Iconfont-阿里巴巴矢量图标库
  • 2.2.4 谷歌图标库

3. 生成字体文件

4. 图标字体文件的基本使用

5. 将字体图标文件封装成 Vue 组件

1. 字体图标简介

1.1 什么是字体图标

所谓字体图标指的是一种使用字体的编码规则来编码的图形，因此从本质上看其实与其叫做 字体图标还不如叫做 图标字体。图标字体是使用微小图形而不是字母形式的字体。与字符一样，每个图标可以使用 CSS 进行修改大小（font-size）、颜色（color）等等样式。

1.2 字体图的特点

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>