更新记录

1.1.2（2020-07-29）

增加了阻止冒泡事件的属性stop，默认为false

1.1.1（2020-07-02）

修复了easycom冲突问题 使用组件时组件名为

1.1.0（2020-05-14）

适配easycom组件模式，在pages.json的easycom节点进行个性化设置即可。 在easycom节点中custom子节点添加一行"(.*)": "@/components/Ammmm-$1/index.vue"即可无需引入组件直接使用

平台兼容性

FontAwesome 5.13.0

uni-app 通用组件 支持App, H5, 微信小程序 （其他端没看）
基于Font-Awesome 5.13.0 版构建, 看到插件市场只有4.7版本的，就自己写了一个贡献给大家。
不推荐使用在微信小程序中，因为光字体的css文件就已经很大了(足足700kb)
组件名FontAwesome

使用方式

在script中引用此组件

import FontAwesome from '@/components/Ammmm-FontAwesome/index.vue'
export default {
    components: {
        FontAwesome
    }
}

在<template>中使用此组件

<FontAwesome type="fas fa-angle-right" size="40" color="red" @click="testClick"></FontAwesome>

图标效果参考：Font Awesome https://fa5.dashgame.com/#/图标

easycom

如果项目采用了easycom组件模式可以在pages.json中配置自定义格式,这样就不用手动引入组件了

"easycom": {
    "autoscan": true,
    "custom": {
        "Am-(.*)": "@/components/Am-$1/index.vue" // 加入此行即可
    }
}

采用easycom组件模式后在<template>中使用组件需要带前缀

<Am-FontAwesome type="fas fa-angle-right" size="40" color="red" @click="testClick"></Am-FontAwesome>

属性说明

stack属性说明

stack是一个length为2的数组，分别是下层的图标length: 0和上层的图标length: 1
分别为两个对象[Object, Object]每个对象属性和普通组件属性相同
唯一不同的就是需要加上stackIndex属性

代码示例

