Question

在 www.iconfont.cn/ 获得字体图标，Electron 使用 Chromium 核心，一般情况下只使用 iconfont.css 和 iconfont.ttf 这两个文件。把这两个文件放到 src/renderer/assets/icon 下，在 main.ts 导入一下 iconfont.css 就可以全局使用字体图标了。

import { createApp } from 'vue';
import './style.css';
import "./assets/icon/iconfont.css";
import { router } from './router';
import App from './App.vue';

createApp(App).use(router).mount('#app');

<i class="icon icon-chat"></i>

如果 iconfont.ttf 足够小，那么 vite 会把它转义成 base64 编码的字符串，直接嵌入到样式文件中来达到少请求数量的目的，开发者可以通过在 vite.config.ts 中增加 build.assetsInlineLimit 配置（值设置为 0 即可）来关闭 vite 的这个行为。

运行项目：