如何在项目中引入矢量图

1.找到矢量图

可以在阿里巴巴矢量图标库中寻找:

点击此链接进入官网: https://www.iconfont.cn/

 

1.我们可以把选好的图标加入购物车

 

 

 

将其添加进项目:

 

 

 

点击复制代码:

 

 

 

在代码中引入矢量图

将刚才复制的代码，在index.html中引入

<script src="复制的矢量图项目代码"></script>
<link rel="stylesheet" href="//at.alicdn.com/t/font_2116323_wrykyjzwea.css">

 

复制矢量图代码:

 

 

 

 

 

将刚才复制的矢量图的代码，在页面使用:

<svg class="icon" aria-hidden="true">
    <use xlink:href="复制的图片代码"></use>
</svg>

这样我们就可以把官网中的图标引入到我们的代码中去了

要注意的一点是:

每当我们添加新的图标到自己的项目中去的时候，上面整个项目的代码都需要点击刷新一次，同样的，在我们代码中写项目代码的地方也需要进行相应的更换.