Electron+Vue3 MAC 版日历开发记录(31)——Icons Font 制作

在之前，我们的 设置 按钮因为 FullCalendar 没有提供对应的图标，所以独立于 FullCalendar 在 Main 界面添加，但这导致页面的不统一和协调。

今天就想着如何自己手动创建一个只带图标 icons 的字体 CSS，把需要的 icons 打包进去。

参考模仿

先看看我们引用的 FullCalendar 提供的 font-face：

// icons.css

@font-face {
  font-family: 'fcicons';
  src: url("data:application/x-font-ttf;charset=utf-8;base64,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") format('truetype');
  font-weight: normal;
  font-style: normal;
}

.fc-icon {
  /* added for fc */
  display: inline-block;
  width: 1em;
  height: 1em;
  text-align: center;
  user-select: none;

  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'fcicons' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fc-icon-chevron-left:before {
  content: "\e900";
}
.fc-icon-chevron-right:before {
  content: "\e901";
}
.fc-icon-chevrons-left:before {
  content: "\e902";
}
.fc-icon-chevrons-right:before {
  content: "\e903";
}
.fc-icon-minus-square:before {
  content: "\e904";
}
.fc-icon-plus-square:before {
  content: "\e905";
}
.fc-icon-x:before {
  content: "\e906";
}

这里我们看到两个关注点：

字体可以导出成 base64；所以如何将我们的图标转成 base64 需要看看；
每个图标都需要增加一个 before 伪类，具体看看还是有规律的，所以我们自己生成的尽可能和他们保持一致，前缀：.fc-icon-。

制作 Font

搜索一圈网站，大部分人推荐使用 icomoon icomoon.io/app/#/selec…

Electron+Vue3 MAC 版日历开发记录(31)——Icons Font 制作

官网提供了一些免费的和专题图标，但这不是我们需要的，这里，我先从 Naive UI 推荐的 xicons www.xicons.org/#/zh-CN 里挑选出需要的 icons 的 SVG。

Electron+Vue3 MAC 版日历开发记录(31)——Icons Font 制作

再导入到 icomoon.io。

Electron+Vue3 MAC 版日历开发记录(31)——Icons Font 制作

然后，再为他们设定一些属性：

Electron+Vue3 MAC 版日历开发记录(31)——Icons Font 制作

下葬后的文件夹里，除了字体文件，还有一个 css 文件，内容和上面的 css 居然高度相似 (难道 FullCalendar 也是这个网站制作他们的 Font 的？)：

@font-face {
  font-family: 'fcicons';
  src:
    url('fonts/fcicons.ttf?c33sp3') format('truetype'),
    url('fonts/fcicons.woff?c33sp3') format('woff'),
    url('fonts/fcicons.svg?c33sp3#fcicons') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="fc-icon-"], [class*=" fc-icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'fcicons' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fc-icon-chevron-left:before {
  content: "\e900";
}
.fc-icon-chevron-right:before {
  content: "\e901";
}
.fc-icon-chevrons-left:before {
  content: "\e902";
}
.fc-icon-chevrons-right:before {
  content: "\e903";
}
.fc-icon-minus-square:before {
  content: "\e904";
}
.fc-icon-plus-square:before {
  content: "\e905";
}
.fc-icon-setting:before {
  content: "\e907";
}
.fc-icon-x:before {
  content: "\e906";
}

下面就是需要将字体文件转为 base64 格式的。

借助 transfonter 工具transfonter.org/

@font-face {
    font-family: 'fcicons';
    src: url('data:font/ttf;charset=utf-8;base64,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') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

所以，我们可以直接重写 css 了。

Electron+Vue3 MAC 版日历开发记录(31)——Icons Font 制作

这样，我们就比 FullCalendar 多了一个设置 按钮：

::v-deep(.fc-icon-setting:before) {
  content: "\e907";
}

好了，验证下，按钮图标的可用性，创建一个 Custorm Button：

  calendarOptions: {
    plugins: [dayGridPlugin, interactionPlugin],
    customButtons: {
      settingButton: {
        icon: 'setting',
        click: this.settingClick,
      } as CustomButtonInput,
    } as unknown,
    headerToolbar: {
      left: 'settingButton',
      center: 'title',
      right: 'prev,next',
    },
    
    ...

看看效果：

Electron+Vue3 MAC 版日历开发记录(31)——Icons Font 制作