mirror of
https://gitee.com/h_mo/uniapp-vue3-vite-ts-template
synced 2025-04-05 06:12:44 +08:00
perf-删除fontAwesomeIcon,使用iconify
This commit is contained in:
Huang
parent
09b5456259
commit
58ed65f186
@ -3,16 +3,8 @@
|
||||
import { useAuthStore } from '@/state/modules/auth';
|
||||
import { removeInterceptor, setupInterceptors } from '@/utils/interceptors';
|
||||
import { useRouterStore } from '@/state/modules/router';
|
||||
/* #ifdef MP-WEIXIN || MP-ALIPAY */
|
||||
import { dynamicLoadFontFace } from '@/utils/fonts';
|
||||
/* #endif */
|
||||
|
||||
onLaunch(() => {
|
||||
console.log('App Launch');
|
||||
/** 微信小程序和阿里小程序动态远程加载字体 * */
|
||||
/* #ifdef MP-WEIXIN || MP-ALIPAY */
|
||||
dynamicLoadFontFace();
|
||||
/* #endif */
|
||||
removeInterceptor();
|
||||
|
||||
setupInterceptors();
|
||||
|
||||
@ -1,9 +0,0 @@
|
||||
@import 'scss/fontawesome';
|
||||
|
||||
@import 'scss/solid';
|
||||
@import 'scss/brands';
|
||||
@import 'scss/regular';
|
||||
@import 'scss/light';
|
||||
@import 'scss/thin';
|
||||
@import 'scss/duotone';
|
||||
@import 'scss/sharp-solid';
|
||||
@ -1,208 +0,0 @@
|
||||
<script lang="ts" setup name="FontAwesomeIcon">
|
||||
/**
|
||||
* 基于 Font Awesome Icon v6.2.0
|
||||
* solid 支持
|
||||
* regular 支持
|
||||
* brands 支持
|
||||
* light 支持
|
||||
* sharp 支持
|
||||
* thin 支持
|
||||
* duotone 支持
|
||||
*/
|
||||
import { FontAwesomeIconProps } from '@/components/FontAwesomeIcon/props';
|
||||
import { computed, ref } from 'vue';
|
||||
const props = defineProps(FontAwesomeIconProps);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'click'): void;
|
||||
}>();
|
||||
|
||||
const singleBeat = computed(() => props.beat && !props.fade);
|
||||
const singleFade = computed(() => !props.beat && props.fade);
|
||||
const beatFade = computed(() => props.beat && props.fade);
|
||||
const count = computed(() => {
|
||||
return props.counter > props.counterMax
|
||||
? `${props.counterMax}+`
|
||||
: props.counter;
|
||||
});
|
||||
const wrapClassObject = computed(() => {
|
||||
return [
|
||||
props.float ? `fa-pull-${props.float}` : '',
|
||||
props.border ? 'fa-border' : '',
|
||||
props.rotate ? 'fa-rotate-by' : '',
|
||||
props.rotateFlip ? `fa-flip-${props.rotateFlip}` : '',
|
||||
singleBeat.value ? `fa-beat` : '',
|
||||
singleFade.value ? `fa-fade` : '',
|
||||
beatFade.value ? `fa-beat-fade` : '',
|
||||
props.bounce ? 'fa-bounce' : '',
|
||||
props.flip ? 'fa-flip' : '',
|
||||
props.shake ? 'fa-shake' : '',
|
||||
props.spin ? 'fa-spin' : '',
|
||||
props.spinReverse ? 'fa-spin-reverse' : '',
|
||||
props.spinPulse ? 'fa-spin-pulse' : '',
|
||||
props.stack ? 'fa-stack' : '',
|
||||
props.stackChild ? `fa-stack-${props.stackX}x` : '',
|
||||
props.stackInverse ? 'fa-inverse' : '',
|
||||
props.counter ? 'layers' : '',
|
||||
];
|
||||
});
|
||||
const wrapStyleObject = computed(() => {
|
||||
return Object.assign(
|
||||
{
|
||||
'--fa-animation-duration': `${props.duration}s`,
|
||||
},
|
||||
props.bgColor
|
||||
? {
|
||||
'background-color': props.bgColor,
|
||||
}
|
||||
: {},
|
||||
props.rotate ? { '--fa-rotate-angle': `${props.rotate}deg` } : {},
|
||||
singleBeat.value ? { '--fa-beat-scale': `${props.scale}` } : {},
|
||||
singleFade.value ? { '--fa-fade-opacity': `${props.opacity}` } : {},
|
||||
beatFade.value
|
||||
? {
|
||||
'--fa-beat-fade-scale': `${props.scale}`,
|
||||
'--fa-beat-fade-opacity': `${props.opacity}`,
|
||||
}
|
||||
: {},
|
||||
props.bounce
|
||||
? {
|
||||
'--fa-bounce-rebound': props.bounceConfig?.rebound || '-0.125em',
|
||||
'--fa-bounce-height': props.bounceConfig?.height || '-0.5em',
|
||||
'--fa-bounce-start-scale-x':
|
||||
props.bounceConfig?.startScaleX || '1.1',
|
||||
'--fa-bounce-start-scale-y':
|
||||
props.bounceConfig?.startScaleY || '0.9',
|
||||
'--fa-bounce-jump-scale-x': props.bounceConfig?.jumpScaleX || '0.9',
|
||||
'--fa-bounce-jump-scale-y': props.bounceConfig?.jumpScaleY || '1.1',
|
||||
'--fa-bounce-land-scale-x':
|
||||
props.bounceConfig?.landScaleX || '1.05',
|
||||
'--fa-bounce-land-scale-y':
|
||||
props.bounceConfig?.landScaleY || '0.95',
|
||||
}
|
||||
: {},
|
||||
props.flip
|
||||
? {
|
||||
'--fa-flip-x': props.flipConfig?.x || '0',
|
||||
'--fa-flip-y': props.flipConfig?.y || '1',
|
||||
'--fa-flip-z': props.flipConfig?.z || '0',
|
||||
'--fa-flip-angle': props.flipConfig?.angle || '-180deg',
|
||||
}
|
||||
: {},
|
||||
props.spin
|
||||
? {
|
||||
'--fa-animation-delay': props.spinDelay,
|
||||
'--fa-animation-iteration-count': props.spinIterationCount,
|
||||
'--fa-animation-timing': props.spinTiming,
|
||||
}
|
||||
: {},
|
||||
props.border
|
||||
? {
|
||||
'--fa-border-color': props.borderConfig?.color || '#eee',
|
||||
'--fa-border-padding': props.borderConfig?.padding || '.04em .26em',
|
||||
'--fa-border-radius': props.borderConfig?.radius || '.1em',
|
||||
'--fa-border-style': props.borderConfig?.style || 'solid',
|
||||
'--fa-border-width': props.borderConfig?.width || '.08em',
|
||||
}
|
||||
: {},
|
||||
props.float
|
||||
? {
|
||||
'--fa-pull-margin': props.pullMargin,
|
||||
}
|
||||
: {},
|
||||
props.stackChild
|
||||
? {
|
||||
'--fa-stack-z-index': props.stackZIndex,
|
||||
}
|
||||
: {},
|
||||
props.stackChild && props.stackInverse
|
||||
? {
|
||||
'--fa-inverse': props.stackInverseColor,
|
||||
}
|
||||
: {},
|
||||
);
|
||||
});
|
||||
|
||||
const iconClassObject = computed(() => {
|
||||
return [
|
||||
`fa-${props.mode}`,
|
||||
`fa-${props.name}`,
|
||||
props.frameSize ? `fa-flip-${props.frameSize}` : '',
|
||||
props.sharp ? 'fass' : '',
|
||||
];
|
||||
});
|
||||
const iconStyleObject = computed(() => {
|
||||
return Object.assign(
|
||||
{},
|
||||
props.color
|
||||
? {
|
||||
color: props.color,
|
||||
}
|
||||
: {},
|
||||
props.size
|
||||
? {
|
||||
'font-size': `${props.size}rpx`,
|
||||
}
|
||||
: {},
|
||||
);
|
||||
});
|
||||
|
||||
const counterStyleObject = computed(() => {
|
||||
return {
|
||||
'--fa-counter-background-color': props.counterMgColor,
|
||||
};
|
||||
});
|
||||
|
||||
const onClick = () => {
|
||||
emit('click');
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<view
|
||||
@click="onClick"
|
||||
class="icon-wrap"
|
||||
:class="wrapClassObject"
|
||||
:style="wrapStyleObject"
|
||||
>
|
||||
<template v-if="props.stack">
|
||||
<slot :stack="props.stack"></slot>
|
||||
</template>
|
||||
<template v-else>
|
||||
<text class="icon" :style="iconStyleObject" :class="iconClassObject" />
|
||||
</template>
|
||||
<text v-if="props.counter" class="counter" :style="counterStyleObject">{{
|
||||
count
|
||||
}}</text>
|
||||
</view>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.icon-wrap {
|
||||
display: inline-block;
|
||||
&.layers {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
.icon {
|
||||
display: inline-block;
|
||||
color: inherit;
|
||||
}
|
||||
.counter {
|
||||
display: inline-block;
|
||||
background-color: var(--fa-counter-background-color, #ff253a);
|
||||
border-radius: 1em;
|
||||
box-sizing: border-box;
|
||||
color: #fff;
|
||||
line-height: 1;
|
||||
max-width: 5em;
|
||||
min-width: 1.5em;
|
||||
overflow: hidden;
|
||||
padding: 0.25em 0.5em;
|
||||
position: absolute;
|
||||
right: -0.35em;
|
||||
text-overflow: ellipsis;
|
||||
top: 0;
|
||||
transform: scale(0.35);
|
||||
transform-origin: top right;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,352 +0,0 @@
|
||||
// type StyleType = 'solid' | 'regular' | 'light' | 'thin' | 'duotone' | 'brands' | 'sharp';
|
||||
|
||||
export const FontAwesomeIconProps = {
|
||||
/** icon name
|
||||
* @link: https://fontawesome.com/icons
|
||||
*/
|
||||
name: {
|
||||
type: String,
|
||||
default: 'default',
|
||||
// required: true,
|
||||
},
|
||||
/** icon 风格
|
||||
* 不同风格对应不同的css, 使用时请加载相应的css
|
||||
*/
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'solid',
|
||||
validator(value: string) {
|
||||
// The value must match one of these strings
|
||||
return [
|
||||
'solid',
|
||||
'regular',
|
||||
'light',
|
||||
'thin',
|
||||
'duotone',
|
||||
'brands',
|
||||
].includes(value);
|
||||
},
|
||||
},
|
||||
/** icon sharp
|
||||
* 对应sharp css
|
||||
*/
|
||||
sharp: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
/**
|
||||
* icon sizing
|
||||
* @description 2xs-xs-sm-lg-xl-2xl 1-10x
|
||||
*/
|
||||
frameSize: {
|
||||
type: String,
|
||||
},
|
||||
/**
|
||||
* icon size
|
||||
* @description 大小 单位 rpx
|
||||
*/
|
||||
size: {
|
||||
type: [Number, String],
|
||||
},
|
||||
/**
|
||||
* icon color
|
||||
* @description 图标颜色
|
||||
*/
|
||||
color: {
|
||||
type: String,
|
||||
},
|
||||
/**
|
||||
* icon color
|
||||
* @description 背景色
|
||||
*/
|
||||
bgColor: {
|
||||
type: String,
|
||||
},
|
||||
/** icon rotate
|
||||
* @description 旋转角度
|
||||
*/
|
||||
rotate: {
|
||||
type: [Number, String, Boolean],
|
||||
default: false,
|
||||
},
|
||||
/** icon rotateFlip
|
||||
* @description 旋转-翻转
|
||||
*/
|
||||
rotateFlip: {
|
||||
type: [String, Boolean],
|
||||
default: false,
|
||||
validator(value: string) {
|
||||
// The value must match one of these strings
|
||||
return ['horizontal', 'vertical', 'both', 'inherit', false].includes(
|
||||
value,
|
||||
);
|
||||
},
|
||||
},
|
||||
/**
|
||||
* icon beat
|
||||
* @description 缩放动画
|
||||
*/
|
||||
beat: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
/**
|
||||
* icon duration
|
||||
* @description 动画持续时间(所有动画使用) s
|
||||
*/
|
||||
duration: {
|
||||
type: [Number, String],
|
||||
default: 1,
|
||||
},
|
||||
/**
|
||||
* icon scale
|
||||
* @description 动画比例(跳动动画使用)
|
||||
*/
|
||||
scale: {
|
||||
type: [Number, String],
|
||||
default: '1.25',
|
||||
},
|
||||
/**
|
||||
* icon fade
|
||||
* @description 淡入淡出动画
|
||||
*/
|
||||
fade: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
/**
|
||||
* icon opacity
|
||||
* @description 透明度值 (淡入淡出动画使用)
|
||||
*/
|
||||
opacity: {
|
||||
type: [Number, String],
|
||||
default: '0.6',
|
||||
},
|
||||
/**
|
||||
* icon bounce
|
||||
* @description 弹跳动画
|
||||
*/
|
||||
bounce: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
/**
|
||||
* icon bounceConfig
|
||||
* @description 弹跳动画属性设置
|
||||
*/
|
||||
bounceConfig: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
// 设置图标在跳跃后着陆时的反弹量
|
||||
rebound: '-0.125em',
|
||||
// 设置图标弹跳时跳到的最大高度
|
||||
height: '-0.5em',
|
||||
// 设置图标开始反弹时的水平挤压
|
||||
startScaleX: '1.1',
|
||||
// 设置图标开始反弹时的垂直挤压
|
||||
startScaleY: '0.9',
|
||||
// 设置图标弹跳时的水平挤压
|
||||
jumpScaleX: '0.9',
|
||||
// 设置图标弹跳时的垂直挤压
|
||||
jumpScaleY: '1.1',
|
||||
// 设置图标弹跳后着陆时的水平挤压
|
||||
landScaleX: '1.05',
|
||||
// 设置图标弹跳后着陆时的垂直挤压
|
||||
landScaleY: '0.95',
|
||||
}),
|
||||
},
|
||||
/**
|
||||
* icon flip
|
||||
* @description 翻转动画
|
||||
*/
|
||||
flip: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
/**
|
||||
* icon flipConfig
|
||||
* @description 翻转动画属性设置
|
||||
*/
|
||||
flipConfig: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
// 设置旋转轴的 x 坐标（0~1）
|
||||
x: '0',
|
||||
// 设置旋转轴的 y 坐标（0~1)
|
||||
y: '1',
|
||||
// 设置旋转轴的 z 坐标（0~1)
|
||||
z: '0',
|
||||
// 设置翻转的旋转角度,正角表示顺时针旋转，负角表示逆时针旋转。
|
||||
angle: '-180deg',
|
||||
}),
|
||||
},
|
||||
/**
|
||||
* icon shake
|
||||
* @description 抖动动画
|
||||
*/
|
||||
shake: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
/**
|
||||
* icon spin
|
||||
* @description 顺时针旋转动画
|
||||
*/
|
||||
spin: {
|
||||
type: [Boolean, String],
|
||||
default: false,
|
||||
},
|
||||
/**
|
||||
* icon spinReverse
|
||||
* @description 逆时针旋转动画
|
||||
*/
|
||||
spinReverse: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
/**
|
||||
* icon spinPulse
|
||||
* @description 以8个节拍顺时针旋转动画
|
||||
*/
|
||||
spinPulse: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
/**
|
||||
* icon spinDelay
|
||||
* @description 旋转动画延迟时间
|
||||
* @link https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction
|
||||
*/
|
||||
spinDelay: {
|
||||
type: String,
|
||||
default: '0s',
|
||||
},
|
||||
/**
|
||||
* icon spinIterationCount
|
||||
* @description 旋转动画迭代次数
|
||||
*/
|
||||
spinIterationCount: {
|
||||
type: [String, Number],
|
||||
default: 'infinite',
|
||||
},
|
||||
/**
|
||||
* icon spinTiming
|
||||
* @description 旋转动画在帧中的进度
|
||||
* @example linear(默认线性), ease-in,ease-out,ease-in-out,step-start,step-end, steps(4, jump-start),cubic-bezier(0.1, -0.6, 0.2, 0);
|
||||
* @link https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-functionhttps://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function
|
||||
*/
|
||||
spinTiming: {
|
||||
type: String,
|
||||
default: 'linear',
|
||||
},
|
||||
/** icon border
|
||||
* @description 边框
|
||||
*/
|
||||
border: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
/**
|
||||
* icon borderConfig
|
||||
* @description 翻转动画属性设置
|
||||
*/
|
||||
borderConfig: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
// 设置边框颜色
|
||||
color: '#eee',
|
||||
// 设置图标周围的填充
|
||||
padding: '.04em .26em',
|
||||
// 设置边框半径
|
||||
radius: '.1em',
|
||||
// 设置边框样式
|
||||
// 可选值 solid(默认实线), dotted(点状边框),dashed(虚线),double(双线)
|
||||
style: 'solid',
|
||||
// 设置边框宽度
|
||||
width: '.08em',
|
||||
}),
|
||||
},
|
||||
/**
|
||||
* icon float
|
||||
* @description 浮动定位
|
||||
* @example: left ,right
|
||||
*/
|
||||
float: {
|
||||
type: String,
|
||||
},
|
||||
/** icon pullMargin
|
||||
* @description 设置图标周围的边距
|
||||
*/
|
||||
pullMargin: {
|
||||
type: String,
|
||||
default: '.3em',
|
||||
},
|
||||
/** icon stack
|
||||
* @description 堆叠
|
||||
*/
|
||||
stack: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
/** icon stackX
|
||||
* @description 堆叠层
|
||||
* @example 1 (fa-stack-1x,以基本大小显示) 2(fa-stack-2x,以较大显示)
|
||||
* */
|
||||
stackX: {
|
||||
type: [String, Number],
|
||||
default: 1,
|
||||
validator(value: number) {
|
||||
// The value must match one of these strings
|
||||
return ['1', '2'].includes(value.toString());
|
||||
},
|
||||
},
|
||||
/** icon stackInverse
|
||||
* @description 堆叠 图标反色
|
||||
*/
|
||||
stackInverse: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
/** icon stackChild
|
||||
* @description 堆叠子元素
|
||||
*/
|
||||
stackChild: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
/** icon stackZIndex
|
||||
* @description 堆叠子元素 层级
|
||||
*/
|
||||
stackZIndex: {
|
||||
type: [String, Number],
|
||||
default: 'auto',
|
||||
},
|
||||
/** icon stackChild
|
||||
* @description 堆叠子元素图标反色
|
||||
*/
|
||||
stackInverseColor: {
|
||||
type: String,
|
||||
default: '#fff',
|
||||
},
|
||||
/** icon counter
|
||||
* @description 角标计数
|
||||
*/
|
||||
counter: {
|
||||
type: [String, Number, Boolean],
|
||||
default: false,
|
||||
},
|
||||
/** icon counterMax
|
||||
* @description 角标计数最大值
|
||||
*/
|
||||
counterMax: {
|
||||
type: Number,
|
||||
default: 99,
|
||||
},
|
||||
/** icon counterMax
|
||||
* @description 角标计数背景色
|
||||
*/
|
||||
counterMgColor: {
|
||||
type: String,
|
||||
default: '#ff253a',
|
||||
},
|
||||
};
|
||||
@ -1,259 +0,0 @@
|
||||
// animating icons
|
||||
// --------------------------
|
||||
|
||||
.#{$fa-css-prefix}-beat {
|
||||
animation-name: #{$fa-css-prefix}-beat;
|
||||
animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
|
||||
animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
|
||||
animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
|
||||
animation-iteration-count: var(
|
||||
--#{$fa-css-prefix}-animation-iteration-count,
|
||||
infinite
|
||||
);
|
||||
animation-timing-function: var(
|
||||
--#{$fa-css-prefix}-animation-timing,
|
||||
ease-in-out
|
||||
);
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-bounce {
|
||||
animation-name: #{$fa-css-prefix}-bounce;
|
||||
animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
|
||||
animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
|
||||
animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
|
||||
animation-iteration-count: var(
|
||||
--#{$fa-css-prefix}-animation-iteration-count,
|
||||
infinite
|
||||
);
|
||||
animation-timing-function: var(
|
||||
--#{$fa-css-prefix}-animation-timing,
|
||||
cubic-bezier(0.28, 0.84, 0.42, 1)
|
||||
);
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-fade {
|
||||
animation-name: #{$fa-css-prefix}-fade;
|
||||
animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
|
||||
animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
|
||||
animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
|
||||
animation-iteration-count: var(
|
||||
--#{$fa-css-prefix}-animation-iteration-count,
|
||||
infinite
|
||||
);
|
||||
animation-timing-function: var(
|
||||
--#{$fa-css-prefix}-animation-timing,
|
||||
cubic-bezier(0.4, 0, 0.6, 1)
|
||||
);
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-beat-fade {
|
||||
animation-name: #{$fa-css-prefix}-beat-fade;
|
||||
animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
|
||||
animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
|
||||
animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
|
||||
animation-iteration-count: var(
|
||||
--#{$fa-css-prefix}-animation-iteration-count,
|
||||
infinite
|
||||
);
|
||||
animation-timing-function: var(
|
||||
--#{$fa-css-prefix}-animation-timing,
|
||||
cubic-bezier(0.4, 0, 0.6, 1)
|
||||
);
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-flip {
|
||||
animation-name: #{$fa-css-prefix}-flip;
|
||||
animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
|
||||
animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
|
||||
animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
|
||||
animation-iteration-count: var(
|
||||
--#{$fa-css-prefix}-animation-iteration-count,
|
||||
infinite
|
||||
);
|
||||
animation-timing-function: var(
|
||||
--#{$fa-css-prefix}-animation-timing,
|
||||
ease-in-out
|
||||
);
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-shake {
|
||||
animation-name: #{$fa-css-prefix}-shake;
|
||||
animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
|
||||
animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
|
||||
animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
|
||||
animation-iteration-count: var(
|
||||
--#{$fa-css-prefix}-animation-iteration-count,
|
||||
infinite
|
||||
);
|
||||
animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, linear);
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-spin {
|
||||
animation-name: #{$fa-css-prefix}-spin;
|
||||
animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
|
||||
animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
|
||||
animation-duration: var(--#{$fa-css-prefix}-animation-duration, 2s);
|
||||
animation-iteration-count: var(
|
||||
--#{$fa-css-prefix}-animation-iteration-count,
|
||||
infinite
|
||||
);
|
||||
animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, linear);
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-spin-reverse {
|
||||
--#{$fa-css-prefix}-animation-direction: reverse;
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-pulse,
|
||||
.#{$fa-css-prefix}-spin-pulse {
|
||||
animation-name: #{$fa-css-prefix}-spin;
|
||||
animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
|
||||
animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
|
||||
animation-iteration-count: var(
|
||||
--#{$fa-css-prefix}-animation-iteration-count,
|
||||
infinite
|
||||
);
|
||||
animation-timing-function: var(
|
||||
--#{$fa-css-prefix}-animation-timing,
|
||||
steps(8)
|
||||
);
|
||||
}
|
||||
|
||||
// if agent or operating system prefers reduced motion, disable animations
|
||||
// see: https://www.smashingmagazine.com/2020/09/design-reduced-motion-sensitivities/
|
||||
// see: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.#{$fa-css-prefix}-beat,
|
||||
.#{$fa-css-prefix}-bounce,
|
||||
.#{$fa-css-prefix}-fade,
|
||||
.#{$fa-css-prefix}-beat-fade,
|
||||
.#{$fa-css-prefix}-flip,
|
||||
.#{$fa-css-prefix}-pulse,
|
||||
.#{$fa-css-prefix}-shake,
|
||||
.#{$fa-css-prefix}-spin,
|
||||
.#{$fa-css-prefix}-spin-pulse {
|
||||
animation-delay: -1ms;
|
||||
animation-duration: 1ms;
|
||||
animation-iteration-count: 1;
|
||||
transition-delay: 0s;
|
||||
transition-duration: 0s;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes #{$fa-css-prefix}-beat {
|
||||
0%,
|
||||
90% {
|
||||
transform: scale(1);
|
||||
}
|
||||
45% {
|
||||
transform: scale(var(--#{$fa-css-prefix}-beat-scale, 1.25));
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes #{$fa-css-prefix}-bounce {
|
||||
0% {
|
||||
transform: scale(1, 1) translateY(0);
|
||||
}
|
||||
10% {
|
||||
transform: scale(
|
||||
var(--#{$fa-css-prefix}-bounce-start-scale-x, 1.1),
|
||||
var(--#{$fa-css-prefix}-bounce-start-scale-y, 0.9)
|
||||
)
|
||||
translateY(0);
|
||||
}
|
||||
30% {
|
||||
transform: scale(
|
||||
var(--#{$fa-css-prefix}-bounce-jump-scale-x, 0.9),
|
||||
var(--#{$fa-css-prefix}-bounce-jump-scale-y, 1.1)
|
||||
)
|
||||
translateY(var(--#{$fa-css-prefix}-bounce-height, -0.5em));
|
||||
}
|
||||
50% {
|
||||
transform: scale(
|
||||
var(--#{$fa-css-prefix}-bounce-land-scale-x, 1.05),
|
||||
var(--#{$fa-css-prefix}-bounce-land-scale-y, 0.95)
|
||||
)
|
||||
translateY(0);
|
||||
}
|
||||
57% {
|
||||
transform: scale(1, 1)
|
||||
translateY(var(--#{$fa-css-prefix}-bounce-rebound, -0.125em));
|
||||
}
|
||||
64% {
|
||||
transform: scale(1, 1) translateY(0);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1, 1) translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes #{$fa-css-prefix}-fade {
|
||||
50% {
|
||||
opacity: var(--#{$fa-css-prefix}-fade-opacity, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes #{$fa-css-prefix}-beat-fade {
|
||||
0%,
|
||||
100% {
|
||||
opacity: var(--#{$fa-css-prefix}-beat-fade-opacity, 0.4);
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: scale(var(--#{$fa-css-prefix}-beat-fade-scale, 1.125));
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes #{$fa-css-prefix}-flip {
|
||||
50% {
|
||||
transform: rotate3d(
|
||||
var(--#{$fa-css-prefix}-flip-x, 0),
|
||||
var(--#{$fa-css-prefix}-flip-y, 1),
|
||||
var(--#{$fa-css-prefix}-flip-z, 0),
|
||||
var(--#{$fa-css-prefix}-flip-angle, -180deg)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes #{$fa-css-prefix}-shake {
|
||||
0% {
|
||||
transform: rotate(-15deg);
|
||||
}
|
||||
4% {
|
||||
transform: rotate(15deg);
|
||||
}
|
||||
8%,
|
||||
24% {
|
||||
transform: rotate(-18deg);
|
||||
}
|
||||
12%,
|
||||
28% {
|
||||
transform: rotate(18deg);
|
||||
}
|
||||
16% {
|
||||
transform: rotate(-22deg);
|
||||
}
|
||||
20% {
|
||||
transform: rotate(22deg);
|
||||
}
|
||||
32% {
|
||||
transform: rotate(-12deg);
|
||||
}
|
||||
36% {
|
||||
transform: rotate(12deg);
|
||||
}
|
||||
40%,
|
||||
100% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes #{$fa-css-prefix}-spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@ -1,20 +0,0 @@
|
||||
// bordered + pulled icons
|
||||
// -------------------------
|
||||
|
||||
.#{$fa-css-prefix}-border {
|
||||
border-color: var(--#{$fa-css-prefix}-border-color, #{$fa-border-color});
|
||||
border-radius: var(--#{$fa-css-prefix}-border-radius, #{$fa-border-radius});
|
||||
border-style: var(--#{$fa-css-prefix}-border-style, #{$fa-border-style});
|
||||
border-width: var(--#{$fa-css-prefix}-border-width, #{$fa-border-width});
|
||||
padding: var(--#{$fa-css-prefix}-border-padding, #{$fa-border-padding});
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-pull-left {
|
||||
float: left;
|
||||
margin-right: var(--#{$fa-css-prefix}-pull-margin, #{$fa-pull-margin});
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-pull-right {
|
||||
float: right;
|
||||
margin-left: var(--#{$fa-css-prefix}-pull-margin, #{$fa-pull-margin});
|
||||
}
|
||||
@ -1,78 +0,0 @@
|
||||
// base icon class definition
|
||||
// -------------------------
|
||||
@import 'variables';
|
||||
|
||||
.#{$fa-css-prefix} {
|
||||
font-family: var(--#{$fa-css-prefix}-style-family, '#{$fa-style-family}');
|
||||
font-weight: var(--#{$fa-css-prefix}-style, #{$fa-style});
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix},
|
||||
.#{$fa-css-prefix}-classic,
|
||||
.#{$fa-css-prefix}-sharp,
|
||||
.fas,
|
||||
.#{$fa-css-prefix}-solid,
|
||||
.far,
|
||||
.#{$fa-css-prefix}-regular,
|
||||
.fab,
|
||||
.#{$fa-css-prefix}-brands,
|
||||
.fal,
|
||||
.#{$fa-css-prefix}-light,
|
||||
.fat,
|
||||
.#{$fa-css-prefix}-thin,
|
||||
.fad,
|
||||
.#{$fa-css-prefix}-duotone,
|
||||
.fass,
|
||||
.#{$fa-css-prefix}-sharp,
|
||||
.#{$fa-css-prefix}-sharp-solid {
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
display: var(--#{$fa-css-prefix}-display, #{$fa-display});
|
||||
font-style: normal;
|
||||
font-variant: normal;
|
||||
line-height: 1;
|
||||
text-rendering: auto;
|
||||
}
|
||||
|
||||
.fas,
|
||||
.#{$fa-css-prefix}-classic,
|
||||
.#{$fa-css-prefix}-solid {
|
||||
font-family: $fa-style-family-solid;
|
||||
}
|
||||
.far,
|
||||
.#{$fa-css-prefix}-classic,
|
||||
.#{$fa-css-prefix}-regular {
|
||||
font-family: $fa-style-family-regular;
|
||||
}
|
||||
|
||||
.fal,
|
||||
.#{$fa-css-prefix}-classic,
|
||||
.#{$fa-css-prefix}-light {
|
||||
font-family: $fa-style-family-light;
|
||||
}
|
||||
|
||||
.fad,
|
||||
.#{$fa-css-prefix}-classic,
|
||||
.#{$fa-css-prefix}-duotone {
|
||||
font-family: $fa-style-family-duotone;
|
||||
}
|
||||
|
||||
.fat,
|
||||
.#{$fa-css-prefix}-classic,
|
||||
.#{$fa-css-prefix}-thin {
|
||||
font-family: $fa-style-family-thin;
|
||||
}
|
||||
|
||||
.fab,
|
||||
.#{$fa-css-prefix}-brands {
|
||||
font-family: $fa-style-family-brands;
|
||||
}
|
||||
|
||||
.fass,
|
||||
.#{$fa-css-prefix}-harp-solid.#{$fa-css-prefix}-solid {
|
||||
font-family: $fa-style-family-sharp-solid;
|
||||
}
|
||||
|
||||
%fa-icon {
|
||||
@include fa-icon;
|
||||
}
|
||||
@ -1,7 +0,0 @@
|
||||
// fixed-width icons
|
||||
// -------------------------
|
||||
|
||||
.#{$fa-css-prefix}-fw {
|
||||
text-align: center;
|
||||
width: $fa-fw-width;
|
||||
}
|
||||
@ -1,57 +0,0 @@
|
||||
// functions
|
||||
// --------------------------
|
||||
|
||||
// fa-content: convenience function used to set content property
|
||||
@function fa-content($fa-var) {
|
||||
@return unquote('"#{ $fa-var }"');
|
||||
}
|
||||
|
||||
// fa-divide: Originally obtained from the Bootstrap https://github.com/twbs/bootstrap
|
||||
//
|
||||
// Licensed under: The MIT License (MIT)
|
||||
//
|
||||
// Copyright (c) 2011-2021 Twitter, Inc.
|
||||
// Copyright (c) 2011-2021 The Bootstrap Authors
|
||||
//
|
||||
// Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
// of this software and associated documentation files (the "Software"), to deal
|
||||
// in the Software without restriction, including without limitation the rights
|
||||
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
// copies of the Software, and to permit persons to whom the Software is
|
||||
// furnished to do so, subject to the following conditions:
|
||||
//
|
||||
// The above copyright notice and this permission notice shall be included in
|
||||
// all copies or substantial portions of the Software.
|
||||
//
|
||||
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
// THE SOFTWARE.
|
||||
|
||||
@function fa-divide($dividend, $divisor, $precision: 10) {
|
||||
$sign: if($dividend > 0 and $divisor > 0, 1, -1);
|
||||
$dividend: abs($dividend);
|
||||
$divisor: abs($divisor);
|
||||
$quotient: 0;
|
||||
$remainder: $dividend;
|
||||
@if $dividend == 0 {
|
||||
@return 0;
|
||||
}
|
||||
@if $divisor == 0 {
|
||||
@error "Cannot divide by 0";
|
||||
}
|
||||
@if $divisor == 1 {
|
||||
@return $dividend;
|
||||
}
|
||||
@while $remainder >= $divisor {
|
||||
$quotient: $quotient + 1;
|
||||
$remainder: $remainder - $divisor;
|
||||
}
|
||||
@if $remainder > 0 and $precision > 0 {
|
||||
$remainder: fa-divide($remainder * 10, $divisor, $precision - 1) * 0.1;
|
||||
}
|
||||
@return ($quotient + $remainder) * $sign;
|
||||
}
|
||||
@ -1,16 +0,0 @@
|
||||
// specific icon class definition
|
||||
// -------------------------
|
||||
|
||||
/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
|
||||
readers do not read off random characters that represent icons */
|
||||
|
||||
@each $name, $icon in $fa-icons {
|
||||
.#{$fa-css-prefix}-#{$name}::before {
|
||||
content: unquote('"#{ $icon }"');
|
||||
}
|
||||
}
|
||||
@each $name, $icon in $fa-icons {
|
||||
.#{$fa-css-prefix}-duotone.#{$fa-css-prefix}-#{$name}::after {
|
||||
content: unquote('"#{ $icon }#{ $icon }"');
|
||||
}
|
||||
}
|
||||
@ -1,20 +0,0 @@
|
||||
// icons in a list
|
||||
// -------------------------
|
||||
|
||||
.#{$fa-css-prefix}-ul {
|
||||
list-style-type: none;
|
||||
margin-left: var(--#{$fa-css-prefix}-li-margin, #{$fa-li-margin});
|
||||
padding-left: 0;
|
||||
|
||||
> li {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-li {
|
||||
left: calc(var(--#{$fa-css-prefix}-li-width, #{$fa-li-width}) * -1);
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
width: var(--#{$fa-css-prefix}-li-width, #{$fa-li-width});
|
||||
line-height: inherit;
|
||||
}
|
||||
@ -1,110 +0,0 @@
|
||||
// mixins
|
||||
// --------------------------
|
||||
|
||||
// base rendering for an icon
|
||||
@mixin fa-icon {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
display: inline-block;
|
||||
font-style: normal;
|
||||
font-variant: normal;
|
||||
font-weight: normal;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
// sets relative font-sizing and alignment (in _sizing)
|
||||
@mixin fa-size($font-size) {
|
||||
font-size: fa-divide($font-size, $fa-size-scale-base) * 1em; // converts step in sizing scale into an em-based value that's relative to the scale's base
|
||||
line-height: fa-divide(1, $font-size) * 1em; // sets the line-height of the icon back to that of it's parent
|
||||
vertical-align: (fa-divide(6, $font-size) - fa-divide(3, 8)) * 1em; // vertically centers the icon taking into account the surrounding text's descender
|
||||
}
|
||||
|
||||
// only display content to screen readers
|
||||
// see: https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/
|
||||
// see: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/
|
||||
@mixin fa-sr-only() {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
// use in conjunction with .sr-only to only display content when it's focused
|
||||
@mixin fa-sr-only-focusable() {
|
||||
&:not(:focus) {
|
||||
@include fa-sr-only();
|
||||
}
|
||||
}
|
||||
|
||||
// sets a specific icon family to use alongside style + icon mixins
|
||||
|
||||
// convenience mixins for declaring pseudo-elements by CSS variable,
|
||||
// including all style-specific font properties, and both the ::before
|
||||
// and ::after elements in the duotone case.
|
||||
@mixin fa-icon-solid($fa-var) {
|
||||
@extend %fa-icon;
|
||||
@extend .fa-solid;
|
||||
|
||||
&::before {
|
||||
content: unquote('"#{ $fa-var }"');
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fa-icon-regular($fa-var) {
|
||||
@extend %fa-icon;
|
||||
@extend .fa-regular;
|
||||
|
||||
&::before {
|
||||
content: unquote('"#{ $fa-var }"');
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fa-icon-light($fa-var) {
|
||||
@extend %fa-icon;
|
||||
@extend .fa-light;
|
||||
|
||||
&::before {
|
||||
content: unquote('"#{ $fa-var }"');
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fa-icon-thin($fa-var) {
|
||||
@extend %fa-icon;
|
||||
@extend .fa-thin;
|
||||
|
||||
&::before {
|
||||
content: unquote('"#{ $fa-var }"');
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fa-icon-sharp-solid($fa-var) {
|
||||
@extend %fa-icon;
|
||||
@extend .fa-sharp-solid;
|
||||
|
||||
&::before {
|
||||
content: unquote('"#{ $fa-var }"');
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fa-icon-duotone($fa-var) {
|
||||
@extend %fa-icon;
|
||||
@extend .fa-duotone;
|
||||
|
||||
&::before {
|
||||
content: unquote('"#{ $fa-var }"');
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fa-icon-brands($fa-var) {
|
||||
@extend %fa-icon;
|
||||
@extend .fa-brands;
|
||||
|
||||
&::before {
|
||||
content: unquote('"#{ $fa-var }"');
|
||||
}
|
||||
}
|
||||
@ -1,31 +0,0 @@
|
||||
// rotating + flipping icons
|
||||
// -------------------------
|
||||
|
||||
.#{$fa-css-prefix}-rotate-90 {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-rotate-180 {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-rotate-270 {
|
||||
transform: rotate(270deg);
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-flip-horizontal {
|
||||
transform: scale(-1, 1);
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-flip-vertical {
|
||||
transform: scale(1, -1);
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-flip-both,
|
||||
.#{$fa-css-prefix}-flip-horizontal.#{$fa-css-prefix}-flip-vertical {
|
||||
transform: scale(-1, -1);
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-rotate-by {
|
||||
transform: rotate(var(--#{$fa-css-prefix}-rotate-angle, none));
|
||||
}
|
||||
@ -1,14 +0,0 @@
|
||||
// screen-reader utilities
|
||||
// -------------------------
|
||||
|
||||
// only display content to screen readers
|
||||
.sr-only,
|
||||
.#{$fa-css-prefix}-sr-only {
|
||||
@include fa-sr-only;
|
||||
}
|
||||
|
||||
// use in conjunction with .sr-only to only display content when it's focused
|
||||
.sr-only-focusable,
|
||||
.#{$fa-css-prefix}-sr-only-focusable {
|
||||
@include fa-sr-only-focusable;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,16 +0,0 @@
|
||||
// sizing icons
|
||||
// -------------------------
|
||||
|
||||
// literal magnification scale
|
||||
@for $i from 1 through 10 {
|
||||
.#{$fa-css-prefix}-#{$i}x {
|
||||
font-size: $i * 1em;
|
||||
}
|
||||
}
|
||||
|
||||
// step-based scale (with alignment)
|
||||
@each $size, $value in $fa-sizes {
|
||||
.#{$fa-css-prefix}-#{$size} {
|
||||
@include fa-size($value);
|
||||
}
|
||||
}
|
||||
@ -1,32 +0,0 @@
|
||||
// stacking icons
|
||||
// -------------------------
|
||||
|
||||
.#{$fa-css-prefix}-stack {
|
||||
display: inline-block;
|
||||
height: 2em;
|
||||
line-height: 2em;
|
||||
position: relative;
|
||||
vertical-align: $fa-stack-vertical-align;
|
||||
width: $fa-stack-width;
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-stack-1x,
|
||||
.#{$fa-css-prefix}-stack-2x {
|
||||
left: 0;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
z-index: var(--#{$fa-css-prefix}-stack-z-index, #{$fa-stack-z-index});
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-stack-1x {
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-stack-2x {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-inverse {
|
||||
color: var(--#{$fa-css-prefix}-inverse, #{$fa-inverse});
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,45 +0,0 @@
|
||||
/*!
|
||||
* Font Awesome Free 6.2.0 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
|
||||
* Copyright 2022 Fonticons, Inc.
|
||||
*/
|
||||
@import 'functions';
|
||||
@import 'variables';
|
||||
/* #ifndef MP-WEIXIN || MP-ALIPAY */
|
||||
@import 'fonts/fa-brands-400';
|
||||
|
||||
:root,
|
||||
:host {
|
||||
--#{$fa-css-prefix}-style-family-brands: $fa-style-family-brands;
|
||||
--#{$fa-css-prefix}-font-brands: normal 400 1em/1
|
||||
'#{ $fa-style-family-brands }';
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: $fa-style-family-brands;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: $fa-font-display;
|
||||
|
||||
/* #ifdef H5 */
|
||||
src: url('#{$fa-font-path}/fa-brands-400.woff2') format('woff2'),
|
||||
url('#{$fa-font-path}/fa-brands-400.ttf') format('truetype');
|
||||
/* #endif */
|
||||
|
||||
/* #ifndef H5 */
|
||||
src: $fa-brands-400-woff2;
|
||||
// $fa-brands-400-ttf;
|
||||
/* #endif */
|
||||
}
|
||||
/* #endif */
|
||||
|
||||
.fab,
|
||||
.#{$fa-css-prefix}-brands {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
@each $name, $icon in $fa-brand-icons {
|
||||
.#{$fa-css-prefix}-#{$name}:before {
|
||||
content: unquote('"#{ $icon }"');
|
||||
}
|
||||
}
|
||||
@ -1,59 +0,0 @@
|
||||
/*!
|
||||
* Font Awesome Free 6.2.0 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
|
||||
* Copyright 2022 Fonticons, Inc.
|
||||
*/
|
||||
@import 'functions';
|
||||
@import 'variables';
|
||||
/* #ifndef MP-WEIXIN || MP-ALIPAY */
|
||||
@import 'fonts/fa-duotone-900';
|
||||
|
||||
:root,
|
||||
:host {
|
||||
--#{$fa-css-prefix}-style-family-classic: $fa-style-family-duotone;
|
||||
--#{$fa-css-prefix}-font-duotone: normal 900 1em/1
|
||||
'#{ $fa-style-family-duotone }';
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: $fa-style-family-duotone;
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
font-display: $fa-font-display;
|
||||
/* #ifdef H5 */
|
||||
src: url('#{$fa-font-path}/fa-duotone-900.woff2') format('woff2'),
|
||||
url('#{$fa-font-path}/fa-duotone-900.ttf') format('truetype');
|
||||
/* #endif */
|
||||
|
||||
/* #ifndef H5 */
|
||||
src: $fa-duotone-900-woff2;
|
||||
// $fa-duotone-900-ttf;
|
||||
/* #endif */
|
||||
}
|
||||
/* #endif */
|
||||
|
||||
.far,
|
||||
.#{$fa-css-prefix}-duotone {
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.fad:before,
|
||||
.#{$fa-css-prefix}-duotone:before {
|
||||
position: absolute;
|
||||
color: $fa-primary-color;
|
||||
opacity: $fa-primary-opacity;
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-duotone.#{$fa-css-prefix}-swap-opacity:before,
|
||||
.#{$fa-css-prefix}-duotone:after,
|
||||
.#{$fa-css-prefix}-swap-opacity .#{$fa-css-prefix}-duotone:before,
|
||||
.#{$fa-css-prefix}-swap-opacity .fad:before,
|
||||
.fad.#{$fa-css-prefix}-swap-opacity:before,
|
||||
.fad:after {
|
||||
opacity: $fa-secondary-opacity;
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-duotone:after,
|
||||
.fad:after {
|
||||
color: $fa-secondary-color;
|
||||
}
|
||||
@ -1,21 +0,0 @@
|
||||
/*!
|
||||
* Font Awesome Free 6.2.0 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
|
||||
* Copyright 2022 Fonticons, Inc.
|
||||
*/
|
||||
// Font Awesome core compile (Web Fonts-based)
|
||||
// -------------------------
|
||||
|
||||
@import 'functions';
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
@import 'core';
|
||||
@import 'sizing';
|
||||
@import 'fixed-width';
|
||||
//@import 'list';
|
||||
@import 'bordered-pulled';
|
||||
@import 'animated';
|
||||
@import 'rotated-flipped';
|
||||
@import 'stacked';
|
||||
@import 'icons';
|
||||
@import 'screen-reader';
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,37 +0,0 @@
|
||||
/*!
|
||||
* Font Awesome Free 6.2.0 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
|
||||
* Copyright 2022 Fonticons, Inc.
|
||||
*/
|
||||
@import 'functions';
|
||||
@import 'variables';
|
||||
/* #ifndef MP-WEIXIN || MP-ALIPAY */
|
||||
@import 'fonts/fa-light-300';
|
||||
|
||||
:root,
|
||||
:host {
|
||||
--#{$fa-css-prefix}-style-family-classic: $fa-style-family-light;
|
||||
--#{$fa-css-prefix}-font-light: normal 300 1em/1 '#{ $fa-style-family-light }';
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: $fa-style-family-light;
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
font-display: $fa-font-display;
|
||||
/* #ifdef H5 */
|
||||
src: url('#{$fa-font-path}/fa-light-300.woff2') format('woff2'),
|
||||
url('#{$fa-font-path}/fa-light-300.ttf') format('truetype');
|
||||
/* #endif */
|
||||
|
||||
/* #ifndef H5 */
|
||||
src: $fa-light-300-woff2;
|
||||
// $fa-light-300-ttf;
|
||||
/* #endif */
|
||||
}
|
||||
/* #endif */
|
||||
|
||||
.far,
|
||||
.#{$fa-css-prefix}-light {
|
||||
font-weight: 300;
|
||||
}
|
||||
@ -1,39 +0,0 @@
|
||||
/*!
|
||||
* Font Awesome Free 6.2.0 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
|
||||
* Copyright 2022 Fonticons, Inc.
|
||||
*/
|
||||
@import 'functions';
|
||||
@import 'variables';
|
||||
/* #ifndef MP-WEIXIN || MP-ALIPAY */
|
||||
@import 'fonts/fa-regular-400';
|
||||
|
||||
:root,
|
||||
:host {
|
||||
--#{$fa-css-prefix}-style-family-classic: $fa-style-family-regular;
|
||||
--#{$fa-css-prefix}-font-regular: normal 400 1em/1
|
||||
'#{ $fa-style-family-regular }';
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: $fa-style-family-regular;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: $fa-font-display;
|
||||
/* #ifdef H5 */
|
||||
src: url('#{$fa-font-path}/fa-regular-400.woff2') format('woff2'),
|
||||
url('#{$fa-font-path}/fa-regular-400.ttf') format('truetype');
|
||||
/* #endif */
|
||||
|
||||
/* #ifndef H5 */
|
||||
src: $fa-regular-400-woff2;
|
||||
// $fa-regular-400-ttf;
|
||||
|
||||
/* #endif */
|
||||
}
|
||||
/* #endif */
|
||||
|
||||
.far,
|
||||
.#{$fa-css-prefix}-regular {
|
||||
font-weight: 400;
|
||||
}
|
||||
@ -1,38 +0,0 @@
|
||||
/*!
|
||||
* Font Awesome Free 6.2.0 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
|
||||
* Copyright 2022 Fonticons, Inc.
|
||||
*/
|
||||
@import 'functions';
|
||||
@import 'variables';
|
||||
/* #ifndef MP-WEIXIN || MP-ALIPAY */
|
||||
@import 'fonts/fa-sharp-solid-900';
|
||||
|
||||
:root,
|
||||
:host {
|
||||
--#{$fa-css-prefix}-style-family-sharp: $fa-style-family-sharp-solid;
|
||||
--#{$fa-css-prefix}-font-sharp-solid: normal 900 1em/1
|
||||
'#{ $fa-style-family-sharp-solid }';
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: $fa-style-family-sharp-solid;
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
font-display: $fa-font-display;
|
||||
/* #ifdef H5 */
|
||||
src: url('#{$fa-font-path}/fa-sharp-solid-900.woff2') format('woff2'),
|
||||
url('#{$fa-font-path}/fa-sharp-solid-900.ttf') format('truetype');
|
||||
/* #endif */
|
||||
|
||||
/* #ifndef H5 */
|
||||
src: $fa-sharp-solid-900-woff2;
|
||||
// $fa-sharp-solid-900-ttf;
|
||||
/* #endif */
|
||||
}
|
||||
/* #endif */
|
||||
|
||||
.far,
|
||||
.#{$fa-css-prefix}-sharp-solid {
|
||||
font-weight: 900;
|
||||
}
|
||||
@ -1,38 +0,0 @@
|
||||
/*!
|
||||
* Font Awesome Free 6.2.0 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
|
||||
* Copyright 2022 Fonticons, Inc.
|
||||
*/
|
||||
@import 'functions';
|
||||
@import 'variables';
|
||||
/* #ifndef MP-WEIXIN || MP-ALIPAY */
|
||||
@import 'fonts/fa-solid-900';
|
||||
|
||||
:root,
|
||||
:host {
|
||||
--#{$fa-css-prefix}-style-family-classic: $fa-style-family-solid;
|
||||
--#{$fa-css-prefix}-font-solid: normal 900 1em/1
|
||||
'#{ $fa-style-family-solid }';
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: $fa-style-family-solid;
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
font-display: $fa-font-display;
|
||||
/* #ifdef H5 */
|
||||
src: url('#{$fa-font-path}/fa-solid-900.woff2') format('woff2'),
|
||||
url('#{$fa-font-path}/fa-solid-900.ttf') format('truetype');
|
||||
/* #endif */
|
||||
|
||||
/* #ifndef H5 */
|
||||
src: $fa-solid-900-woff2;
|
||||
// $fa-solid-900-ttf;
|
||||
/* #endif */
|
||||
}
|
||||
/* #endif */
|
||||
|
||||
.fas,
|
||||
.#{$fa-css-prefix}-solid {
|
||||
font-weight: 900;
|
||||
}
|
||||
@ -1,37 +0,0 @@
|
||||
/*!
|
||||
* Font Awesome Free 6.2.0 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
|
||||
* Copyright 2022 Fonticons, Inc.
|
||||
*/
|
||||
@import 'functions';
|
||||
@import 'variables';
|
||||
/* #ifndef MP-WEIXIN || MP-ALIPAY */
|
||||
@import 'fonts/fa-thin-100';
|
||||
|
||||
:root,
|
||||
:host {
|
||||
--#{$fa-css-prefix}-style-family-classic: $fa-style-family-thin;
|
||||
--#{$fa-css-prefix}-font-thin: normal 100 1em/1 '#{ $fa-style-family-thin }';
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: $fa-style-family-thin;
|
||||
font-style: normal;
|
||||
font-weight: 100;
|
||||
font-display: $fa-font-display;
|
||||
/* #ifdef H5 */
|
||||
src: url('#{$fa-font-path}/fa-thin-100.woff2') format('woff2'),
|
||||
url('#{$fa-font-path}/fa-thin-100.ttf') format('truetype');
|
||||
/* #endif */
|
||||
|
||||
/* #ifndef H5 */
|
||||
src: $fa-thin-100-woff2;
|
||||
// $fa-thin-100-ttf;
|
||||
/* #endif */
|
||||
}
|
||||
/* #endif */
|
||||
|
||||
.far,
|
||||
.#{$fa-css-prefix}-thin {
|
||||
font-weight: 100;
|
||||
}
|
||||
@ -1,11 +0,0 @@
|
||||
/*!
|
||||
* Font Awesome Free 6.2.0 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
|
||||
* Copyright 2022 Fonticons, Inc.
|
||||
*/
|
||||
// V4 shims compile (Web Fonts-based)
|
||||
// -------------------------
|
||||
|
||||
@import 'functions';
|
||||
@import 'variables';
|
||||
@import 'shims';
|
||||
@ -1,471 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import AppProvider from '@/components/AppProvider/inedx.vue';
|
||||
import FontAwesomeIcon from '@/components/FontAwesomeIcon/index.vue';
|
||||
import { computed, reactive, ref, watch } from 'vue';
|
||||
import { random } from 'lodash-es';
|
||||
import {
|
||||
brandIcons,
|
||||
classicIcons,
|
||||
} from '@/demo/example/fontAwesomeIcon/icons';
|
||||
import { SetClipboardData } from '@/utils/uniapi';
|
||||
const attribute = reactive({
|
||||
mode: 'solid',
|
||||
sharp: false,
|
||||
color: '#000000',
|
||||
size: '64',
|
||||
rotate: '',
|
||||
rotateFlip: false,
|
||||
beat: false,
|
||||
fade: false,
|
||||
bounce: false,
|
||||
flip: false,
|
||||
shake: false,
|
||||
spin: false,
|
||||
});
|
||||
const exampleIcons = computed<string[]>(() => {
|
||||
return attribute.mode == 'brands' ? brandIcons : classicIcons;
|
||||
});
|
||||
const randomIndex = ref<number>(random(0, exampleIcons.value.length + 1));
|
||||
const iconName = ref<string>(exampleIcons.value[randomIndex.value]);
|
||||
const isFocus = ref(false);
|
||||
|
||||
watch(randomIndex, (newValue, oldValue) => {
|
||||
iconName.value = exampleIcons.value[newValue];
|
||||
});
|
||||
|
||||
const modeList = ['solid', 'regular', 'light', 'thin', 'duotone', 'brands'];
|
||||
const colors = [
|
||||
{
|
||||
color: '#000000',
|
||||
name: '黑色',
|
||||
},
|
||||
{
|
||||
color: '#FFFFFF',
|
||||
name: '白色',
|
||||
},
|
||||
{
|
||||
color: '#0000FF',
|
||||
name: '蓝色',
|
||||
},
|
||||
{
|
||||
color: '#008080',
|
||||
name: '蓝绿色',
|
||||
},
|
||||
{
|
||||
color: '#FF0000',
|
||||
name: '红色',
|
||||
},
|
||||
{
|
||||
color: '#00FF00',
|
||||
name: '绿色',
|
||||
},
|
||||
{
|
||||
color: '#FFFF00',
|
||||
name: '黄色',
|
||||
},
|
||||
];
|
||||
const rotateFlips = [
|
||||
{
|
||||
value: false,
|
||||
name: '正常',
|
||||
},
|
||||
{
|
||||
value: 'horizontal',
|
||||
name: '水平翻转',
|
||||
},
|
||||
{
|
||||
value: 'vertical',
|
||||
name: '垂直翻转',
|
||||
},
|
||||
{
|
||||
value: 'both',
|
||||
name: '垂直水平翻转',
|
||||
},
|
||||
];
|
||||
const animations = [
|
||||
{
|
||||
value: 'beat',
|
||||
name: '缩放',
|
||||
},
|
||||
{
|
||||
value: 'fade',
|
||||
name: '淡入淡出',
|
||||
},
|
||||
{
|
||||
value: 'bounce',
|
||||
name: '弹跳',
|
||||
},
|
||||
{
|
||||
value: 'flip',
|
||||
name: '翻转',
|
||||
},
|
||||
{
|
||||
value: 'shake',
|
||||
name: '抖动',
|
||||
},
|
||||
{
|
||||
value: 'spin',
|
||||
name: '旋转',
|
||||
},
|
||||
];
|
||||
|
||||
watch(
|
||||
() => attribute.mode,
|
||||
(newValue, oldValue) => {
|
||||
const newValueIndex = modeList.findIndex(item => item == newValue);
|
||||
const oldValueIndex = modeList.findIndex(item => item == oldValue);
|
||||
if (
|
||||
(newValueIndex == 5 && oldValueIndex < 5) ||
|
||||
(oldValueIndex == 5 && newValueIndex < 5)
|
||||
) {
|
||||
onRandom();
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
const setAttribute = (e: any) => {
|
||||
const { k: key, v: value } = e.currentTarget.dataset;
|
||||
const replaces = ['mode', 'color', 'size', 'rotate', 'rotateFlip'];
|
||||
if (key in attribute) {
|
||||
if (replaces.includes(key)) {
|
||||
// @ts-ignore
|
||||
attribute[key] = value;
|
||||
if (key == 'mode') {
|
||||
attribute.sharp = false;
|
||||
}
|
||||
if (key == 'rotate') attribute.rotateFlip = false;
|
||||
if (key == 'rotateFlip') attribute.rotate = '';
|
||||
return;
|
||||
}
|
||||
// @ts-ignore
|
||||
attribute[key] = !attribute[key];
|
||||
if (key == 'sharp' && attribute.sharp) {
|
||||
attribute.mode = 'solid';
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const onNumberChange = (e: any) => {
|
||||
const { k: key, type } = e.currentTarget.dataset;
|
||||
if (key in attribute) {
|
||||
// @ts-ignore
|
||||
let num = attribute[key] ? parseInt(attribute[key]) : 0;
|
||||
switch (type) {
|
||||
case 'minus':
|
||||
num -= 1;
|
||||
break;
|
||||
case 'plus':
|
||||
num += 1;
|
||||
break;
|
||||
}
|
||||
// @ts-ignore
|
||||
attribute[key] = num <= 0 || num > 360 ? '' : num.toString();
|
||||
}
|
||||
};
|
||||
const onRandom = () => {
|
||||
randomIndex.value = random(0, exampleIcons.value.length + 1);
|
||||
};
|
||||
const onFocus = () => {
|
||||
isFocus.value = true;
|
||||
};
|
||||
const onBlur = () => {
|
||||
isFocus.value = false;
|
||||
};
|
||||
const copyIconName = () => {
|
||||
SetClipboardData(iconName.value);
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<AppProvider>
|
||||
<view class="check-icon-wrap">
|
||||
<FontAwesomeIcon
|
||||
:name="iconName"
|
||||
:mode="attribute.mode"
|
||||
:sharp="attribute.sharp"
|
||||
:color="attribute.color"
|
||||
:size="attribute.size"
|
||||
:rotate="attribute.rotate"
|
||||
:rotate-flip="attribute.rotateFlip"
|
||||
:beat="attribute.beat"
|
||||
:fade="attribute.fade"
|
||||
:bounce="attribute.bounce"
|
||||
:flip="attribute.flip"
|
||||
:shake="attribute.shake"
|
||||
:spin="attribute.spin"
|
||||
/>
|
||||
</view>
|
||||
<view class="check-wrap" :class="{ focus: isFocus }">
|
||||
<view class="input-wrap">
|
||||
<input
|
||||
placeholder="Icon Name"
|
||||
type="text"
|
||||
@focus="onFocus"
|
||||
@blur="onBlur"
|
||||
v-model.trim.lazy="iconName"
|
||||
/>
|
||||
</view>
|
||||
<view class="icon-wrap">
|
||||
<FontAwesomeIcon
|
||||
@click="onRandom"
|
||||
name="shuffle"
|
||||
mode="duotone"
|
||||
color="#2F72EFFF"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="attribute-wrap">
|
||||
<view class="attribute-list">
|
||||
<view class="attribute-item copy" @click="copyIconName">
|
||||
<FontAwesomeIcon name="copy" mode="duotone" />
|
||||
<text>Copy Icon Name</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="mode">
|
||||
<view class="label">风格(mode): </view>
|
||||
<view class="attribute-list">
|
||||
<template v-for="(mode, index) in modeList" :key="index">
|
||||
<view
|
||||
class="attribute-item"
|
||||
@click="setAttribute"
|
||||
data-k="mode"
|
||||
:data-v="mode"
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
mode="regular"
|
||||
:name="attribute.mode == mode ? 'circle-dot' : 'circle'"
|
||||
/><text>{{ mode }}</text>
|
||||
</view>
|
||||
</template>
|
||||
<view
|
||||
class="attribute-item"
|
||||
style="width: 50%"
|
||||
@click="setAttribute"
|
||||
data-k="sharp"
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
:mode="attribute.sharp ? 'solid' : 'regular'"
|
||||
:name="attribute.sharp ? 'square-check' : 'square'"
|
||||
/><text>直角(sharp)</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="color">
|
||||
<view class="label">颜色(color): </view>
|
||||
<view class="attribute-list">
|
||||
<template v-for="(item, index) in colors" :key="index">
|
||||
<view
|
||||
class="attribute-item"
|
||||
@click="setAttribute"
|
||||
data-k="color"
|
||||
:data-v="item.color"
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
mode="regular"
|
||||
:name="attribute.color == item.color ? 'circle-dot' : 'circle'"
|
||||
/><text>{{ item.name }}</text>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
<view class="size flex-row">
|
||||
<view class="label">大小(size)[rpx]:</view>
|
||||
<view class="flex-row input-wrap">
|
||||
<view
|
||||
class="icon-warp minus"
|
||||
@click="onNumberChange"
|
||||
data-k="size"
|
||||
data-type="minus"
|
||||
>
|
||||
<FontAwesomeIcon name="minus" bg-color="#C3C6D1" />
|
||||
</view>
|
||||
<input
|
||||
class="attribute-input"
|
||||
type="number"
|
||||
v-model.trim.lazy="attribute.size"
|
||||
/>
|
||||
<view
|
||||
class="icon-warp plus"
|
||||
@click="onNumberChange"
|
||||
data-k="size"
|
||||
data-type="plus"
|
||||
>
|
||||
<FontAwesomeIcon name="plus" bg-color="#C3C6D1" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="rotate flex-row">
|
||||
<view class="label">旋转角度(rotate)[deg]: </view>
|
||||
<view class="flex-row input-wrap">
|
||||
<view
|
||||
class="icon-warp minus"
|
||||
@click="onNumberChange"
|
||||
data-k="rotate"
|
||||
data-type="minus"
|
||||
>
|
||||
<FontAwesomeIcon name="minus" bg-color="#C3C6D1" />
|
||||
</view>
|
||||
<input
|
||||
class="attribute-input"
|
||||
type="number"
|
||||
v-model.trim.lazy="attribute.rotate"
|
||||
/>
|
||||
<view
|
||||
class="icon-warp plus"
|
||||
@click="onNumberChange"
|
||||
data-k="rotate"
|
||||
data-type="plus"
|
||||
>
|
||||
<FontAwesomeIcon name="plus" bg-color="#C3C6D1" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="color">
|
||||
<view class="label">翻转(rotateFlip): </view>
|
||||
<view class="attribute-list">
|
||||
<template v-for="(item, index) in rotateFlips" :key="index">
|
||||
<view
|
||||
class="attribute-item"
|
||||
style="width: 50%"
|
||||
@click="setAttribute"
|
||||
data-k="rotateFlip"
|
||||
:data-v="item.value"
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
mode="regular"
|
||||
:name="
|
||||
attribute.rotateFlip == item.value ? 'circle-dot' : 'circle'
|
||||
"
|
||||
/><text>{{ item.name }}</text>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
<view class="animation">
|
||||
<view class="label">动画: </view>
|
||||
<view class="attribute-list">
|
||||
<template v-for="(item, index) in animations" :key="index">
|
||||
<view
|
||||
class="attribute-item"
|
||||
style="width: 50%"
|
||||
@click="setAttribute"
|
||||
:data-k="item.value"
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
:mode="attribute[item.value] ? 'solid' : 'regular'"
|
||||
:name="attribute[item.value] ? 'square-check' : 'square'"
|
||||
/><text>{{ item.name }}</text>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</AppProvider>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.title {
|
||||
margin: 20rpx 0 36rpx 0;
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
.check-icon-wrap {
|
||||
height: 160rpx;
|
||||
max-height: 200rpx;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: scroll;
|
||||
}
|
||||
.check-wrap {
|
||||
background-color: #ffffff;
|
||||
height: 88rpx;
|
||||
border-radius: 88rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 36rpx;
|
||||
box-shadow: 0rpx 0rpx 36rpx #a3adba;
|
||||
&.focus {
|
||||
//border: 1rpx solid #a3adba;
|
||||
}
|
||||
.input-wrap {
|
||||
flex-grow: 1;
|
||||
input {
|
||||
height: 64rpx;
|
||||
//outline: 1rpx solid #a3adba;
|
||||
}
|
||||
}
|
||||
.icon-wrap {
|
||||
width: 64rpx;
|
||||
text-align: right;
|
||||
font-size: 40rpx;
|
||||
&:hover {
|
||||
color: #ff8787;
|
||||
}
|
||||
}
|
||||
}
|
||||
.attribute-wrap {
|
||||
font-size: 26rpx;
|
||||
& > view {
|
||||
margin-top: 16rpx;
|
||||
align-items: center;
|
||||
}
|
||||
.label {
|
||||
font-style: oblique;
|
||||
}
|
||||
margin-top: 24rpx;
|
||||
.attribute-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.attribute-item {
|
||||
width: 30%;
|
||||
height: 56rpx;
|
||||
padding-left: 32rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text {
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
&.copy {
|
||||
width: 50%;
|
||||
color: #2f72efff;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.attribute-input {
|
||||
width: 96rpx;
|
||||
}
|
||||
.input-wrap {
|
||||
border: 1rpx solid #c3c6d1;
|
||||
border-radius: 16rpx;
|
||||
//padding: 0 12rpx;
|
||||
margin-left: 16rpx;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.icon-warp {
|
||||
background-color: #c3c6d1;
|
||||
height: 52rpx;
|
||||
line-height: 52rpx;
|
||||
padding: 0 16rpx;
|
||||
&.plus {
|
||||
border-top-right-radius: 16rpx;
|
||||
border-bottom-right-radius: 16rpx;
|
||||
}
|
||||
&.minus {
|
||||
border-top-left-radius: 16rpx;
|
||||
border-bottom-left-radius: 16rpx;
|
||||
}
|
||||
}
|
||||
.attribute-input {
|
||||
text-align: center;
|
||||
flex-grow: 1;
|
||||
height: 52rpx;
|
||||
margin: 0 16rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,345 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import AppProvider from '@/components/AppProvider/inedx.vue';
|
||||
import FontAwesomeIcon from '@/components/FontAwesomeIcon/index.vue';
|
||||
import { SetClipboardData } from '@/utils/uniapi';
|
||||
import { useRouter } from '@/hooks/router';
|
||||
|
||||
const iconLink = ref('https://fontawesome.com/icons');
|
||||
const route = useRouter();
|
||||
|
||||
const onCopyLink = () => {
|
||||
SetClipboardData(iconLink.value);
|
||||
};
|
||||
const onOpen = () => {
|
||||
/* #ifdef H5 */
|
||||
window.open(iconLink.value);
|
||||
/* #endif */
|
||||
/* #ifndef H5 */
|
||||
onCopyLink();
|
||||
/* #endif */
|
||||
};
|
||||
const jumpCheck = () => {
|
||||
route.push('/demo/example/fontAwesomeIcon/check');
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<AppProvider>
|
||||
<view class="h2"> FontAwesomeIcon 图标组件基于font awesome icon v6.2</view>
|
||||
<view class="tip">
|
||||
Tip: 共6种风格图标, 7个字体文件,
|
||||
<!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
|
||||
微信小程序和阿里小程序动态远程加载font awesome 字体,
|
||||
在\src\utils\fonts.ts中配置,
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP-WEIXIN || MP-ALIPAY -->
|
||||
H5,APP(Android)在组件目录index.scss中配置引入字体,
|
||||
<!-- #endif -->
|
||||
已测试: 支持H5, APP(Android), 微信小程序
|
||||
</view>
|
||||
<view class="tip" style="color: #595858; margin-top: 10px">
|
||||
官网:
|
||||
<text class="link" @click="onOpen">{{ iconLink }}</text>
|
||||
<FontAwesomeIcon mode="duotone" name="copy" @click="onCopyLink" />
|
||||
</view>
|
||||
<view class="tip" style="color: #595858; margin-top: 10px">
|
||||
<view>使用方法: 在官网图标库搜索查找需要的图标,Copy Icon Name</view>
|
||||
<view class="link" @click="jumpCheck">
|
||||
图标不可用? Check! <FontAwesomeIcon name="circle-exclamation-check" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="title">mode-不同风格,对应相应字体</view>
|
||||
<view> <FontAwesomeIcon name="house" />solid (默认)</view>
|
||||
<view> <FontAwesomeIcon mode="regular" name="house" />regular</view>
|
||||
<view> <FontAwesomeIcon mode="light" name="grid-2" />light grid-2</view>
|
||||
<view> <FontAwesomeIcon mode="light" name="house" />light</view>
|
||||
<view> <FontAwesomeIcon mode="thin" name="house" />thin</view>
|
||||
<view>
|
||||
<FontAwesomeIcon mode="duotone" name="trash-can-clock" />
|
||||
duotone trash-can-clock
|
||||
</view>
|
||||
<view> <FontAwesomeIcon mode="duotone" name="house" />duotone house</view>
|
||||
<view class="title">sharp-直角图标,对应sharp字体</view>
|
||||
<view> <FontAwesomeIcon name="user" sharp counter="999" /> sharp </view>
|
||||
|
||||
<view class="title">mode(brands)-logo,对应brands字体</view>
|
||||
<view> <FontAwesomeIcon mode="brands" name="bilibili" /> bilibili </view>
|
||||
<view> <FontAwesomeIcon mode="brands" name="alipay" /> alipay </view>
|
||||
|
||||
<view class="title">color-颜色</view>
|
||||
<view> <FontAwesomeIcon name="house" />默认 </view>
|
||||
<view> <FontAwesomeIcon name="house" color="Tomato" />Tomato </view>
|
||||
<view>
|
||||
<FontAwesomeIcon
|
||||
mode="regular"
|
||||
name="house"
|
||||
color="Dodgerblue"
|
||||
/>Dodgerblue</view
|
||||
>
|
||||
<view>
|
||||
<FontAwesomeIcon
|
||||
mode="light"
|
||||
name="house"
|
||||
color="Mediumslateblue"
|
||||
/>Mediumslateblue</view
|
||||
>
|
||||
<view>
|
||||
<FontAwesomeIcon mode="brands" name="bilibili" color="Dodgerblue" />
|
||||
Dodgerblue
|
||||
</view>
|
||||
|
||||
<view class="title">size-大小(单位rpx)</view>
|
||||
<view> <FontAwesomeIcon mode="light" name="house" />(默认)</view>
|
||||
<view> <FontAwesomeIcon mode="light" name="house" size="24" />24rpx</view>
|
||||
<view> <FontAwesomeIcon mode="thin" name="house" size="44" />44rpx</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
|
||||
mode="regular"
|
||||
name="house"
|
||||
bg-color="SkyBlue"
|
||||
/>regular</view
|
||||
>
|
||||
<view class="title">rotate-旋转角度</view>
|
||||
<view>
|
||||
<FontAwesomeIcon mode="duotone" name="house" rotate="63" />house 63</view
|
||||
>
|
||||
<view>
|
||||
<FontAwesomeIcon
|
||||
mode="duotone"
|
||||
name="snowboarding"
|
||||
rotate="58"
|
||||
/>snowboarding 58</view
|
||||
>
|
||||
<view class="title">rotateFlip-旋转-翻转</view>
|
||||
<view> <FontAwesomeIcon mode="duotone" name="snowboarding" />正常</view>
|
||||
<view>
|
||||
<FontAwesomeIcon
|
||||
mode="duotone"
|
||||
name="snowboarding"
|
||||
rotate-flip="horizontal"
|
||||
/>
|
||||
水平翻转
|
||||
</view>
|
||||
<view>
|
||||
<FontAwesomeIcon
|
||||
mode="duotone"
|
||||
name="snowboarding"
|
||||
rotate-flip="vertical"
|
||||
/>垂直翻转
|
||||
</view>
|
||||
<view>
|
||||
<FontAwesomeIcon
|
||||
mode="duotone"
|
||||
name="snowboarding"
|
||||
rotate-flip="both"
|
||||
/>垂直水平翻转
|
||||
</view>
|
||||
<view class="title">beat-缩放动画</view>
|
||||
<FontAwesomeIcon name="circle-plus" beat />
|
||||
<FontAwesomeIcon name="heart" beat />
|
||||
<view class="title">duration-动画持续时间</view>
|
||||
<FontAwesomeIcon name="heart" beat duration="1.5" />
|
||||
<view class="title">scale-缩放比例</view>
|
||||
<FontAwesomeIcon name="heart" beat duration="1.5" scale="2.0" />
|
||||
<view class="title">fade-淡入淡出动画 </view>
|
||||
<FontAwesomeIcon name="heart" fade />
|
||||
<view class="title">opacity-透明度值 </view>
|
||||
<FontAwesomeIcon name="heart" fade opacity="0.2" />
|
||||
<view class="title">beat+fade-跳动+淡入淡出动画 </view>
|
||||
<FontAwesomeIcon
|
||||
name="heart"
|
||||
beat
|
||||
fade
|
||||
opacity="0.68"
|
||||
duration="1.5"
|
||||
scale="2.0"
|
||||
/>
|
||||
<view class="title">bounce-弹跳动画 </view>
|
||||
<FontAwesomeIcon name="basketball" bounce />
|
||||
<FontAwesomeIcon name="volleyball" bounce />
|
||||
<FontAwesomeIcon name="frog" bounce />
|
||||
<FontAwesomeIcon
|
||||
name="envelope"
|
||||
bounce
|
||||
:bounce-config="{
|
||||
rebound: 0,
|
||||
startScaleX: 1,
|
||||
startScaleY: 1,
|
||||
jumpScaleX: 1,
|
||||
jumpScaleY: 1,
|
||||
landScaleX: 1,
|
||||
landScaleY: 1,
|
||||
}"
|
||||
/>
|
||||
<view class="title">flip-翻转动画</view>
|
||||
<FontAwesomeIcon name="compact-disc" flip />
|
||||
<FontAwesomeIcon name="camera-rotate" flip />
|
||||
<FontAwesomeIcon name="cassette-tape" flip />
|
||||
<FontAwesomeIcon
|
||||
name="scroll"
|
||||
flip
|
||||
:flip-config="{
|
||||
x: '1',
|
||||
y: '0',
|
||||
}"
|
||||
/>
|
||||
<FontAwesomeIcon name="money-check-dollar" flip duration="3" />
|
||||
|
||||
<view class="title">shake-抖动动画</view>
|
||||
<FontAwesomeIcon name="bell" shake />
|
||||
<FontAwesomeIcon name="stopwatch" shake />
|
||||
<FontAwesomeIcon name="bomb" shake />
|
||||
<view class="title">spin-旋转动画</view>
|
||||
<FontAwesomeIcon name="sync" spin duration="2" />
|
||||
<FontAwesomeIcon name="circle-notch" spin duration="1.5" />
|
||||
<FontAwesomeIcon name="cog" spin duration="2" />
|
||||
<FontAwesomeIcon name="cog" spin spin-reverse duration="15" />
|
||||
<FontAwesomeIcon
|
||||
name="spinner"
|
||||
spin
|
||||
spin-pulse
|
||||
spin-delay="5s"
|
||||
duration="2"
|
||||
/>
|
||||
<FontAwesomeIcon
|
||||
name="spinner"
|
||||
spin
|
||||
spin-pulse
|
||||
spin-reverse
|
||||
spin-iteration-count="3"
|
||||
duration="2"
|
||||
/>
|
||||
<view class="title">border-边框</view>
|
||||
<FontAwesomeIcon name="arrow-right" border />
|
||||
<FontAwesomeIcon
|
||||
name="arrow-right"
|
||||
border
|
||||
:border-config="{ color: '#000' }"
|
||||
/>
|
||||
|
||||
<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>
|
||||
<FontAwesomeIcon name="arrow-right" float="right" />
|
||||
<FontAwesomeIcon name="arrow-left" float="left" />
|
||||
</view>
|
||||
<view class="title" style="clear: both">stack-堆叠</view>
|
||||
<FontAwesomeIcon stack>
|
||||
<template #default="slotProps">
|
||||
<FontAwesomeIcon
|
||||
name="circle"
|
||||
:stack-child="slotProps.stack"
|
||||
stack-x="2"
|
||||
/>
|
||||
<FontAwesomeIcon
|
||||
name="flag"
|
||||
:stack-child="slotProps.stack"
|
||||
stack-inverse
|
||||
stack-x="1"
|
||||
/>
|
||||
</template>
|
||||
</FontAwesomeIcon>
|
||||
<FontAwesomeIcon stack flip>
|
||||
<template #default="slotProps">
|
||||
<FontAwesomeIcon
|
||||
mode="brands"
|
||||
name="twitter"
|
||||
:stack-child="slotProps.stack"
|
||||
stack-inverse
|
||||
stack-z-index="2"
|
||||
stack-x="1"
|
||||
/>
|
||||
<FontAwesomeIcon
|
||||
name="square"
|
||||
:stack-child="slotProps.stack"
|
||||
stack-x="2"
|
||||
/>
|
||||
</template>
|
||||
</FontAwesomeIcon>
|
||||
|
||||
<FontAwesomeIcon stack counter="999">
|
||||
<template #default="slotProps">
|
||||
<FontAwesomeIcon
|
||||
mode="brands"
|
||||
name="twitter"
|
||||
:stack-child="slotProps.stack"
|
||||
stack-inverse
|
||||
stack-inverse-color="#1da1f2"
|
||||
stack-z-index="2"
|
||||
stack-x="1"
|
||||
/>
|
||||
<FontAwesomeIcon
|
||||
name="square"
|
||||
:stack-child="slotProps.stack"
|
||||
stack-x="2"
|
||||
/>
|
||||
</template>
|
||||
</FontAwesomeIcon>
|
||||
|
||||
<FontAwesomeIcon stack shake>
|
||||
<template #default="slotProps">
|
||||
<FontAwesomeIcon
|
||||
name="camera"
|
||||
:stack-child="slotProps.stack"
|
||||
stack-x="1"
|
||||
/>
|
||||
<FontAwesomeIcon
|
||||
name="ban"
|
||||
:stack-child="slotProps.stack"
|
||||
stack-inverse-color="Tomato"
|
||||
stack-inverse
|
||||
stack-x="2"
|
||||
/>
|
||||
</template>
|
||||
</FontAwesomeIcon>
|
||||
<FontAwesomeIcon stack rotate="45">
|
||||
<template #default="slotProps">
|
||||
<FontAwesomeIcon
|
||||
name="square"
|
||||
:stack-child="slotProps.stack"
|
||||
stack-x="2"
|
||||
/>
|
||||
<FontAwesomeIcon
|
||||
name="terminal"
|
||||
rotate="-45"
|
||||
:stack-child="slotProps.stack"
|
||||
stack-inverse-color="Tomato"
|
||||
stack-inverse
|
||||
stack-x="1"
|
||||
/>
|
||||
</template>
|
||||
</FontAwesomeIcon>
|
||||
</AppProvider>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.h2 {
|
||||
font-size: 32rpx;
|
||||
font-weight: 900;
|
||||
}
|
||||
.tip {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #ff253a;
|
||||
.link {
|
||||
margin-right: 16rpx;
|
||||
&:hover {
|
||||
color: #315efb;
|
||||
opacity: 0.6;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
.title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
margin: 28rpx 0 8rpx 0;
|
||||
color: #333333;
|
||||
font-style: oblique;
|
||||
}
|
||||
</style>
|
||||
@ -82,25 +82,6 @@
|
||||
"ignoreAuth": true
|
||||
}
|
||||
}]
|
||||
},{
|
||||
"root": "demo/example",
|
||||
"pages": [{
|
||||
"path": "fontAwesomeIcon/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "FontAwesomeIcon-Demo"
|
||||
},
|
||||
"meta": {
|
||||
"ignoreAuth": true
|
||||
}
|
||||
},{
|
||||
"path": "fontAwesomeIcon/check",
|
||||
"style": {
|
||||
"navigationBarTitleText": "FontAwesomeIcon-Check"
|
||||
},
|
||||
"meta": {
|
||||
"ignoreAuth": true
|
||||
}
|
||||
}]
|
||||
}],
|
||||
"globalStyle": {
|
||||
"navigationBarTextStyle": "black",
|
||||
|
||||
@ -7,20 +7,14 @@
|
||||
const jumpList1 = () => {
|
||||
router.push('/pagesA/list/test1/index?key=words&page=1&limit=15');
|
||||
};
|
||||
const jumpFontAwesomeIcon = () => {
|
||||
router.push('/demo/example/fontAwesomeIcon/index');
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppProvider>
|
||||
<view class="container"> 页面构建中... </view>
|
||||
<view class="flex-row justify-center">
|
||||
<view class="un-center">
|
||||
<BasicButton @click="jumpList1">List1 → </BasicButton>
|
||||
</view>
|
||||
<view class="flex-row justify-center">
|
||||
<BasicButton @click="jumpFontAwesomeIcon">FontAwesomeIcon → </BasicButton>
|
||||
</view>
|
||||
</AppProvider>
|
||||
</template>
|
||||
|
||||
|
||||
@ -2,7 +2,6 @@
|
||||
import { ref } from 'vue';
|
||||
import BasicButton from '@/components/BasicButton/index.vue';
|
||||
import AppProvider from '@/components/AppProvider/inedx.vue';
|
||||
import FontAwesomeIcon from '@/components/FontAwesomeIcon/index.vue';
|
||||
import { useRouter } from '@/hooks/router';
|
||||
import { CURRENT_PLATFORM, PLATFORMS } from '@/enums/platformEnum';
|
||||
import { judgePlatform } from '@/utils/platform';
|
||||
@ -29,12 +28,11 @@
|
||||
<view class="text-area">
|
||||
<text class="">是否是Vue3: {{ isVue3 }}</text>
|
||||
</view>
|
||||
<view> <FontAwesomeIcon name="house" />solid (默认)</view>
|
||||
<view class="text-area">
|
||||
<text class="">当前平台: {{ platform }}</text>
|
||||
</view>
|
||||
<BasicButton @click="handleGetStarted">Get Started → </BasicButton>
|
||||
<view class="uno-text-red">uno css</view>
|
||||
<view class="un-text-red">uno css</view>
|
||||
<Iconify icon="ant-design:login-outlined" />
|
||||
<view
|
||||
class="iconify m-iconify"
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -1,116 +0,0 @@
|
||||
import { getBaseUrl } from '@/utils/env';
|
||||
|
||||
const fa_style_family = 'Font Awesome 6';
|
||||
|
||||
const fa_style_family_solid = `${fa_style_family} Solid`;
|
||||
const fa_style_family_regular = `${fa_style_family} Regular`;
|
||||
const fa_style_family_light = `${fa_style_family} Light`;
|
||||
const fa_style_family_thin = `${fa_style_family} Thin`;
|
||||
const fa_style_family_sharp_solid = `${fa_style_family} Sharp Solid`;
|
||||
const fa_style_family_brands = `${fa_style_family} Brands Regular`;
|
||||
const fa_style_family_duotone = `${fa_style_family} Duotone Solid`;
|
||||
|
||||
const BASE_URL = getBaseUrl();
|
||||
|
||||
const fontFamilyList = [
|
||||
{
|
||||
family: fa_style_family_solid,
|
||||
source: `/fa-solid-900.woff2`,
|
||||
weight: '900',
|
||||
},
|
||||
{
|
||||
family: fa_style_family_regular,
|
||||
source: `/fa-regular-400.woff2`,
|
||||
weight: '400',
|
||||
},
|
||||
{
|
||||
family: fa_style_family_light,
|
||||
source: `/fa-light-300.woff2`,
|
||||
weight: '300',
|
||||
},
|
||||
{
|
||||
family: fa_style_family_thin,
|
||||
source: `/fa-thin-100.woff2`,
|
||||
weight: '100',
|
||||
},
|
||||
{
|
||||
family: fa_style_family_sharp_solid,
|
||||
source: `/fa-sharp-solid-900.woff2`,
|
||||
weight: '900',
|
||||
},
|
||||
{
|
||||
family: fa_style_family_duotone,
|
||||
source: `/fa-duotone-900.woff2`,
|
||||
weight: '900',
|
||||
},
|
||||
{
|
||||
family: fa_style_family_brands,
|
||||
source: `/fa-brands-400.woff2`,
|
||||
weight: '400',
|
||||
},
|
||||
];
|
||||
|
||||
function LoadFontFace(
|
||||
data: UniApp.LoadFontFaceOptions & { weight?: string; global?: boolean },
|
||||
) {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.loadFontFace({
|
||||
global: true,
|
||||
...data,
|
||||
desc: {
|
||||
style: 'normal',
|
||||
weight: data.weight ?? 'normal',
|
||||
variant: 'normal',
|
||||
},
|
||||
success: res => {
|
||||
resolve(res);
|
||||
},
|
||||
fail: err => {
|
||||
reject(err);
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 动态加载字体
|
||||
*/
|
||||
export function dynamicLoadFontFace() {
|
||||
/* 实际项目中替换为自己服务器的静态资源地址
|
||||
* 微信小程序端字体链接必须是同源下的，或开启了cors支持，微信小程序的域名是servicewechat.com
|
||||
* */
|
||||
const DYNAMIC_LOAD_FONT_FACE_URL = `${BASE_URL}/fonts`;
|
||||
fontFamilyList.forEach(fontFamily => {
|
||||
LoadFontFace({
|
||||
...fontFamily,
|
||||
source: `url(${DYNAMIC_LOAD_FONT_FACE_URL}${fontFamily.source})`,
|
||||
})
|
||||
.then((res: any) => {
|
||||
console.log(fontFamily.family, res.errMsg);
|
||||
})
|
||||
.catch(err => {
|
||||
console.error(fontFamily.family, err.errMsg);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* APP本地加载字体
|
||||
*/
|
||||
export function loadFontFaceFromLocal() {
|
||||
fontFamilyList.forEach(fontFamily => {
|
||||
const source = `url(${plus.io.convertLocalFileSystemURL(
|
||||
`_www/static/fonts${fontFamily.source}`,
|
||||
)})`;
|
||||
LoadFontFace({
|
||||
...fontFamily,
|
||||
source,
|
||||
})
|
||||
.then((res: any) => {
|
||||
console.log(fontFamily.family, res.errMsg);
|
||||
})
|
||||
.catch(err => {
|
||||
console.error(fontFamily.family, err);
|
||||
});
|
||||
});
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user