将svg编译成字体图标

田永春

2023-12-01

有时将svg图标编译成字体图标，可以更方便的来使用，下面就介绍如何将svg编译成字体图标

1. 使用npm安装svgtofont

npm i svgtofont

2. 编译字体图标

const svgtofont = require("svgtofont");
 
svgtofont({
  src: path.resolve(process.cwd(), "icon"), // svg 图标目录路径
  dist: path.resolve(process.cwd(), "fonts"), // 输出到指定目录中
  fontName: "svgtofont", // 设置字体名称
  css: true, // 生成字体文件
  startUnicode: 0xea01 // unicode的起始值，默认值为0xea01
}).then(() => {
  console.log('done!');
});

3. 使用字体图标

编译完成后，在fonts目录下，有自动生成的scss模板文件，可以直接调用该scss文件，也可仿照其格式进行调用即可。

@font-face {
  font-family: "svgtofont";
  src: url('svgtofont.eot?t=1653631242321'); /* IE9*/
  src: url('svgtofont.eot?t=1653631242321#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url("svgtofont.woff2?t=1653631242321") format("woff2"),
  url("svgtofont.woff?t=1653631242321") format("woff"),
  url('svgtofont.ttf?t=1653631242321') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('svgtofont.svg?t=1653631242321#svgtofont') format('svg'); /* iOS 4.1- */
}

[class^="svgtofont-"], [class*=" svgtofont-"] {
  font-family: 'svgtofont' !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.svgtofont-test1:before { content: "\ea01"; }
.svgtofont-test2:before { content: "\ea02"; }

4. 可查生成的svg文件，浏览生成的字体图标信息

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
  <font id="svgtofont" horiz-adv-x="190">
    <font-face font-family="svgtofont"
      units-per-em="266.533" ascent="266.533"
      descent="0" />
    <missing-glyph horiz-adv-x="0" />
    <glyph glyph-name="test1"
      unicode="&#xEA01;"
      horiz-adv-x="190" d="M91.09 7.8200000000001A91.09 91.09 0 0 0 0 98.9200000000001C0 142.22 33.93 183.7300000000001 57.14 214.03A341 341 0 0 1 90.15 265.9800000000001A1.05 1.05 0 0 0 92 265.9800000000001A340.9090000000001 340.9090000000001 0 0 1 125 214.03C148.2 183.7400000000001 182.15 142.22 182.15 98.91H126.61A2.14 2.14 0 0 1 124.47 96.77V65.5700000000001H93.23A2.14 2.14 0 0 1 91.09 63.4300000000001zM126.7 29.9400000000001V59.6800000000001H99.09A2.14 2.14 0 0 1 96.95 57.5700000000001V29.96zM96.95 0.22A88.83 88.83 0 0 1 126.7 5.9400000000001V20.9400000000001H99.09A2.14 2.14 0 0 1 96.95 18.8000000000001zM160.07 63.3200000000001V93.0600000000001H132.46A2.14 2.14 0 0 1 130.32 90.9200000000001V63.3200000000001zM163.64 26.3500000000001H163.64A6.24 6.24 0 0 1 165.43 30.7600000000001V54.3H135.71V24.5700000000001H159.21A6.24 6.24 0 0 1 163.64 26.3500000000001zM137.73 1e-13A89 89 0 0 1 159.73 13.5200000000001H137.73zM184.06 63.3200000000001A88.58 88.58 0 0 1 189.79 93.0600000000001H169.09V63.3200000000001zM176.49 30.2900000000001A88.78 88.78 0 0 1 190 52.2900000000001H176.49zM176.49 30.2900000000001A88.78 88.78 0 0 1 190 52.2900000000001H176.49zM71.05 222.4500000000001C69.37 220.1000000000001 67.71 217.7400000000001 66.05 215.4500000000001C60.71 208.0900000000001 55.05 200.9400000000001 49.59 193.7000000000001Q52.83 193.2500000000001 56.08 192.7000000000001C60.67 200.3800000000001 65.34 208.0200000000001 69.74 215.8100000000001C70.97 217.9900000000001 72.18 220.2000000000001 73.4 222.3900000000001C74.33 224.0900000000001 72.1 223.9100000000001 71.05 222.4500000000001zM49.33 181.1800000000001C50.14 182.5700000000001 51 184.0200000000001 51.8 185.4300000000001Q48.11 186.15 44.41 186.7500000000001H44.41A304.741 304.741 0 0 1 23.08 154.0200000000001C11.63 133.2600000000001 3.68 110.02 7.33 86.1A85.22 85.22 0 0 1 35.73 34.82A83.78 83.78 0 0 1 46 27.1900000000001A1.09 1.09 0 0 1 47.34 28.9100000000001A91.36 91.36 0 0 0 22.7 70.46C15.88 95.6 21.55 121.37 31.26 144.9500000000001A322.53 322.53 0 0 0 49.33 181.1800000000001z" />
    <glyph glyph-name="test2"
      unicode="&#xEA02;"
      horiz-adv-x="27" d="M24.8175312721252 18.4768348035812L19.1137312721252 18.4768348035812L6.1818712721252 18.4768348035812L2.0081252721252 18.4768348035812C0.7256252721252 22.7241348035812 3.5212512721252 25.4837448035812 6.0806212721252 23.7879348035812C6.0806212721252 28.8831248035812 8.0043712721252 35.4583325982112 13.0050312721252 35.4583325982112C17.4881312721252 35.4583325982112 19.8675312721252 31.6658348035812 19.9293312721252 26.9714548035812C25.0537312721252 27.8193748035812 26.0943312721252 22.7241348035812 24.8175312721252 18.4768348035812zM7.3865625858307 23.125H20.1759374141693A2.3240625858307 2.3240625858307 0 0 0 22.5 20.8009374141693V20.8009374141693A2.3240625858307 2.3240625858307 0 0 0 20.1759374141693 18.4768748283386H7.3865625858307A2.3240625858307 2.3240625858307 0 0 0 5.0625 20.8009374141693V20.8009374141693A2.3240625858307 2.3240625858307 0 0 0 7.3865625858307 23.125zM18 20.8125L20.8125 20.8125L20.8125 19.27083L18 19.27083L18 20.8125zM7.3865625858307 14.6689586639404H20.1759374141693A2.3240625858307 2.3240625858307 0 0 0 22.5 12.3448960781097V12.3448960781097A2.3240625858307 2.3240625858307 0 0 0 20.1759374141693 10.0208334922791H7.3865625858307A2.3240625858307 2.3240625858307 0 0 0 5.0625 12.3448960781097V12.3448960781097A2.3240625858307 2.3240625858307 0 0 0 7.3865625858307 14.6689586639404zM18 12.3564586639404L20.8125 12.3564586639404L20.8125 10.8147886639404L18 10.8147886639404L18 12.3564586639404zM7.3865625858307 6.189790725708H20.1759374141693A2.3240625858307 2.3240625858307 0 0 0 22.5 3.8657281398773V3.8657281398773A2.3240625858307 2.3240625858307 0 0 0 20.1759374141693 1.5416655540466H7.3865625858307A2.3240625858307 2.3240625858307 0 0 0 5.0625 3.8657281398773V3.8657281398773A2.3240625858307 2.3240625858307 0 0 0 7.3865625858307 6.189790725708zM18 3.8772926330566L20.8125 3.8772926330566L20.8125 2.3356226330566L18 2.3356226330566L18 3.8772926330566z" />
  </font>
</defs>
</svg>

问题记录：

有时引入字体图标后，只显示一个空的框框，多半是由于未给目标元素设置font-family，并且需要给后边加 !import，以防止不生效或被覆盖。

将svg编译成字体图标

相关阅读

相关文章

相关问答

相关文档