iconfont图标如何在vue中使用

1. 安装iconfont图标库

首先需要在iconfont官网下载需要使用的图标库，并将其导入到项目中。这里以阿里巴巴矢量图标库为例，下载完成后会得到一个名为“iconfont”的文件夹，将其复制到项目的public目录下。

2. 在main.js中引入iconfont图标库

在main.js中，我们需要引入iconfont图标库并将其挂载到Vue实例中。具体代码如下：

import Vue from 'vue';
import App from './App.vue';
import './public/iconfont/iconfont.css'; // 引入iconfont图标库

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
}).$mount('#app');

3. 在vue组件中使用iconfont图标

在vue组件中使用iconfont图标需要先在html中创建一个标签，然后将需要使用的图标类名赋值给该标签的class属性。

例如，我们需要使用阿里巴巴矢量图标库中的“搜索”图标，其类名为“icon-search”，则在vue组件中使用该图标的代码如下：

<template>
  <div>
    <i class="iconfont icon-search"></i>
  </div>
</template>

注意，由于使用了iconfont图标库，需要将该标签设置为“i”标签。同时，需要将图标的类名添加到“class”属性中。

4. 样式调整

使用iconfont图标时，可以通过修改css样式来调整图标的大小、颜色、旋转等。

例如，要将搜索图标的大小调整为30px，颜色调整为红色，代码如下：

<template>
  <div>
    <i class="iconfont icon-search" style="font-size: 30px; color: red;"></i>
  </div>
</template>

通过在标签内部添加style属性，可以直接对图标进行样式调整。

以上就是在vue中使用iconfont图标的方法。