记：psd中图标转成svg并上传到iconfont制作成图标

2024-05-19 20:44:13

拿到设计师给的.svg格式图标兴冲冲地上传到iconfont，发现上传的图标是空白的。用编辑器打开发现里面没有<path>，于是自己动手将psd里的图标做成svg上传到iconfont做成图标。按照iconfont的教程没做好，可能是我不会用AI的缘故。在网上找啊找，这里做下笔记。
参考的网址：
http://tgideas.qq.com/webplat...
http://www.cnblogs.com/binmen...

1.首先psd里面图标得是形状，选中图标复制图层到新建文件

2.将其裁剪成`正方形`，裁剪的时候图标`周围记得留一定空白`，可以自己衡量

3.之后把图标保存为.EPS格式，默认就行

4.将保存的EPS格式图标用AI(Adobe illustrator)打开，移到左上角对齐画布

之后鼠标移到图标右下角，按住shift将其等比拉伸铺满画布

5.将图标保存为svg格式，默认就行

然而这时候上传到iconfont图标还是空白的，可能格式不符合的缘故吧

6.接下来随便从iconfont下载一个svg格式图标（因为要以它的格式为准），复制一份，用编辑器打开，找到`<path></path>`代码，这就是要用来替换的路径

用编辑器打开刚刚用AI保存的svg格式图标，将其中的<path></path>复制，替换掉上面从iconfont下载的svg的path；或者用工具过滤，只留路径，然后复制替换

注意代码里的viewBox要和用AI保存的一致，打开保存的svg看看就知道了

保存的图标的viewBox是0 0 64 64，那么就把viewBox改成和它一样的，否则更改好的svg放到浏览器一看，图标没了。。。

更改好以后保存放到浏览器看看，图标能显示

7.将保存好的图标上传到iconfont，图标能显示，接下来保存到项目，下载图标就可以用了

记：psd中图标转成svg并上传到iconfont制作成图标相关推荐

iconfont 无法导入 svg_Figma绘制图标上传至iconfont的正确姿势
Figma中做好的图标,导出svg然后再上传到iconfont,经常会出现样式错误的情况: 这是因为figma的填充模式为"even-odd",iconfont识别不了这种格式.一 ...
php将上传的图片转为base64,html5实现把上传的图片转成base64编码在显示（代码实例）...
本章给大家介绍html5实现把上传的图片转成base64编码在显示(代码实例).有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 首先我们来详细的看一看base64编码: 什么是bas ...
javaweb上传文件_javaWeb中，如何通过CommonsFileUpload组件上传文件
大家好,欢迎来到雄雄的小课堂,今天给大家分享的是<javaWeb中,如何通过Commons-FileUpload组件上传文件> 前言:文件上传大家都不陌生,在这个互联网飞速发展的时代,共享 ...
11月30在spring mvc中使用Validator框架和文件上传
首先回顾了spring mvc中的表单验证和业务逻辑校验失败后,回到表单页面中显示错误信息的整个内部运行流程. 表单校验出错后回到表单注册页面是由默认的SimpleFormController的pro ...
Vue项目中遇到了大文件分片上传的问题
Vue项目中遇到了大文件分片上传的问题,之前用过webuploader,索性就把Vue2.0与webuploader结合起来使用,封装了一个vue的上传组件,使用起来也比较舒爽. 上传就上传吧,为什么 ...
python watchdog 同时检测到多个事件_python中watchdog文件监控与检测上传功能
引言上一篇介绍完了观察者模式的原理,本篇想就此再介绍一个小应用,虽然我也就玩了一下午,是当时看observer正好找到的,以及还有Django-observer,但Django很久没用了,所以提下这 ...
php利用ajax文件上传,如何在PHP中利用AjaxForm实现一个文件上传功能
如何在PHP中利用AjaxForm实现一个文件上传功能发布时间:2020-12-18 14:52:38 来源:亿速云阅读:94 作者:Leah 如何在PHP中利用AjaxForm实现一个文件上传功 ...
winform中通过FileStream实现将文件上传
winform中通过FileStream实现将文件上传本实例实现功能:通过OpenFileDialog选择待上传的文件,并将所选文件的完整路径绑定到TreeView控间中显示,然后通过FolderB ...
在PHP中通过POST方法实现文件上传功能
(本文内容属于转载,原文链接http://blog.sina.com.cn/s/blog_4fe447d501009rzh.html) 在PHP 5中通过POST方法实现文件上传非常简单,可以上传文本 ...

最新文章

热门文章