<template>
    <view>
        <view class="demoList">
            <text class="title">颜色Color</text>
            <view class="scrollX" style="box-sizing: border-box; padding: 30rpx;">
                <view class="list">
                    <Am-FontAwesome type="fas fa-camera" size="100" fw color="Tomato"></Am-FontAwesome>
                </view>
                <view class="list">
                    <Am-FontAwesome type="fas fa-camera" size="100" fw color="Dodgerblue"></Am-FontAwesome>
                </view>
                <view class="list">
                    <Am-FontAwesome type="fas fa-camera" size="100" fw color="Mediumslateblue"></Am-FontAwesome>
                </view>
                <view class="list">
                    <Am-FontAwesome type="fas fa-camera" size="100" fw color="blue"></Am-FontAwesome>
                </view>
                <view class="list">
                    <Am-FontAwesome type="fas fa-camera" size="100" fw color="green"></Am-FontAwesome>
                </view>
                <view class="list">
                    <Am-FontAwesome type="fas fa-camera" size="100" fw color="pink"></Am-FontAwesome>
                </view>
                <view class="list">
                    <Am-FontAwesome type="fas fa-camera" size="100" fw color="red"></Am-FontAwesome>
                </view>
                <view class="list">
                    <Am-FontAwesome type="fas fa-camera" size="100" fw color="yellow"></Am-FontAwesome>
                </view>
            </view>
        </view>
        <view class="demoList">
            <text class="title">大小FontSize</text>
            <view class="scrollX" style="box-sizing: border-box; padding: 30rpx;">
                <view class="list">
                    <Am-FontAwesome type="fas fa-camera" size="30" fw></Am-FontAwesome>
                </view>
                <view class="list">
                    <Am-FontAwesome type="fas fa-camera" size="40" fw></Am-FontAwesome>
                </view>
                <view class="list">
                    <Am-FontAwesome type="fas fa-camera" size="50" fw></Am-FontAwesome>
                </view>
                <view class="list">
                    <Am-FontAwesome type="fas fa-camera" size="60" fw></Am-FontAwesome>
                </view>
                <view class="list">
                    <Am-FontAwesome type="fas fa-camera" size="70" fw></Am-FontAwesome>
                </view>
                <view class="list">
                    <Am-FontAwesome type="fas fa-camera" size="80" fw></Am-FontAwesome>
                </view>
                <view class="list">
                    <Am-FontAwesome type="fas fa-camera" size="90" fw></Am-FontAwesome>
                </view>
                <view class="list">
                    <Am-FontAwesome type="fas fa-camera" size="100" fw></Am-FontAwesome>
                </view>
            </view>
        </view>
        <view class="demoList">
            <text class="title">旋转/镜像 Rotate/Flip</text>
            <view class="scrollX" style="box-sizing: border-box; padding: 30rpx;">
                <view class="list">
                    <Am-FontAwesome type="fas fa-snowboarding" size="100" fw></Am-FontAwesome>
                </view>
                <view class="list">
                    <Am-FontAwesome type="fas fa-snowboarding" size="100" fw rotate="90"></Am-FontAwesome>
                </view>
                <view class="list">
                    <Am-FontAwesome type="fas fa-snowboarding" size="100" fw rotate="180"></Am-FontAwesome>
                </view>
                <view class="list">
                    <Am-FontAwesome type="fas fa-snowboarding" size="100" fw rotate="270"></Am-FontAwesome>
                </view>
                <view class="list">
                    <Am-FontAwesome type="fas fa-snowboarding" size="100" fw flip="horizontal"></Am-FontAwesome>
                </view>
                <view class="list">
                    <Am-FontAwesome type="fas fa-snowboarding" size="100" fw flip="vertical"></Am-FontAwesome>
                </view>
                <view class="list">
                    <Am-FontAwesome type="fas fa-snowboarding" size="100" fw flip="both"></Am-FontAwesome>
                </view>
            </view>
        </view>
        <view class="demoList">
            <text class="title">动画 Animating</text>
            <view class="scrollX" style="box-sizing: border-box; padding: 30rpx;">
                <view class="list">
                    <Am-FontAwesome type="fas fa-spinner" size="100" fw spin></Am-FontAwesome>
                </view>
                <view class="list">
                    <Am-FontAwesome type="fas fa-circle-notch" size="100" fw spin></Am-FontAwesome>
                </view>
                <view class="list">
                    <Am-FontAwesome type="fas fa-sync" size="100" fw spin></Am-FontAwesome>
                </view>
                <view class="list">
                    <Am-FontAwesome type="fas fa-cog" size="100" fw spin></Am-FontAwesome>
                </view>
                <view class="list">
                    <Am-FontAwesome type="fas fa-spinner" size="100" fw pulse></Am-FontAwesome>
                </view>
                <view class="list">
                    <Am-FontAwesome type="fas fa-stroopwafel" size="100" fw spin></Am-FontAwesome>
                </view>
            </view>
        </view>
        <view class="demoList">
            <text class="title">拖动/边框 PulledIcons</text>
            <view class="scrollX" style="box-sizing: border-box; padding: 30rpx;">
                <view class="list">
                    <Am-FontAwesome type="fas fa-quote-left" size="100" fw pullLeft></Am-FontAwesome>
                    <text>靠左</text>
                </view>
                <view class="list" style="margin-left: 40rpx;">
                    <Am-FontAwesome type="fas fa-arrow-right" size="100" fw pullRight border></Am-FontAwesome>
                    <text>靠右+边框</text>
                </view>
            </view>
        </view>
        <view class="demoList">
            <text class="title">堆叠 Stack</text>
            <view class="scrollX" style="box-sizing: border-box; padding: 30rpx;">
                <view class="list">
                    <Am-FontAwesome size="60" fw :stack="[
                        {
                            type: 'fas fa-square',
                            stackIndex: 2
                        }, {
                            type: 'fab fa-twitter',
                            stackIndex: 1,
                            inverse: true
                        }
                    ]"></Am-FontAwesome>
                    <Am-FontAwesome size="60" fw :stack="[
                        {
                            type: 'fas fa-circle',
                            stackIndex: 2
                        }, {
                            type: 'fas fa-flag',
                            stackIndex: 1,
                            inverse: true
                        }
                    ]"></Am-FontAwesome>
                    <Am-FontAwesome size="60" fw :stack="[
                        {
                            type: 'fas fa-square',
                            stackIndex: 2
                        }, {
                            type: 'fas fa-terminal',
                            stackIndex: 1,
                            inverse: true
                        }
                    ]"></Am-FontAwesome>
                    <Am-FontAwesome size="100" fw :stack="[
                        {
                            type: 'fas fa-camera',
                            stackIndex: 1
                        }, {
                            type: 'fas fa-ban',
                            stackIndex: 2,
                            color: 'Tomato'
                        }
                    ]"></Am-FontAwesome>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {

            };
        },
        methods: {

        }
    }
</script>

<style lang="scss">
    .demoList {
        display: flex;
        flex-direction: column;
        > .title {
            font-size: 32rpx;
            font-weight: bold;
            color: #333333;
            background: #E3E3E3;
            padding: 20rpx 30rpx;
            box-sizing: border-box;
        }
    }
</style>