Vue引入阿里妈妈iconfont图标

在Vue项目中引入阿里妈妈（iconfont）的图标，你需要进行以下几个步骤：

1. 在iconfont网站上选取所需图标，添加到项目，并下载到本地。
2. 解压下载的文件，将iconfont.css和iconfont.js（如果有）复制到Vue项目的assets或static文件夹中。
3. 在Vue组件中通过<style>标签引入iconfont.css，并通过<svg>标签使用图标。

以下是一个简单的示例：

首先，将iconfont.css放置在Vue项目的assets文件夹中，例如：/src/assets/iconfont.css。

然后，在你的Vue组件中这样使用：

<template>
  <div>
    <!-- 使用图标，class名需要参照iconfont.css中定义的 -->
    <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-example"></use>
    </svg>
  </div>
</template>
 
<script>
export default {
  name: 'MyIconComponent'
}
</script>
 
<style>
/* 引入iconfont.css */
@import "~@/assets/iconfont.css";
 
.icon {
  width: 1em; height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

确保你的Vue项目中的webpack配置能够处理svg和xlink:href。如果你使用的是Vue CLI创建的项目，通常这个配置默认就有。

在iconfont.css中，图标的类名通常是以icon-开头的，你需要根据实际情况替换#icon-example中的example为你需要的图标名称。

注意：如果你的项目中已经使用了vue-awesome-swiper或类似的Swiper插件，那么可能会出现图标不显示的问题。这是因为Swiper会改变svg的display属性。要解决这个问题，你可以在全局样式中添加以下代码：

.swiper-container svg {
  display: inline-block;
}

这样应该可以解决大部分的兼容性问题。