Vue新项目中如何使用SVG矢量图

---

前言

首先简单了解一下什么是SVG矢量图，然后再来讲解如何在一个新的Vue项目中使用它。

---

一、什么是SVG？

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用来定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失

二、使用步骤

1.寻找SVG资源

学会在网络中收集.svg的图片，然后在项目中使用。
可以在https://www.iconfont.cn/下载喜欢的.svg图片。
可以直接下载或者复制代码。

2.新建 .svg文件

在src/icons/svg下，建立一个名为qq.svg的文件（文件名是可以任意取的），并把上一步中复制的代码粘过来。