vue iconfont图标怎么使用

使用 Vue 和 Iconfont 可以轻松地将自定义图标添加到您的 Vue 应用程序中。以下是使用 Iconfont 添加自定义图标的步骤：

1. 首先，登录您的 Iconfont 账户并创建一个项目。然后，从图标库中选择您想要使用的图标并添加到您的项目中。

2. 在您的 Vue 项目中安装 @iconfont/vue-iconfont。可以使用 npm 或 yarn 安装：

   npm install @iconfont/vue-iconfont

或者

   yarn add @iconfont/vue-iconfont

3. 在您的 Vue 组件中使用 @iconfont/vue-iconfont。

   <script>
   import IconFont from '@iconfont/vue-iconfont';

   export default {
     components: {
       IconFont,
     },
   };
   </script>

4. 然后，在您的组件模板中使用 IconFont 组件来渲染图标。

   <template>
     <div>
       <IconFont type="icon-name" />
     </div>
   </template>

这里，“icon-name”是您在 Iconfont 中选择的图标名称。

5. 最后，在您的项目中配置 Iconfont CDN。

   <script src="//at.alicdn.com/t/font_xxxxxxxx.js"></script>

将“xxxxxxxx”替换为您的项目的真实数字。

现在，您已经成功地将自定义图标添加到您的 Vue 应用程序中。