axure实现添加图片 axure地图上添加图标( 二 )

于是我就开始审视这件事的本质，我本来就是想画一个大概的图标来表示这个地方用了什么样的图标，而我选择用Fontawesome之后。一方面我要下载字体，其次我要在发布的时候链接CSS地址防止别人的电脑上看原型的时候丢失字体，而且我找到的字体其实也并不是和前端框架百分百一样的内容，最后我还在自己本地电脑上还预览不成功，我丢，那我还用这玩意干啥？
Fontawesome确实很强，但是也确实有点点麻烦，麻烦的并不是一开始装字体和发布的时候配置好CSS链接，而是这一顿操作之后我要让其他协作的同事也装这么多东西，最后一旦某个人的电脑出了问题，又要花一堆时间去重新定位问题，找到解决方案。
所以，我决定直接抛弃Fontawesome，毕竟时间比较金贵，不能都荒废在这上面了。
方法四：SVG大法这个方法是我最推荐的也是最认可的，虽然它也有弊端，但是胜在简单，普适性而且还不会出错。
SVG是什么？定义是什么，我直接从百科上摘下来：

SVG是一种图像文件格式，它的英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形。它是基于XML（Extensible Markup Language），由World Wide Web Consortium（W3C）联盟进行开发的。严格来说应该是一种开放标准的矢量图形语言，可让你设计激动人心的、高分辨率的Web图形页面。用户可以直接用代码来描绘图像，可以用任何文字处理工具打开SVG图像，通过改变部分代码来使图像具有交互功能，并可以随时插入到HTML中通过浏览器来观看。

这些描述看不懂没关系，但是只需要看到这句话就可以了。
「可以用任何文字处理工具打开SVG图像，通过改变部分代码来使图像具有交互功能……」
Axure肯定也是文字处理工具，而且还有一个很常用到SVG的文字处理工具就是：PPT 。
做PPT的时候，找一些图标，形状等，都可以插入SVG 。直接把SVG图片下载到本地，然后拖拽进入PPT，最后再做两次取消分组就可以了。

话题回到Axure中，Axure也可以使用这种办法，而且Axure的SVG处理能力比PPT还更好，它支持你自己复制SVG的代码然后粘贴到Axure中，就可以自动识别。

复制SVG代码之后，粘贴在Axure中，然后右键将SVG图片转为形状，然后就可以自由的编辑（调色，改大小等）。
恰巧的是，我们团队中的项目的一些icon都是来源一个网站，而且这个网站也正好支持复制SVG代码的功能，它就是：阿里巴巴矢量图标库。
选择你想要的的图标库，然后点击下载，在弹窗页面选择「复制SVG」，然后再粘贴到Axure中，最后再转SVG成形状，就可以自由编辑啦。

总结一下，SVG法很实用，也很方便。主要是iconfont目前的生态很好，有很多素材，而且完全是免费的，你想要的图标基本上都可以找得到，完全满足了我日常原型绘制的时候对图标的要求。
而且方式也很简单，将想要的原型库加入到团队项目中，在实际开发的时候，开发同学也可以直接使用此图标，一举两得，十分高效。
截止到目前，还有一个唯一的瑕疵没有解决，就是iconfont上没有Element-UI的图标，而我就是很强迫症非要找到它怎么办？
接下来请看强迫症患者的终极解决方案，只要你够偏执，你总能找到办法。
02 拓展：怎么获取Element-UI的图标我们打开Element-UI的组件库，然后找到Icon图标这个菜单，发现这里有很多饿了么原生的的Icon，我很想要把它们弄到Axure里怎么办？
1. 干货来袭首先找公司的前端同学拿到Element-UI的字体包文件，一般来说引入这些前端框架的时候都会把一些静态资源下载下来放在本地的。如果自己有动手能力，也可以自己搭建框架，然后将字体包文件拿出来。

以上关于本文的内容，仅作参考！温馨提示：如遇健康、疾病相关的问题，请您及时就医或请专业人士给予相关指导!

「四川龙网」www.sichuanlong.com小编还为您精选了以下内容，希望对您有所帮助：