vue项目引入iconfont【最简单方便的Symbol引用】（从下载到使用的步骤）

一、首先找到iconfont图标库

iconfont-阿里巴巴矢量图标库

二、下载图标的步骤

• 先收藏
  
• 收藏（也叫入库，购物车的图标）
  
• 添加到项目（这个项目不是只我们开发中的项目，代指而已）
  
• 先创建项目（代指），在我的项目中（相当于你要用的这些图标在哪个项目中）
  
• 我的项目
  
• 这时才有添加的目标库
  
• 最后下载下来【下载后是个压缩包zip】
  

三、引用到vue项目中的步骤

• 解压，这是解压后的文件，我们用Symbol引用只要用到这个js文件
  
• 将其放到我们的icons目录下（其他不用管，那是另外两种引用方法用的）
  
• 然后找到vue的main.js入口，引入（填自己存放的地址）

/** iconfont
 * Symbol 引用
 */
import 'xxx/assets/icons/iconfont.js'

• 最后使用图标（只能使用我们下载时项目库中有的图标）

<span style="cursor:pointer" @click="handleViews($event, row)">
                    <svg class="icon" aria-hidden="true">
                      <use xlink:href="#icon-icon"></use>
                    </svg>
                  </span>

就是个use标签中填写【写什么呢？看我们下载时解压后的demo_index.html】

• 这个demo页面下面也有介绍
  
• 具体来说就是在iconfont.js中可以找到<symbol id=""...>这样的就可以引用为Symbol方式的svg

到此结束！iconfont就这样了