安装
npm install vue-awesome
引入
import Vue from ‘vue‘ /* 在下面两种方式中任选一种 */ // 仅引入用到的图标以减小打包体积 import ‘vue-awesome/icons/flag‘ // 或者在不关心打包体积时一次引入全部图标 import ‘vue-awesome/icons‘ /* 任选一种注册组件的方式 */ import Icon from ‘vue-awesome/components/Icon‘ // 全局注册(在 `main .js` 文件中) Vue.component(‘icon‘, Icon) // 或局部注册(在组件文件中) export default { components: { Icon } }
使用方法
<!-- 基础用法 --> <icon name="beer"></icon> <!-- 添加选项 --> <icon name="sync" scale="2" spin></icon> <icon name="comment" flip="horizontal"></icon> <icon name="code-branch" label="Forked Repository"></icon> <!-- 堆叠图标 --> <icon label="No Photos"> <icon name="camera"></icon> <icon name="ban" scale="2" class="alert"></icon> </icon>
旋转动画
<icon name="spinner" spin></icon> <icon name="spinner" pulse></icon>
其他图标
请访问 Font Awesome 官网以查询可以使用的 name
值,如 beer
、file
、camera
等。
原文地址:https://www.cnblogs.com/yinian/p/8780103.html
时间: 2024-10-09 09:59:48