封装自己的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 字体图的特点

特点	描述
灵活	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>

【web组件库系列】封装自己的字体图标库相关推荐

使用多个icon 字体图标库样式冲突问题
场景:项目中使用的UI样式库中包含一套icon 字体图标库,自定义一套字体图标库,在应用的时候,出现冲突,导致一方字体图标库无法显示或者显示不正常,原因:字体命名冲突,样式命名冲突,导致字体图标显示不 ...
云炬Android开发笔记 3-2字体图标库集成与封装
1.项目:android-iconify点此链接到Github 这是一个字体图标库,用字体来代替很多图片. Android开发经常将很多本地图标放在drawable和mipmap文件夹下,这样有一些坏 ...
web元件库/常用web组件/常用表单/导航栏/边框/图标/日期时间选择器/评分组件/穿梭框/输入框/步骤条/计数器/输入框/Axure原型/axure元件库/rp原型/交互控件/五星评分器/导航框架
web元件库/axure元件库/常用web组件/常用表单/导航栏/边框/图标/日期时间选择器/评分组件/穿梭框/输入框/步骤条 /交互控件:单/多选框.输入框.计数器.选择器.级联选择.滑动开关.滑块 ...
web元件库/axure元件库/常用web组件/常用表单/导航栏/边框/图标/日期时间选择器/评分组件/穿梭框/输入框/步骤条/
web元件库/axure元件库/常用web组件/常用表单/导航栏/边框/图标/日期时间选择器/评分组件/穿梭框/输入框/步骤条/ Axure原型演示及下载地址请点击:https://www.pmdan ...
元件库导入_最新版字体图标元件库分享，一套绝佳的矢量字体图标元件库
这次分享的FontAwesome v5字体图标元件库,是根据官方的最新版本v5.7.2整理完成的,包含了更全面的图标类型和丰富的图标数量,相信可以满足大多数同学在原型设计中的使用需求. FontAwe ...
Android肝帝战纪之字体图标库(iconify)的简单使用
字体图标库(iconify)的简单使用本文介绍字体图标库简单的封装和使用(以集成Fontawesome为例): Iconify的GIithub链接点此链接到Github 导入依赖 //在app级别 ...
字体图标库（Font Awesome）的使用--绝佳的图标字体库和CSS框架
一.概述 web项目(前台/后台)开发中,很多地方需要使用图标样式(如:删除图标或短信图标,见下图),当然可以选择图片当背景或者用<img>标签,但是用图片的不灵活性也是显然易见的,如颜色 ...
在vue项目中使用第三方的字体图标库
如何在vue项目中使用第三方的字体图标库以在vue项目中导入阿里字体图标库为例 1.打开阿里字体图标库的官方网址 https://www.iconfont.cn/?spm=a313x.7781069 ...
ant-design-vue 自定义图标，关联阿里巴巴字体图标库，项目已有图标，新下载的图标要重命名重新保存
前一段时间在项目中引入阿里巴巴字体图标库的图标,按步骤走了一遍,但是一直不成功. 刚好需求改了,不需要用图标,就暂时搁浅没在管这个. 今天又有新的需求要用到字体图标,在ant-design-vue官方 ...

【web组件库系列】封装自己的字体图标库

邮箱：291148484@163.com

1. 字体图标简介

1.1 什么是字体图标

1.2 字体图的特点

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

2.1 制合规的作svg图标

2.1.1 使用 Adobe Illustrator 制作

2.1.2 使用 Inkscape 制作

2.1.2.1 安装软件

2.1.2.2 绘制图形

2.1.2.2 临摹轮廓

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 组件

简单封装示例

【web组件库系列】封装自己的字体图标库相关推荐

最新文章

热门文章

【web组件库系列】封装自己的字体图标库

邮箱 ：291148484@163.com

1. 字体图标简介

1.1 什么是字体图标

1.2 字体图的特点

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

2.1 制合规的作svg图标

2.1.1 使用 Adobe Illustrator 制作

2.1.2 使用 Inkscape 制作

2.1.2.1 安装软件

2.1.2.2 绘制图形

2.1.2.2 临摹轮廓

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 组件

简单封装示例

【web组件库系列】封装自己的字体图标库相关推荐

最新文章

热门文章

邮箱：291148484@163.com