使用 iconfont 的正确姿势

利用iconfont网站

参考文档，官方推荐使用symbol引用的方式，使用步骤如下：

1. 首先在网站上选择你要使用的icon

2. 拷贝生成的symbol代码

https://at.alicdn.com/t/font_3309602_39cw1afalyh.js

3. 在项目中使用

// 加入通用css代码
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
// 引入到项目中，它会在body生成一个svg标签，里面有收集的icon
<script src="https://at.alicdn.com/t/font_3309602_39cw1afalyh.js"></script>
// 使用
<svg class="icon">
  <use href="#icon-meizhuang"></use>
</svg>

在vue项目中使用svg作为icon

集成 svg 图标

首先在项目中新建一个vue组件IconCom，全用来放置icon，这些icon就从iconfont网站上下载，选中一个icon，然后复制svg的代码。

把代码放置到组件中的symbol标签里面，注意去掉svg代码里其他内容，只需要path标签的内容。如下icon组件包含很多symbol标签，每一个symbol标签都是一个icon组件。

<template>
  <svg width="0" height="0">
    <defs>
      <symbol id="more"  viewBox="0 0 100 100">
          <circle r="5" cx="20" cy="25" fill="currentColor" />
          <circle r="5" cx="20" cy="50" fill="currentColor" />
          <circle r="5" cx="20" cy="75" fill="currentColor" />
          <line x1="40" y1="25" x2="90" y2="25" stroke="currentColor" stroke-width="8" />
          <line x1="40" y1="50" x2="90" y2="50" stroke="currentColor" stroke-width="8" />
          <line x1="40" y1="75" x2="90" y2="75" stroke="currentColor" stroke-width="8" />
      </symbol>
      <symbol id="filledArrowRight"  viewBox="0 0 100 100">
          <polyline fill="currentColor" points="20 10, 80 50, 20 90"></polyline>
      </symbol>
      <symbol id="arrowRight"  viewBox="0 0 100 100">
          <polyline points="20 10, 80 50, 20 90" stroke-width="3" stroke="currentColor" fill="transparent"></polyline>
      </symbol>
      <symbol id="car" viewBox="0 0 1024 1024">
          <path d="M689.536 192c26.816 0 50.794667 16.64 60.202667 41.706667l78.08 207.978666 67.754666-39.125333 27.562667 47.786667-50.709333 29.269333a64.213333 64.213333 0 0 1 27.157333 52.522667v202.368a64.298667 64.298667 0 0 1-64.298667 64.298666h-27.648V874.666667h-55.146666v-75.861334H255.957333V874.666667H200.853333v-75.861334H173.184a64.298667 64.298667 0 0 1-64.32-64.298666v-202.368a64.213333 64.213333 0 0 1 27.2-52.522667L85.333333 450.346667l27.584-47.786667 67.733334 39.104 78.08-207.957333A64.298667 64.298667 0 0 1 318.933333 192h370.602667z m145.728 342.954667H173.184v199.552h662.101333v-199.552z m-556.288 50.090666a41.386667 41.386667 0 1 1 0 82.752 41.386667 41.386667 0 0 1 0-82.752z m455.125333 0a41.386667 41.386667 0 1 1 0 82.752 41.386667 41.386667 0 0 1 0-82.752z m-44.565333-328.746666H318.933333l-79.402666 211.52h529.386666l-79.36-211.52z m-79.573333 46.037333v62.058667h-206.869334v-62.08h206.869334z" p-id="6572"></path>
      </symbol>
    </defs>
  </svg>  
</template>

把这个组件在页面中引用，但是不会显示出所有icon来，因为symbol里面的内容只能通过use来使用。

封装Icon组件

<template>
  <div class="icon-wrapper" :style="{...style}">
    <svg class="icon">
      <use :href="iconName"></use>
    </svg>
  </div>
</template>
.icon-wrapper {
  display: inline-block;
}
.icon {
  width: 100%;
  height: 100%;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

使用

<Icon name="arrowRight" class="common-icon"></Icon>