使用 IcoMoon 生成字体图标，并在微前端项目中使用

最新推荐文章于 2023-01-19 12:02:31 发布

Lyrelion

最新推荐文章于 2023-01-19 12:02:31 发布

阅读量736

点赞数

分类专栏：微前端文章标签： IcoMoon 字体图标

本文链接：https://blog.csdn.net/Lyrelion/article/details/123729841

版权

微前端专栏收录该内容

12 篇文章 2 订阅

订阅专栏

1. IcoMoon 使用步骤

1.1 进入 IcoMoon 新建图集

IcoMoon App - Icon Font, SVG, PDF & PNG GeneratorUsing IcoMoon you can easily search and download vector icons or generate fonts (icon fonts). This tool can also be used for icon set management. It can generate icon fonts, SVGs, PDFs, PNGs and sprites.https://icomoon.io/app/#/select

进入上方的网址，会看到如下页面：

点击下方按钮，新建一个图标集

1.2 选择并生成字体图标

可以导入本地的 svg 图片，也可以选择已有图标库图标（Add Icons From Library...）
点击选择按钮，选中需要生成字体文件的图标
点击最下方最右侧的按钮（Generate Font F），生成字体图标文件

点击右下方按钮后，会跳转到新页面，这里可以对即将生成的图标进行重命名

1.3 使用字体图标文件

解压生成的压缩包会得到如下内容，我们将 fonts 和 style.css 放入项目

需要注意 style.css 文件中的 font-family 及 fonts 文件路径

在 html 中，直接使用 style.css 中定义的类名即可，可以修改字号，也可以改颜色

2. 微前端中实现换肤的一种思路

采用 CSS 变量 + IcoMoon 字体图标，实现换肤

2.1 使用 CSS 变量

项目整体根据主题选中的 CSS 变量进行换肤

基座应用中，会有一个 varriable.css 文件，用于存储每套皮肤对应的变量及色值
微应用引入需要的 CSS 变量文件即可（基座应用中定义的）

举个栗子：

varriable.css 中定义全局 CSS 变量：

:root {
  /* 深色 */
  --dark-btn-background: #397dff;
  /* 主题背景 */
  --theme-btn-background: var(--dark-btn-background);
}

在微应用中的 public/index.html 中，引入全局皮肤文件（也就是基座应用 public 下的样式）

<link rel="stylesheet" href="http://xxxx/project-name/global/styles/variable.css">

在微应用中写样式时，需要给换肤的文字、图标、背景色等，使用 CSS变量（主题色）

.btn {
    /* --theme-btn-background 是全局皮肤文件中定义的变量 */
    background:var(--theme-btn-background);
 }

2.2 使用字体图标

2.2.1 使用字体图标的好处

防止每次换肤时，图标需要再次请求资源
防止每次增加皮肤，都需要重新切图

2.2.2 字体图标的存放位置

在微应用的 src\assets\fonts 中，放入字体图标相关文件

2.2.3 如何防止样式文件过大

推荐字体图标或样式，根据业务进行划分，例如：fonts-header.scss

2.2.4 字体图标下载及命名规则

为了不影响其他的字体库，在下载字体文件时，应该注意：字体名称需要保证是 “唯一” 的，“字体前缀” 和 “字体名称” 应保持一致

命名规则：项目分类-页面模块-任意值（举个栗子：大气头部导航上的图标，air-header-icons）

可以在 IcoMoon 生成字体图标的界面，进行设置：

添加上面的设置之后，不需要修改设置页面的原有名称，生成的字体图标会自动加上前缀~

2.2.5 单色字体图标

加 color 就行

2.2.6 渐变色字体图标

给渐变的标签，添加如下代码：

.icon-color {
  background-image: -webkit-linear-gradient(left bottom, #fb2c61 , #fac362);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

属性说明：

background-image: -webkit-linear-gradient(left bottom, #fb2c61 , #fac362); （通过 CSS3 实现背景色渐变效果，这里是从左下角至右上角的线性渐变）
-webkit-background-clip: text;（规定背景的绘制区域为文字部分）
-webkit-text-fill-color: transparent;（文字填充颜色，一定要定义为 transparent，否则会覆盖底部的背景色）