vue项目中使用.svg图标的两种方式

最近项目中要求使用svg图片格式作为项目图标,以适应放大缩小后的效果

自己总结了以下两种方式:

第一种 类似iconfont

  1. 去字体图标制作网站icomoon.io
    vue项目中使用.svg图标的两种方式_第1张图片
  2. 点击“IcoMoon App”,然后点击右上角“IcoMoon App”
    vue项目中使用.svg图标的两种方式_第2张图片
    出来如下图界面:
    vue项目中使用.svg图标的两种方式_第3张图片
    此界面中你可以导入自己的svg图,也可以选择系统里自带的并勾选,总之,选好需要制作的图标后,点击右下角“Generate Font”,出现如下界面
    vue项目中使用.svg图标的两种方式_第4张图片

可以点击“”这个按钮,进行图标属性的一些更改
vue项目中使用.svg图标的两种方式_第5张图片
vue项目中使用.svg图标的两种方式_第6张图片
设置好以后关闭弹框,点击右下角“Download”按钮
vue项目中使用.svg图标的两种方式_第7张图片
下载好以后,如下图,选择font文件夹和style.css两个文件粘贴到你的项目,之后就可以在页面中使用图标
vue项目中使用.svg图标的两种方式_第8张图片
使用方式很简单,就像阿里巴巴字体图标库一样,在dom元素中的class设置相应图标名称
在这里插入图片描述

第二种 封装svg

我的项目之前是已经封装好的svg,所以我是需要啥图标直接下载好后仍进去,名字改一下就好了
vue项目中使用.svg图标的两种方式_第9张图片
所有svg图片的命名方式都是:icon-图标名

然后界面中直接使用的话如下方式:
在这里插入图片描述
具体封装方法我没试过,网上有很多类似这个https://juejin.im/post/5bcfdad4e51d457a8254e9d6

你可能感兴趣的:(前端,svg)