0


vue-element-admin项目中,icon、svg图标的使用

    项目开发过程中,不管是菜单,还是页面,很多地方都有用到小图标,当然我项目中这些图标都放在文件夹src>icons>svg文件夹下,如果平时开发中有需要用到哪个图标,去该文件夹下找到在代码中使用即可。

    下面对svg进行简单介绍:

    **1.图标的使用方法**

    在文件夹中,找到想要使用的图标后,<svg-icon icon-class="图片名称"></svg-icon>即可

    代码如下:
// 如:svg名称为change
<svg-icon icon-class="change"></svg-icon>
**    2.文件夹中查看svg图片**

    相信很多人在第一次打开文件夹查看svg图片时,效果应该如下图所示:

     如上图所示,这样正常是看不出图标长啥样的,但是如果在开发工具,如:webStrom中一个个点进去查看,很麻烦,重点是看过去了可能也忘记长啥样了,如果你想在文件夹中很快的看到svg图标长啥样,可以给电脑安装插件

    安装完后在查看文件夹svg图片,效果如下:

     如上图所示:插件安装完成后,可以很明显的对比出某个名称对应什么样的图标,这个时候如果想要用到某个svg图标,直接在文件夹里就可以一目了然的看到所有的图标了。

    ** 3.新增svg图片**

    当然,在项目的开发过程中,所需的svg图片不可能一次性添加进来。有时候需要根据开发的需求,新增一些svg图标。

    下面已阿里巴巴矢量图标库为例,实现svg的下载

    首先进入阿里巴巴矢量图标库,找到合适的图标,下载svg(当然前提也是要有自己的账户才能进行下载),将下载好的svg放到项目svg文件夹下,就可以在代码中使用了。

    具体如下图所示下载:

     以上就差不多包含了svg的下载,查看,及使用方法了,如果简单开发项目的话,应该就已经够用了。
标签: vue.js element-ui svg

本文转载自: https://blog.csdn.net/qq_36509946/article/details/128900492
版权归原作者 笑到世界都狼狈 所有, 如有侵权,请联系我们删除。

“vue-element-admin项目中,icon、svg图标的使用”的评论:

还没有评论