项目图标管理

最新推荐文章于 2024-05-24 09:33:46 发布

woshiniudun

最新推荐文章于 2024-05-24 09:33:46 发布

阅读量284

点赞数

分类专栏： svg 图标文章标签： javascript 前端

本文链接：https://blog.csdn.net/woshiniudun/article/details/125653614

版权

svg 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

图标

1 篇文章 0 订阅

订阅专栏

前端开发必不可少的工作，图标。

我们项目现在用到了三个地方的图标，fontawesome、iview自带图标、其他自用图标。

前两个没法管，关键在自用图标上。由于项目变更，代码到我手上的时候，只剩源码里的font文件夹了，无奈又要添加图标。为了让之后的工作更加有条理，希望借助阿里的 www.iconfont.cn 进行自用图标管理。

由于iconfont上传需要单个svg文件，如何把手头上的文件变为svg文件，进行了一系列尝试。

尝试过程绕了许多弯路，现在有个基本可行的路子，记录如下：

思路

使用iconfont.svg，解析里面的内容，将每个`glyph` 标签解析为单个svg文件，由于解析过程需要很多微调，没有找到合适的工具，所以自己写了一个。

一个iconfont网站可以接受的svg文件结构如下

<?xml version="1.0" encoding="utf-8"?>
<svg id="check" version="1.1" xmlns="http://www.w3.org/2000/svg" >
    <path d="..."/>
</svg>

而glyph的结构如下

<glyph 
    glyph-name="x" 
    unicode="x" horiz-adv-x="1001"
    d="M281 543q-27 -1 -53 -1h-83q-18 0 -36.5 -6t-32.5 -18.5t-23 -32t-9 -45.5v-76h912v41q0 16 -0.5 30t-0.5 18q0 13 -5 29t-17 29.5t-31.5 22.5t-49.5 9h-133v-97h-438v97zM955 310v-52q0 -23 0.5 -52t0.5 -58t-10.5 -47.5t-26 -30t-33 -16t-31.5 -4.5q-14 -1 -29.5 -0.5
t-29.5 0.5h-32l-45 128h-439l-44 -128h-29h-34q-20 0 -45 1q-25 0 -41 9.5t-25.5 23t-13.5 29.5t-4 30v167h911zM163 247q-12 0 -21 -8.5t-9 -21.5t9 -21.5t21 -8.5q13 0 22 8.5t9 21.5t-9 21.5t-22 8.5zM316 123q-8 -26 -14 -48q-5 -19 -10.5 -37t-7.5 -25t-3 -15t1 -14.5
t9.5 -10.5t21.5 -4h37h67h81h80h64h36q23 0 34 12t2 38q-5 13 -9.5 30.5t-9.5 34.5q-5 19 -11 39h-368zM336 498v228q0 11 2.5 23t10 21.5t20.5 15.5t34 6h188q31 0 51.5 -14.5t20.5 -52.5v-227h-327z" 
/>

最简单想法就是把glyph的d属性放到path的d属性中。

要注意的事项：

1、glyph中的d属性和path的d属性存在坐标系的差异，如果简单拷贝，得到的是上下颠倒的。需要使用 transform="scale(1,-1)" 进行上下颠倒。详见参考。

2、得到的svg图标不居中，不太清楚原因。查看iconfont.svg中的font-face元素，得到启发。应该需要向下偏移，偏移量为`ascent`

<font id="iconfont" horiz-adv-x="1024" >
  <font-face
    font-family="iconfont"
    font-weight="500"
    font-stretch="normal"
    units-per-em="1024"
    ascent="896"
    descent="-128"
  />
  <missing-glyph />

</font>

最终得到如下结果

<?xml version="1.0" encoding="utf-8"?>
<svg id="x" unicode="&#120;" width="128" height="128" style="width:128px;height:128px;" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1001 1001" enable-background="new 0 0 1001 1001" xml:space="preserve">
<path fill="#666" transform="scale(1,-1) translate(0,-896)" d="M281 543q-27 -1 -53 -1h-83q-18 0 -36.5 -6t-32.5 -18.5t-23 -32t-9 -45.5v-76h912v41q0 16 -0.5 30t-0.5 18q0 13 -5 29t-17 29.5t-31.5 22.5t-49.5 9h-133v-97h-438v97zM955 310v-52q0 -23 0.5 -52t0.5 -58t-10.5 -47.5t-26 -30t-33 -16t-31.5 -4.5q-14 -1 -29.5 -0.5
t-29.5 0.5h-32l-45 128h-439l-44 -128h-29h-34q-20 0 -45 1q-25 0 -41 9.5t-25.5 23t-13.5 29.5t-4 30v167h911zM163 247q-12 0 -21 -8.5t-9 -21.5t9 -21.5t21 -8.5q13 0 22 8.5t9 21.5t-9 21.5t-22 8.5zM316 123q-8 -26 -14 -48q-5 -19 -10.5 -37t-7.5 -25t-3 -15t1 -14.5
t9.5 -10.5t21.5 -4h37h67h81h80h64h36q23 0 34 12t2 38q-5 13 -9.5 30.5t-9.5 34.5q-5 19 -11 39h-368zM336 498v228q0 11 2.5 23t10 21.5t20.5 15.5t34 6h188q31 0 51.5 -14.5t20.5 -52.5v-227h-327z"/>
</svg>

代码随后放到gitee上，使用nodejs。

批量处理后，得到若干svg文件，使用iconfont的上传功能，经过审核后，即可放入自己的项目库中，之后再增加图标，即可生成统一的字体文件，替换旧文件。

其他问题：

原有图标的unicode码在重新上传过程中无法保存，所以重新上传后，需要挨个设置每个图标的unicode，比较繁琐。

方案比较：

其实使用在线字体编译器，可以快速得到svg文件（见参考3），但是有个问题，得到的svg图标丢失了空白信息，所有图标都是占满了画布的长宽，这样转换后的图标比原图标大不少（我有个图标原来是个小数点，结果转换后成了一个大圆）

使用到的工具

1、百度字体编辑器地址：http://fontstore.baidu.com/static/editor/index.html（已经无法使用？）

2、另一款在线编辑 http://font.qqe2.com/index.html

3、The Apache™ Batik Project https://xmlgraphics.apache.org/batik/tools/browser.html用于查看单个svg图片，可以导出为其他字体格式

4、FontCreator，查看ttf文件，好用，但对问题没什么帮助。

参考