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

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

封装自己的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>
目录
相关文章
|
3月前
|
Java 应用服务中间件 容器
SpringBoot之Web原生组件注入
SpringBoot之Web原生组件注入
|
2月前
|
IDE API 开发工具
 鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Web组件
 鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Web组件
46 2
|
1月前
|
存储 前端开发 JavaScript
强烈推荐一个Python库!制作Web Gui也太简单了!
强烈推荐一个Python库!制作Web Gui也太简单了!
|
2月前
|
SQL 开发框架 .NET
ASP.NET WEB+EntityFramework数据持久化——考核练习库——1、用户管理系统(考点:查询列表、增加、删除)
ASP.NET WEB+EntityFramework数据持久化——考核练习库——1、用户管理系统(考点:查询列表、增加、删除)
67 0
|
3月前
|
前端开发
【web组件库系列】纯CSS实现典型网页数据分页器
【web组件库系列】纯CSS实现典型网页数据分页器
46 0
|
3月前
|
编解码 Ubuntu C++
WebAssembly01--web 编译FFmpeg(WebAssembly版)库
WebAssembly01--web 编译FFmpeg(WebAssembly版)库
21 0
|
3月前
|
开发框架 JavaScript 前端开发
React.js:改变Web开发方式的JavaScript库
React.js:改变Web开发方式的JavaScript库
38 1
|
3月前
【web server】HTTP协议如何解析or封装
【web server】HTTP协议如何解析or封装
|
3月前
|
Ubuntu API 开发工具
基于铜锁构建Web在线加密工具库
基于铜锁构建Web在线加密工具库
34 0
|
3月前
|
存储 前端开发 Java
谈谈企业级 Web 应用里各种不同的 UI 组件设计思路
谈谈企业级 Web 应用里各种不同的 UI 组件设计思路
28 0