在Vue项目中使用阿里巴巴矢量图--全解

素颜马尾好姑娘i 2021-12-18 15:17 502阅读 0赞

*  首先，确保你有一个项目。
 *  如果没有  
    `vue init webpack “你的项目名”`  
    更多关于新建项目的传送门：[https://blog.csdn.net/AIB\_Kasic/article/details/92830771][https_blog.csdn.net_AIB_Kasic_article_details_92830771]
 *  浏览一下你项目的文件结构
    
     *  src–>assets (如没有请自行新建)

#### 引入阿里巴巴矢量图 ####

*  登录阿里巴巴矢量图库\[[https://www.iconfont.cn/][https_www.iconfont.cn]\]，如图  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FJQl9LYXNpYw_size_16_color_FFFFFF_t_70]
 *  选择图标—>添加到购物车  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FJQl9LYXNpYw_size_16_color_FFFFFF_t_70 1]
 *  添加至项目  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FJQl9LYXNpYw_size_16_color_FFFFFF_t_70 2]  
    将图标下载至本地  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FJQl9LYXNpYw_size_16_color_FFFFFF_t_70 3]
 *  解压  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FJQl9LYXNpYw_size_16_color_FFFFFF_t_70 4]
 *  打开文件 ，删除红框中的两个文件  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FJQl9LYXNpYw_size_16_color_FFFFFF_t_70 5]

##### 引入 #####

打开vue项目所在目录 此处是D:vuetest/src/assets (根据自己项目的实际情况写路径)

*  在 `assets`文件夹中新建`icon`文件夹  
    ![在这里插入图片描述][20190702161020964.png]
 *  打开文件夹，将上图的文件全部拉进去（选中直接拖进icon文件夹中）
 *  ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FJQl9LYXNpYw_size_16_color_FFFFFF_t_70 6]
 *  使用
    
     *  进入`vscode`打开项目
     *  进入src—>assets–>icon中可以看到如下
     *  ![在这里插入图片描述][20190702161306850.png]
     *  点击进入（随便挑一个展示）如图 （红框部分为图标名字）
     *  ![在这里插入图片描述][20190702161413806.png]
     *  在html中使用
     *  先上效果图  
        ![在这里插入图片描述][20190702161616817.png]
     *  代码  
        `<p><i style="font-size:20px;color:#65dc78" class="icon iconfont icon-weixin"></i>微信</p>`
    
    > `解析:矢量图用起来没有颜色，我在这里自己给他加上了绿色，还有class记得要用 icon iconfont`

<完结>

[https_blog.csdn.net_AIB_Kasic_article_details_92830771]: https://blog.csdn.net/AIB_Kasic/article/details/92830771
[https_www.iconfont.cn]: https://www.iconfont.cn/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FJQl9LYXNpYw_size_16_color_FFFFFF_t_70]: /images/20211218/e78a7848a64e4f08a2eb57f28a196487.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FJQl9LYXNpYw_size_16_color_FFFFFF_t_70 1]: /images/20211218/f107ed838e4d4574966053b2f95cf50e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FJQl9LYXNpYw_size_16_color_FFFFFF_t_70 2]: /images/20211218/0d28b783a10e4d14be32cc63fc53f8d0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FJQl9LYXNpYw_size_16_color_FFFFFF_t_70 3]: /images/20211218/bc03dd1595614757bef7e8087ef3c1aa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FJQl9LYXNpYw_size_16_color_FFFFFF_t_70 4]: /images/20211218/15f74ce9bc62486b8d3d3c743f24fc53.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FJQl9LYXNpYw_size_16_color_FFFFFF_t_70 5]: /images/20211218/f68af2ffa8664bc18b5c17b11cc0e48f.png
[20190702161020964.png]: /images/20211218/04fbc213b5ea403b8017484b8780c142.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FJQl9LYXNpYw_size_16_color_FFFFFF_t_70 6]: /images/20211218/a590811dafec474494f49d1b3052ee4d.png
[20190702161306850.png]: /images/20211218/3685cdaa1f244880a12cfdd590a288ed.png
[20190702161413806.png]: /images/20211218/9e795dbf10ee4677a33c56355f7abb54.png
[20190702161616817.png]: /images/20211218/428d11da938a4ec58d2a148e1463f97f.png