blackteay/uniapp-vue3-vite-ts-template
1
0
Fork 0
mirror of https://gitee.com/h_mo/uniapp-vue3-vite-ts-template synced 2025-04-06 03:58:03 +08:00
Code Issues Projects Releases Wiki Activity

feat: FontAwesomeIcon demo example

Browse Source
This commit is contained in:
h_mo 2022-10-05 21:51:49 +08:00
parent dd506ce576
commit 460387ca93
1 changed files with 67 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
src/demo/example/fontAwesomeIcon/index.vue
View File

@ -4,61 +4,71 @@
</script> </script>
<template> <template>
<AppProvider> <AppProvider>
<view>mode-不同风格</view> <view class="h2"> FontAwesomeIcon 图标组件基于font awesome icon v6.20</view>
<view> <FontAwesomeIcon name="house" counter="999" />solid </view> <view class="tip">
Tip: 由于字体文件太大,共7种风格图标, 7个字体文件,
在微信小程序中请不要引用全部字体,在组件目录index.scss中配置, 已测试: 支持H5, APP(安卓),
微信小程序
</view>
<view class="title">mode-不同风格,对应相应字体文件</view>
<view> <FontAwesomeIcon name="house" />solid (默认)</view>
<view> <FontAwesomeIcon mode="regular" name="house" />regular</view> <view> <FontAwesomeIcon mode="regular" name="house" />regular</view>
<view> <FontAwesomeIcon mode="light" name="house" />light</view> <view> <FontAwesomeIcon mode="light" name="house" />light</view>
<view> <FontAwesomeIcon mode="thin" name="house" />thin</view> <view> <FontAwesomeIcon mode="thin" name="house" />thin</view>
<view> <FontAwesomeIcon mode="duotone" name="house" />duotone</view> <view> <FontAwesomeIcon mode="duotone" name="house" />duotone</view>
<view>sharp-直角图标</view> <view class="title">sharp-直角图标(只支持solid),对应相应字体文件</view>
<view> <FontAwesomeIcon name="user" sharp counter="999" /> sharp </view> <view> <FontAwesomeIcon name="user" sharp counter="999" /> sharp </view>
<view>mode(brands)-品牌logo</view> <view class="title">mode(brands)-品牌logo,对应相应字体文件</view>
<view> <FontAwesomeIcon mode="brands" name="bilibili" /> bilibili </view> <view> <FontAwesomeIcon mode="brands" name="bilibili" /> bilibili </view>
<view> <FontAwesomeIcon mode="brands" name="alipay" /> alipay </view> <view> <FontAwesomeIcon mode="brands" name="alipay" /> alipay </view>
<view>color-颜色</view> <view class="title">color-颜色</view>
<view> <FontAwesomeIcon name="house" color="Tomato" />solid </view> <view> <FontAwesomeIcon name="house" />默认 </view>
<view> <FontAwesomeIcon mode="regular" name="house" color="Dodgerblue" />regular</view> <view> <FontAwesomeIcon name="house" color="Tomato" />Tomato </view>
<view> <FontAwesomeIcon mode="light" name="house" color="Mediumslateblue" />light</view> <view> <FontAwesomeIcon mode="regular" name="house" color="Dodgerblue" />Dodgerblue</view>
<view> <FontAwesomeIcon mode="brands" name="bilibili" color="Dodgerblue" /> brands </view> <view>
<FontAwesomeIcon mode="light" name="house" color="Mediumslateblue" />Mediumslateblue</view
>
<view> <FontAwesomeIcon mode="brands" name="bilibili" color="Dodgerblue" /> Dodgerblue </view>
<view>size-大小</view> <view class="title">size-大小(单位rpx)</view>
<view> <FontAwesomeIcon mode="light" name="house" size="24" />light 24rpx</view> <view> <FontAwesomeIcon mode="light" name="house" />(默认)</view>
<view> <FontAwesomeIcon mode="thin" name="house" size="44" />thin 44rpx</view> <view> <FontAwesomeIcon mode="light" name="house" size="24" />24rpx</view>
<view> <FontAwesomeIcon mode="duotone" name="house" size="64" />duotone 64rpx</view> <view> <FontAwesomeIcon mode="thin" name="house" size="44" />44rpx</view>
<view>bgColor-背景色</view> <view> <FontAwesomeIcon mode="duotone" name="house" size="64" />64rpx</view>
<view class="title">bgColor-背景色</view>
<view> <FontAwesomeIcon name="house" bg-color="DodgerBlue" />solid </view> <view> <FontAwesomeIcon name="house" bg-color="DodgerBlue" />solid </view>
<view> <FontAwesomeIcon mode="regular" name="house" bg-color="SkyBlue" />regular</view> <view> <FontAwesomeIcon mode="regular" name="house" bg-color="SkyBlue" />regular</view>
<view>rotate-旋转角度</view> <view class="title">rotate-旋转角度</view>
<view> <FontAwesomeIcon mode="duotone" name="house" rotate="63" />duotone 63</view> <view> <FontAwesomeIcon mode="duotone" name="house" rotate="63" />house 63</view>
<view> <FontAwesomeIcon mode="duotone" name="snowboarding" rotate="58" />duotone 58</view> <view> <FontAwesomeIcon mode="duotone" name="snowboarding" rotate="58" />snowboarding 58</view>
<view>rotateFlip-旋转-翻转</view> <view class="title">rotateFlip-旋转-翻转</view>
<view> <FontAwesomeIcon mode="duotone" name="snowboarding" />duotone 正常</view> <view> <FontAwesomeIcon mode="duotone" name="snowboarding" />正常</view>
<view> <view>
<FontAwesomeIcon mode="duotone" name="snowboarding" rotate-flip="horizontal" /> <FontAwesomeIcon mode="duotone" name="snowboarding" rotate-flip="horizontal" />
duotone 水平翻转 水平翻转
</view> </view>
<view> <view>
<FontAwesomeIcon mode="duotone" name="snowboarding" rotate-flip="vertical" />duotone 垂直翻转 <FontAwesomeIcon mode="duotone" name="snowboarding" rotate-flip="vertical" />垂直翻转
</view> </view>
<view> <view>
<FontAwesomeIcon mode="duotone" name="snowboarding" rotate-flip="both" />duotone 垂直水平翻转 <FontAwesomeIcon mode="duotone" name="snowboarding" rotate-flip="both" />垂直水平翻转
</view> </view>
<view>beat-缩放动画</view> <view class="title">beat-缩放动画</view>
<FontAwesomeIcon name="circle-plus" beat /> <FontAwesomeIcon name="circle-plus" beat />
<FontAwesomeIcon name="heart" beat /> <FontAwesomeIcon name="heart" beat />
<view>duration-动画持续时间</view> <view class="title">duration-动画持续时间</view>
<FontAwesomeIcon name="heart" beat duration="1.5" /> <FontAwesomeIcon name="heart" beat duration="1.5" />
<view>scale-缩放比例</view> <view class="title">scale-缩放比例</view>
<FontAwesomeIcon name="heart" beat duration="1.5" scale="2.0" /> <FontAwesomeIcon name="heart" beat duration="1.5" scale="2.0" />
<view>fade-淡入淡出动画 </view> <view class="title">fade-淡入淡出动画 </view>
<FontAwesomeIcon name="heart" fade /> <FontAwesomeIcon name="heart" fade />
<view>opacity-透明度值 </view> <view class="title">opacity-透明度值 </view>
<FontAwesomeIcon name="heart" fade opacity="0.2" /> <FontAwesomeIcon name="heart" fade opacity="0.2" />
<view>beat+fade-跳动+淡入淡出动画 </view> <view class="title">beat+fade-跳动+淡入淡出动画 </view>
<FontAwesomeIcon name="heart" beat fade opacity="0.68" duration="1.5" scale="2.0" /> <FontAwesomeIcon name="heart" beat fade opacity="0.68" duration="1.5" scale="2.0" />
<view>bounce-弹跳动画 </view> <view class="title">bounce-弹跳动画 </view>
<FontAwesomeIcon name="basketball" bounce /> <FontAwesomeIcon name="basketball" bounce />
<FontAwesomeIcon name="volleyball" bounce /> <FontAwesomeIcon name="volleyball" bounce />
<FontAwesomeIcon name="frog" bounce /> <FontAwesomeIcon name="frog" bounce />
@ -75,7 +85,7 @@
landScaleY: 1, landScaleY: 1,
}" }"
/> />
<view>flip-翻转动画</view> <view class="title">flip-翻转动画</view>
<FontAwesomeIcon name="compact-disc" flip /> <FontAwesomeIcon name="compact-disc" flip />
<FontAwesomeIcon name="camera-rotate" flip /> <FontAwesomeIcon name="camera-rotate" flip />
<FontAwesomeIcon name="cassette-tape" flip /> <FontAwesomeIcon name="cassette-tape" flip />
@ -89,11 +99,11 @@
/> />
<FontAwesomeIcon name="money-check-dollar" flip duration="3" /> <FontAwesomeIcon name="money-check-dollar" flip duration="3" />
<view>shake-抖动动画</view> <view class="title">shake-抖动动画</view>
<FontAwesomeIcon name="bell" shake /> <FontAwesomeIcon name="bell" shake />
<FontAwesomeIcon name="stopwatch" shake /> <FontAwesomeIcon name="stopwatch" shake />
<FontAwesomeIcon name="bomb" shake /> <FontAwesomeIcon name="bomb" shake />
<view>spin-旋转动画</view> <view class="title">spin-旋转动画</view>
<FontAwesomeIcon name="sync" spin duration="2" /> <FontAwesomeIcon name="sync" spin duration="2" />
<FontAwesomeIcon name="circle-notch" spin duration="1.5" /> <FontAwesomeIcon name="circle-notch" spin duration="1.5" />
<FontAwesomeIcon name="cog" spin duration="2" /> <FontAwesomeIcon name="cog" spin duration="2" />
@ -107,15 +117,20 @@
spinIterationCount="3" spinIterationCount="3"
duration="2" duration="2"
/> />
<view>border-边框</view> <view class="title">border-边框</view>
<FontAwesomeIcon name="arrow-right" border /> <FontAwesomeIcon name="arrow-right" border />
<FontAwesomeIcon name="arrow-right" border :borderConfig="{ color: '#000' }" /> <FontAwesomeIcon name="arrow-right" border :borderConfig="{ color: '#000' }" />
<view>float-浮动定位</view>
<view class="title">counter-计数</view>
<view> <FontAwesomeIcon mode="light" name="house" counter="999" />99+</view>
<view> <FontAwesomeIcon mode="thin" name="house" counter="65" />65</view>
<view> <FontAwesomeIcon mode="duotone" name="house" counter="14" />14</view>
<view class="title">float-浮动定位</view>
<view> <view>
<FontAwesomeIcon name="arrow-right" float="right" /> <FontAwesomeIcon name="arrow-right" float="right" />
<FontAwesomeIcon name="arrow-left" float="left" /> <FontAwesomeIcon name="arrow-left" float="left" />
</view> </view>
<view style="clear: both">stack-堆叠</view> <view class="title" style="clear: both">stack-堆叠</view>
<FontAwesomeIcon stack> <FontAwesomeIcon stack>
<template #default="slotProps"> <template #default="slotProps">
<FontAwesomeIcon name="circle" :stackChild="slotProps.stack" stack-x="2" /> <FontAwesomeIcon name="circle" :stackChild="slotProps.stack" stack-x="2" />
@ -178,4 +193,20 @@
</FontAwesomeIcon> </FontAwesomeIcon>
</AppProvider> </AppProvider>
</template> </template>
<style lang="scss" scoped></style> <style lang="scss" scoped>
.h2 {
font-size: 32rpx;
font-weight: 900;
}
.tip {
font-size: 26rpx;
font-weight: 500;
color: #ff253a;
}
.title {
font-size: 28rpx;
font-weight: 600;
margin: 28rpx 0 8rpx 0;
color: #3b82f6;
}
</style>