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的下载,查看,及使用方法了,如果简单开发项目的话,应该就已经够用了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值